JavaWeb开发中关于页面那些事儿(一)
来源:互联网 发布:nginx 绝对路径配置 编辑:程序博客网 时间:2024/06/10 00:44
我们项目中的一个页面上有一个人员清单列表,列出的每一数据由多个字段组成并匹配复选框供用户进行选择。在列表下方有一个添加按钮,可以将选中数据条目添加到某一个实体对象中去。如下图所示:
其中一个重要的功能就是做全选,虽然很容易实现,但是也不能忽略,有些面试也会问到的。代码如下:
HTML的代码:
<input id="checkAll" type="checkbox" title="全选"/>jQuery的代码:
$("#checkAll").click(function(){$(".checkbox").attr("checked", $(this).prop("checked")); // 该方法包含全选和反选})其中要注意的点:checkAll是进行全选操作唯一的复选框,所以可以用id来获取,而下面的都是相同的复选框(复选框的id不同),没必要一个个去写,可以通过jquery进行动态生成,这里等下再说,所以都用相同的class获取即可。
因为这些数据是通过查询条件查出来的,之前并没有数据,因为每条数据之前都要附带复选框,而仅仅从数据库中查询的只能查到数据,所以我们用jquery遍历的方法将查询出来的数据逐一添加到列表下面。代码如下:
$("#btnSearch").click(function(){ // 这里的btnSearch表示查询按钮的idloading('正在查询,请稍等...');$.post("${ctx}/safe/stress/safeStressScheme/findPersonList?" + $("#inputForm").serialize(), // 注意:这里是一个比较我觉得比较新颖的写法,原来我们一般把action写在表单里,但这里我们需要在JS里做更多处理,所以直接post到后台得到的结果并不能满足我们的需求,可以将表单序列化为可以传输的形式后再提交给后台 function(data){var html = "";$.each(data,function(i,item){ // 遍历方法,i表示当前循环到第几个索引,item表示要遍历的对象(后台返回)html += '<tr>';html += '<td><input class="checkbox" name="staffIds" type="checkbox" value="'+item.staffId+'"/></td>';html += '<td>'+(i+1)+'</td>';html += '<td>'+item.code+'</td>';html += '<td>'+item.name+'</td>';html += '<td>'+item.sex+'</td>';html += '<td>'+item.currMouthFoul+'</td>';html += '<td>'+item.currThreeMounthFoul+'</td>';html += '<td>'+item.currSixMounthFoul+'</td>';html += '<td>'+item.allYearFoul+'</td>';html += '<td>'+item.allYearBruiseNum+'</td>';html += '<td>'+item.allYeardieNum+'</td>';html += '<td>'+item.allYearFault+'</td>';html += '<td>'+item.sum+'</td>';html += '<td>'+item.status+'</td>';html += '<td>'+item.lineCode+'</td>';html += '<td>'+item.fleetName+'</td>';html += '<td>'+item.siteType+'</td>';html += '<td>'+item.entryDate+'</td>';html += '</tr>';});$("#dealInfo tbody").html(html); // 将动态生成的html代码块添加到tbody标签下$(".checkbox").click(function(){ // 随机点击一个复选框$("#checkAll").attr("checked",true); // 假设选中全选框 $.each($(".checkbox"),function(i,item){ // 遍历每个复选框if(!$(item).is(":checked")){ // 如果有一个复选框没选中$("#checkAll").attr("checked",false); // 全选框改为不被选中return false;}})})closeLoading(); // 关闭加载},"json");})
阅读全文
0 0
- JavaWeb开发中关于页面那些事儿(一)
- 关于androidstudio cmake那些事儿(一)
- 嵌入式开发的那些事儿(一)
- android开发那些事儿(一)
- 关于大数据的那些事儿(一)
- 关于tomcat配置docBase和ROOT 那些事儿(一)
- 关于Hive数据仓库的那些事儿(一)模式设计
- 移动端那些事儿(一)移动端开发注意事项
- Android 开发之 Gradle那些事儿(一)
- 敏捷那些事儿(一)
- Ext2那些事儿(一)
- JSF那些事儿(一)
- JCL那些事儿(一)
- 反编译那些事儿(一)
- iTween 那些事儿(一)
- 操作系统那些事儿(一)
- SQL那些事儿(一)
- 神经网络那些事儿(一)
- 移除元素方法
- docker使用
- vue的跨域问题
- springaop
- 人群行为分析--Understanding Pedestrian Behaviors from Stationary Crowd Groups
- JavaWeb开发中关于页面那些事儿(一)
- 正则表达式替换img标签src值
- 有关Lucene的问题(6):Lucene的事务性
- BZOJ 4104: [Thu Summer Camp 2015]解密运算
- ButtonKnife在library报“Attribute value must be constant”
- 简易菜单界面
- Android之无法隐藏标题栏 继承AppCompatActivity的Activity无法隐藏标题栏解决方案
- 分享几个视频音频学习网站
- GitHub和webstorm配置