码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 中each循环嵌套的使用示例教程

时间:2015-01-07 18:23:13      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

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、最后要实现的效果如下:

技术分享

Jquery 中each循环嵌套的使用示例教程

标签:

原文地址:http://www.cnblogs.com/firstcsharp/p/4208956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!