如何使用mvc使用JSON数据创建带有复选框的树？

Question

我有JSON数据，JSON数据有父子关系。我想从中创建树结构。

在json返回值中我们发送两个对象，一个是DomainUserViews另一个是ModuleUserViews

但输出就像这条相同的线..

@model MedeilMVC_CLOUD.Models.UserView
<script type="text/javascript">
        function GetSelectedDomainValue(DomainID) {
            var adminID = jQuery('[id$=hdnAdminID]').val();
            var roleID = $("#RoleID").val();
            var domainID = $("#DomainID").val();
            //$("#Doamin").remove();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("BindDomainUserAccess")',
                dataType: 'json',
                data: { RoleID: roleID, DomainID: domainID, AdminID: adminID },
                success: function (data) {
                    $.each(data.DomainUserViews, function (index, item) {
                        $("#tree").append('<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.DomainID + "' name='DomainUserViews' class='my_chkBox' />" + " " + item.DomainName + '</a></li>');
                    });
                    $.each(data.ModuleUserViews, function (index, item) {
                        $(".dd-list").append('<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.ModuleID + "' name='ModuleUserViews' class='my_chkBox' />" + " " + item.ModuleName +  '</a></li>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve Sub Categories : ' + ex);
                }
            });
        }
</script>

<div class="col-lg-12" id="Doamin">
    <div class="row">
        <div class="col-md-6">
            <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
                <ul id="tree" class="dd-list">
                </ul>
            </div>
        </div>
    </div>
</div>

控制器：

public ActionResult BindDomainUserAccess(int RoleID, int DomainID, int AdminID)
        {
            if (AdminID > 0 && RoleID > 0 && DomainID > 0)
            {
                userType type = new userType();
                List<DomainView> DomainList = type.GetDomainNameModulesViews(DomainID);
                List<ViewRoleModules> ModuleList = type.GetRolesDomainModules(DomainID, RoleID);

                UserView objBind = new UserView();
                objBind.DomainUserViews = DomainList;
                objBind.ModuleUserViews = ModuleList;
                return Json(objBind, JsonRequestBehavior.AllowGet);
            }
            return View();
        }

但是在我的代码树视图结构中工作不正常..

  

我需要这样：

     

Doctor Doctor Add/View Doctor Doctor Doctor

如何合并到下面一行：

 $.each(data.DomainUserViews, function (index, item) {
                        $("#tree").append('<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.DomainID + "' name='DomainUserViews' class='my_chkBox' />" + " " + item.DomainName + '</a></li>');
                    });
                    $.each(data.ModuleUserViews, function (index, item) {
                        $(".dd-list").append('<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.ModuleID + "' name='ModuleUserViews' class='my_chkBox' />" + " " + item.ModuleName +  '</a></li>');
                    });

Answer 1

我试试这段代码它对我来说很好用

<script type="text/javascript">
    function GetSelectedDomainValue(DomainID) {
        var adminID = jQuery('[id$=hdnAdminID]').val();
        var roleID = $("#RoleID").val();
        var domainID = $("#DomainID").val();
        //$("#Doamin").remove();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("BindDomainUserAccess")',
            dataType: 'json',
            data: { RoleID: roleID, DomainID: domainID, AdminID: adminID },
            success: function (data) {
                var html = '';
                $.each(data.DomainUserViews, function (index, item) {

                    html += '<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.DomainID + "' name='DomainUserViews' class='my_chkBox' />" + " " + item.DomainName +'</a>'

                    $.each(data.ModuleUserViews, function (index, item) {
                        html += '<ul id="tree" class="dd-list"><li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.ModuleID + "' name='ModuleUserViews' class='my_chkBox' />" + " " + item.ModuleName + '</a></li></ul>';

                    });

                    html += '</li>'
                });

                if (html != '') {
                    html = '<ul id="tree" class="dd-list">' + html + '</ul>';
                }

                $('.dd-list').html(html);

            },
            error: function (ex) {
                alert('Failed to retrieve Sub Categories : ' + ex);
            }
        });
    }
</script>