Jquery 中each循环嵌套的使用示例教程
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、最后要实现的效果如下:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。