Jquery 中each循环嵌套的使用示例教程
2016-01-18 14:57
711 查看
1、从MVC返回的Json数据如下:
2、下面是客户端实现的示例:
3、最后要实现的效果如下:
2、下面是客户端实现的示例:
$.post("/admin/GetPermissionsForRole", function (data,status) { if (status == "success") { var ghtml = ""; $.each(data, function (i, items) { //items相当于二维数组里的每一个一维数组 if (items["ParentPermissionId"] == "") { ghtml += "<div class='panel panel-transparent'> <ul class='list-group'>"; ghtml += "<div class='panel-heading'><i class='fa fa-list-ul'></i> <span class='panel-title text-bold'>" + items["PermissionName"] + "</span></div>"; ghtml += "<ul class='list-group'>"; $.each(data, function (i, sitems) { if (sitems["ParentPermissionId"] == items["PermissionId"]) { ghtml += "<li class='list-group-item'>"; ghtml += "<h6 class='text-bold text-semibold text-xs' style='margin:20px 0 10px 0'>"; ghtml += "<label class='px-single'><input type='checkbox' class='px'><span class='lbl'> </span></label> " + sitems["PermissionName"]; ghtml += "</h6>"; ghtml += "<p>"; $.each(data, function (i, ssitems) { if (ssitems["ParentPermissionId"] == sitems["PermissionId"]) { ghtml += "<label class='checkbox'><input type='checkbox' class='px' /><span class='lbl'>" + ssitems["PermissionName"]+ "</span></label>"; } }) ghtml += "</p>"; ghtml += "</li>"; } }) ghtml += "</ul></div>"; } }); $("#premlist").html(ghtml); } })
3、最后要实现的效果如下:
//权限"全选或者取消"功能代码,此代码必须要放在append()的后面,不然不起作用 var xsChk = 'px';//定义的样式 var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox $(xsChkAll).each(function () { var name = $(this).attr("name"); name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox $(this).on('click', function () { $(name).attr("checked", $(this)[0].checked); }) var xschk = $(this); $(name).on('click', function () { var IAll = $(name).length; //此子项目下所有checkbox的个数 var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数 var isAllChecked = true; //是否是全选 if (IAll != IChk) { isAllChecked = false; } $(xschk).attr("checked", isAllChecked); }); }); //会选或者取消功能结束
相关文章推荐
- jquery跳出当前的each循环的方式
- jquery跳出当前的each循环的方式
- jquery easyui datagrid使用参考
- Query学习之jQuery Ajax用法详解
- JQuery遍历json数组的3种方法
- jQuery中的attr和prop区别
- jquery操作cookie
- nyroModal:强大的jQuery弹出层插件
- JQuery删除cookie失效
- javascript: jquery.gomap-1.3.3.js
- jQuery Validate验证框架详解
- jQuery上传插件Uploadify使用详解
- [转]jquery-confirm
- jQuery 文本编辑器插件 HtmlBox 使用
- 10 个免费的 jQuery 可视化编辑器插件
- FooTable高级的响应式表格jQuery插件
- jquery easyui tab加载内容的几种方法
- jQuery实现多级联动下拉列表查询框
- jquery validate表单验证的基本用法入门
- jQuery 事件 - load() 方法