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> <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); }); }); //会选或者取消功能结束
学习交流群:364976091