1、从MVC返回的Json数据如下:

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>&nbsp;<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'>&nbsp;</span></label>&nbsp;&nbsp;" + 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)[].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循环嵌套的使用示例教程的更多相关文章

  1. jQuery中each循环的跳出和结束

    jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用ret ...

  2. jQuery源码分析-jQuery中的循环技巧

    作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 前记:本文收集了jQuery ...

  3. JS中for循环嵌套

    for 循环 for语句也是一种前测试循环语句,但它具有在 执行循环之前初始化变量 和 定义循环后要执行的代码的能力 for循环中专门提供了位置来放置循环的三个表达式 定义一个循环需要做实现这三步: ...

  4. tonado框架的列表嵌套 (template中for循环嵌套)

            学习了tonado框架,渐渐开始明白模板的转换,以后肯定还会遇到很多问题... 功能描述:       页面显示读取的数据库父导航名称,再通过嵌套列表将子导航名称和地址查询出来,返回到 ...

  5. jquery中each遍历对象和数组示例

    通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...

  6. JS中的循环嵌套 BOM函数

    [嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做 ...

  7. JS&Jquery中的循环/遍历

    JavaScript中的遍历 for 遍历 var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++) { //具体 ...

  8. jquery中for循环

    1.循环遍历标签 //定义数组 var imagesPath=[]; //循环遍历对象 $("#uploadList li img").each(function(){ image ...

  9. jquery中div悬浮嵌套按钮效果

    <div class="btn_sure_cai" style="margin-left: 0px;" onmouseover="show_hi ...

随机推荐

  1. 11个实用但你可能不知道的Python程序库

    目前,网上已有成千上万个Python包,但几乎没有人能够全部知道它们.单单PyPi上就有超过47000个包列表. 现在,越来越多的数据科学家开始使用Python,虽然他们从pandas,scikit- ...

  2. 界面调试工具Reveal的使用介绍

    Reveal 注: 此处介绍Reveal,其中大部分内容来自于唐巧的<iOS开发进阶>一书,以此说明. 如何使用Reveal进行模拟器调试,只需进行以下三个步骤即可. 1. 创建.lldb ...

  3. js取一维数组最大值,最小值

    最近项目中遇到了,处理数组数据问题:     var newStrs=[1,2,3,4];               alert(Math.min.apply(null,newStrs));  // ...

  4. 一个分组查询 每组前 10 的sql 语句

    USE tmpgo CREATE TABLE Employee( ID int identity(1,1), EmpName varchar(20), EmpSalary varchar(10), E ...

  5. 漏网之鱼--HTML&CSS

    一.HTML <meta>标签使用该标签描述网页的具体摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等.<meta>标签描述的内容并不显示 ...

  6. 高质量程序设计指南C/C++语言——C++/C常量

  7. LeetCode——Length of Last Word

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  8. 【转】 /etc/fstab功能详解

    [转] /etc/fstab功能详解 最近去客户现场时,遇到 了一个关于挂载文件/etc/fstab文件的问题,就写了一下/etc/fstab文件的作用一个文件中各个参数的含义.供大家参考有不正确的地 ...

  9. C# 方法的调用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. c++, 派生类的构造函数和析构函数 , [ 以及operator=不能被继承 or Not的探讨]

    说明:文章中关于operator=实现的示例,从语法上是对的,但逻辑和习惯上都是错误的. 参见另一篇专门探究operator=的文章:<c++,operator=>http://www.c ...