.net mvc は、layui ツリー コンポーネントのデータ転送を実装します。

1 つ目はクラスを定義することです。ここにはクラスの継承を使用した 2 つのテーブルがあります。

これは最初のクラスです (テーブルを 1 つだけ使用する場合は、このクラスのように記述してください)

public class company_rubbish_manage_type_link_ext: company_rubbish_manage_type
    {
        public int RubbishTypeId { get; set; }
        public int CompanyId { get; set; }
        public string user_name { get; set; }


        //这个是必须的,用来记录子级
        public List<company_rubbish_manage_type_link_ext> children = new List<company_rubbish_manage_type_link_ext>();
    }

二等

public class company_rubbish_manage_type
    {
        public int Id { get; set; }
        public string Name { get; set; }
        //这个title一定要,这是layui显示树形组件下拉列表的标题值
        public string title { get; set; }
        public string Code { get; set; }
        public int Type { get; set; }
        public int Grade { get; set; }
        public int ParentId { get; set; }
        public int OperatorId { get; set; }
        public DateTime CreateTime { get; set; }

        

    }

次に再帰の定義方法ですが、目的の効果が得られる以下の2つの書き方を紹介します。

まず、データベースからチェックアウトしたデータリストは以下の通りです。親ID(parentId)と自身のIdが存在する必要があり、ここでparentIdは最大の親である0となっています。

 最初の方法は再帰を使用せず、比較的単純です

public JsonResult GetCompanyRubbishManageTypeByLinkId()
        {
            //这个是你从数据库查出来的数据列表的方法
            List<company_rubbish_manage_type_link_ext> list = _companyRubbishManageTypeLinkServices.GetExistList(comparam).InnerList;


            //调用方法分级显示
            GenerateTreeTableData(ref list);
            //传数据到页面
            return Json(list, JsonRequestBehavior.AllowGet);
        }

//这个是分级方法
private void GenerateTreeTableData(ref List<company_rubbish_manage_type_link_ext> orgs)
        {
            foreach (var item in orgs)
            {
                item.title = item.Name;
                item.children = orgs.Where(x => x.ParentId == item.Id).ToList();
                foreach (var child in item.children)
                {
                    child.title = child.Name;
                    child.children = orgs.Where(x => x.ParentId == child.Id).ToList();
                }
            }
            orgs = orgs.Where(x => x.ParentId == 0).ToList();
        }

このメソッドは、C# のキーワードの 1 つである ref キーワードを使用します。これは、パラメーターを参照渡しする、つまり変数のメモリ アドレスを渡すために使用されます。これは、メソッド内で変数に加えられた変更がメソッド外の変数の値に影響を与えることを意味します。

注: ref キーワードの使用にはいくつかの制限と注意事項があります。たとえば、メソッド内の変数の変更が正当であることを保証する必要があります。そうでないと、デバッグが難しい問題が発生する可能性があります。したがって、ref キーワードを使用する場合は注意が必要です。

2 番目の書き方 (この書き方は再帰を使用します)

クラス定義は上記と一致しています

public JsonResult GetCompanyRubbishManageTypeByLinkId()
        {
            //这个是你从数据库查出来的数据列表的方法
            List<company_rubbish_manage_type_link_ext> list = _companyRubbishManageTypeLinkServices.GetExistList(comparam).InnerList;


            //调用递归方法分级显示
            List<company_rubbish_manage_type_link_ext> list1 = ParseTree(list,0);
            //传数据到页面
            return Json(list1, JsonRequestBehavior.AllowGet);
        }


        //递归方法

public List<company_rubbish_manage_type_link_ext> ParseTree(List<company_rubbish_manage_type_link_ext> crmtList, int parentId)
        {
            //找当前层级下级（如果ParentId==0 就是第一级）
            List<company_rubbish_manage_type_link_ext> Result = new List<company_rubbish_manage_type_link_ext>();
            company_rubbish_manage_type_link_ext treeModel = null;
            for (int i = 0; i < crmtList.Count(); i++)
            {
                if (crmtList[i].ParentId == parentId)
                {
                    treeModel = new company_rubbish_manage_type_link_ext();
                    treeModel.Id = crmtList[i].Id;
                    treeModel.title = crmtList[i].Name;
                    treeModel.Code = crmtList[i].Code;
                    treeModel.CompanyId = crmtList[i].CompanyId;
                    treeModel.Grade = crmtList[i].Grade;
                    treeModel.Name = crmtList[i].Name;
                    treeModel.OperatorId = crmtList[i].OperatorId;
                    treeModel.ParentId = crmtList[i].ParentId;
                    treeModel.RubbishTypeId = crmtList[i].RubbishTypeId;
                    treeModel.Type = crmtList[i].Type;
                    treeModel.user_name = crmtList[i].user_name;

                    List<company_rubbish_manage_type_link_ext> childList = ParseTree(crmtList, crmtList[i].Id);
                    if (childList.Count != 0)
                    {
                        treeModel.children.AddRange(childList);
                    }
                    Result.Add(treeModel);
                }
            }
            return Result;
        }

ページから渡されるデータは次のとおりです

 ページ効果は次のとおりです（スタイルがちょっと間違っているのかわかりませんが（笑）、でも大きな問題ではありません）

最後はフロントエンドです

//定义个div作为layui树形组件的显示容器
<div id="test12" class="demo-tree-more">

//记得引用layui的样式和js
<link href="~/content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layui/layui.js"></script>\

//然后是js部分
<script>
        layui.use(['tree', 'util'], function () {
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util

            var companyId = Number($("#id").val());
            if (companyId == "NaN") {
                companyId = Number($("#id").val());
            }
            $.ajax({
                type: 'get',
                //这个是你调用接口的地址,companyid是我传的参数
                url: '/System/GetCompanyRubbishManageTypeByLinkId,
                data: {},
                success: function (dataInfo) {
                    //dataInfo就是上面给你们看的传过来的数据
                    tree.render({
                        elem: '#test12'
                        //绑定数据源
                        , data: dataInfo
                        , showCheckbox: true  //是否显示复选框
                        , id: 'demoId1'
                        , isJump: true //是否允许点击节点时弹出新窗口跳转
                        , click: function (obj) {
                            var data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                        }
                    });
                }, error: function () {
                    toastr.error("请求错误");
                }

            });    

        });
    </script>

最後に、layui が親密に引用したアドレスも教えました。私の Gitee にアクセスして取得してください。アドレスは以下です。

https://gitee.com/guo-ruiwb/layui-file-reference

さて、これを見ると運命の人だと考えられます。参考になれば幸いです（ああ、入力するのは本当に疲れます）