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

Posted 2023-05-08

【中文标题】如何使用 mvc 使用 JSON 数据创建带有复选框的树？

【英文标题】：How to create Tree with checkboxes using JSON data using mvc?

【发布时间】：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>');
                    );

【参考方案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>