layui tree drop-down box and tree data table

1 Tree drop-down box, create label

 //下拉框
<div class="layui-inline" style="width: 350px;">
                        <label class="layui-form-label">
                            所属栏目：
                        </label>
                        <div class="layui-input-inline">
                            <div class="layui-unselect layui-form-select downpanel">
                                <div class="layui-select-title">
                                    <span style="line-height: 38px;" class="layui-input layui-unselect" id="treeclass">请选择</span>
                                    <input type="hidden" name="arctypeId" id="arctypeId" value="@Model.arctypeId">
                                    <input type="hidden" id="CategoryName" name="CategoryName" value="@Model.CategoryName" />
                                    <i class="layui-edge"></i>
                                </div>
                                <dl class="layui-anim layui-anim-upbit">
                                    <dd>
                                        <ul id="classtree"></ul>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>


//数据表格
 <div class="xm">
                                <div class="xm-d2">
                                    <div class="xm-d2-hang2">
                                        <table id="arctype" class="layui-table layui-form" lay-filter="arctypeTable"></table>
                                    </div>
                                </div>
                            </div>

2 js

//下拉框，获取下拉数据
        getarctype();
        function getarctype() {
            //初始化栏目下拉
            $.ajax({
                type: 'post',
                async: false,
                url: '/Collect/Getdede_arctype',
                success: function (res) {
                    tableData = JSON.parse(res);
                    form.render();
                }
            })
        }
        //树形
        tree({
            elem: "#classtree",
            nodes: tableData.data,
            click: function (node) {
                var $select = $($(this)[0].elem).parents(".layui-form-select");
                $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='arctypeId']").val(node.id);
                $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='CategoryName']").val(node.name);
            }
        });

        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
        PageLoadSelect();
        function PageLoadSelect()
        {
            var arctypeId = $("#arctypeId").val();
            var typename = $("#CategoryName").val();
            if (arctypeId !=0 && typename != "") {
                $('#treeclass').html(typename);
            }

        }


//树形表格获取数据
     load();
            function load() {
                var loading = layer.load(2, {
                    content: '数据加载中...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'paddingTop': '40px',
                            'width': '100px',
                            'textAlign': 'center',
                            'backgroundPositionX': 'center'
                        });
                    }
                });
                treetable.render({
                    treeColIndex: 1,//树形图标显示在第几列
                    treeSpid: 0,//最上级的父级id
                    treeIdName: 'id',//id字段的名称
                    treePidName: 'reid',//pid字段的名称
                    treeDefaultClose: true,//是否默认折叠
                    treeLinkage: false,//父级展开时是否自动展开所有子级
                    treeShowName: 'name',//以树形式显示的字段
                    elem: '#arctype',
                    url: '../../WebApi/BidProjectType.ashx?action=GetList&type=0',
                    page: false,
                    cols: [[
                        { type: 'checkbox', fixed: 'left', width: '5%' }
                        , { field: 'name', title: '类型名称', width: '40%' }
                        , { field: 'id', title: 'ID', width: '5%' }
                        , { fixed: 'right', title: '操作', toolbar: '#Earctype', width: '35%' }
                    ]],
                    done: function () {
                        layer.close(loading);
                    }
                });
            }

3 js calls the background method, returns data, recursive data

//1接口方法
public string Getdede_arctype()
        {
            DataTable dt = SQLHelper.Getdede_arctypeList();
            int counts = dt.Rows.Count;
            IList<Dede_arctype_model> resultList = ModelConvertHelper<Dede_arctype_model>.ConvertToModel(dt);
            return JsonConvert.SerializeObject(new { code = 10000, msg = "获取数据成功", count = counts, data = fun1(resultList) });
        }

//2获取数据
 public static DataTable Getdede_arctypeList()
        {
            string sql = "select * from dede_arctype order by sortrank ";
            SqlParameter[] paras = new SqlParameter[] { };
            return ExecuteDataTable(sql);
        }

//3定义树形数据模型
 public List<TreeModel> fun1(IList<Dede_arctype_model> m)
        {
            Dede_arctype_model model = new Dede_arctype_model();
            Recursive r = new Recursive();
            var aa = r.ConversionList(m, "0", "id", "reid", "typename");
            return aa;
        }

//4递归方法
/// <summary>
        /// 公用递归(反射转换List)
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="allList">数据列表</param>
        /// <param name="parentId">父级ID</param>
        /// <param name="idField">id字段名称</param>
        /// <param name="parentIdField">父级id字段名称</param>
        /// <param name="nameField">name字段名称</param>
        /// <returns></returns>
        public List<TreeModel> ConversionList<T>(IList<T> allList, string parentId, string idField, string parentIdField, string nameField)
        {
            List<TreeModel> list = new List<TreeModel>();
            TreeModel model = null;
            foreach (var item in allList)
            {
                model = new TreeModel();
                
                foreach (PropertyInfo p in item.GetType().GetProperties())
                {
                    if (p.Name == idField)
                    {
                        model.id = p.GetValue(item).ToString();
                    }
                    if (p.Name == parentIdField)
                    {
                        model.reid = int.Parse(p.GetValue(item).ToString());
                    }
                    if (p.Name == nameField)
                    {
                        model.name = p.GetValue(item).ToString();
                    }
                }
                list.Add(model);
            }
            return OperationParentData(list, parentId);
        }