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

【问题标题】：How to create Tree with checkboxes using JSON data using mvc?如何使用 mvc 使用 JSON 数据创建带有复选框的树？
【发布时间】：2018-06-17 09:06:39
【问题描述】：

我有 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>');
                    });

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案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>

【讨论】：