easyui treegrid使用

后台  ：

public class TreeModel
    {
        public string ID { get; set; }
        public string CHECKITEM_ID { get; set; }
        public string REPAIRE_NAME { get; set; }
        public string ITEM_NAME { get; set; }
        public string REPAIRE_ITEM_COMMENTS { get; set; }
        public string state { get; set; }
        public string parent { get; set; }
        public List<TreeModel> children { get; set; }
    }

    #region 加载根节点
        public string GetFixIndexJsonTree(int ID)
        {
            var header = _db.MECIM_REPAIRE_HEADER.Where(x => x.ID == ID).FirstOrDefault();
            if (header != null)
            {
                string result = string.Empty;
                List<TreeModel> trees = new List<TreeModel>();
                var List = _db.MECIM_REPAIRE_DETAILS.Where(x => x.PARENTID == "0" && x.BUYOFF_ID == header.BUYOFF_ID).OrderByDescending(x => x.MODIFIED_DATE).ToList();
                if (List != null && List.Count > 0)
                {
                    //获取顶级节点和所有子节点
                    foreach (var item in List)
                    {
                        //获取顶级节点
                        TreeModel Model = new TreeModel();
                        Model.ID = item.CHECKITEM_ID;
                        Model.ITEM_NAME = item.ITEM_NAME;
                        Model.REPAIRE_NAME = item.REPAIRE_NAME;
                        Model.state = _db.MECIM_REPAIRE_DETAILS.Where(x => x.PARENTID == item.CHECKITEM_ID).ToList().Count > 0 ? "closed" : "open";
                        Model.children = new List<TreeModel>();
                        //获取子节点
                        var treeInfo = getTree(item.CHECKITEM_ID);
                        if (treeInfo != null && treeInfo.Count > 0)
                        {
                            Model.children.AddRange(treeInfo);
                        }
                        trees.Add(Model);
                    }
                }
                result = Newtonsoft.Json.JsonConvert.SerializeObject(trees);
                return result;
            }
            else
            {
                return "";
            }


        }
        #endregion

        #region 递归获取树
        public List<TreeModel> getTree(string parentId)
        {
            //转换成Easyui数据
            List<TreeModel> modelList = new List<TreeModel>();
            var list = _db.MECIM_REPAIRE_DETAILS.Where(x => x.PARENTID == parentId).ToList();//根据父id，获取所有子节点数据
            if (list.Count > 0)
            {
                foreach (var item in list)
                {
                    TreeModel Model = new TreeModel();
                    Model.ID = item.CHECKITEM_ID;
                    Model.ITEM_NAME = item.ITEM_NAME;
                    Model.REPAIRE_NAME = item.REPAIRE_NAME;
                    Model.state = _db.MECIM_REPAIRE_DETAILS.Where(x => x.PARENTID == item.CHECKITEM_ID).ToList().Count > 0 ? "closed" : "open";
                    Model.children = new List<TreeModel>();
                    //递归子节点
                    var sonTreeInfo = getTree(item.CHECKITEM_ID);
                    if (sonTreeInfo != null)
                    {
                        Model.children.AddRange(sonTreeInfo);
                    }
                    modelList.Add(Model);
                }
            }
            return modelList;
        }
        #endregion

前端：

 function JsNewGuid() {
        var curguid = "";
        for (var i = 1; i <= 32; i++) {
            var id = Math.floor(Math.random() * 16.0).toString(16);
            curguid += id;
            if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
                curguid += "-";
        }
        return curguid;
    }

    function LoadFixIndex(ID) {
        $("#tbList").treegrid({
            url: "/FaultCode/GetFixIndexJsonTree?ID=" + ID,
            method: 'post',
            title: '维修项列表',
            idField: 'ID',
            treeField: 'REPAIRE_NAME',
            iconCls: 'ext-icon-application_side_tree',
            rownumbers: true,
            fitColumns: true,
            resizable: true,
            pagination: false,
            frozenColumns: [[
                { title: '节点名称', field: 'REPAIRE_NAME', width: 500 }
            ]],
            columns: [[
                {
                    title: '当前节点ID', field: 'CHECKITEM_ID', width: 100, hidden: true

                },
                {
                    title: '操作', field: 'parent', width: 230, formatter: function (v, d, i) {
                        return `<span style="color: blue; cursor: pointer;" onclick="ModifyFixIndex('${d.ID}','${d.parent}','${d.REPAIRE_NAME}')">修改</span>&nbsp;&nbsp;&nbsp;<span style="color: blue; cursor: pointer;" onclick="DeleteFixIndex('${d.ID}','${d.REPAIRE_NAME}')">删除</span>
&nbsp;&nbsp;&nbsp;<span style="color: blue; cursor: pointer;" onclick="AddNext('${d.ID}','${d.parent}','${d.REPAIRE_NAME}')">添加下级节点</span>`
                    }
                },
            ]],
            onBeforeExpand: function (node) {
              
            },
            toolbar: [{
                text: "新增根节点",
                iconCls: 'icon-add',
                handler: function () {
                    var NodeObj = {};
                    NodeObj.IsRoot = true;
                    NodeObj.ParentID = "0";
                    NodeObj.ID = "0";
                    NodeObj.IsEdit = false;//修改字段默认
                    NodeObj.Pre_REPAIRE_NAME = "";
                    NodeObj.REPAIRE_NAME = "";
                    NodeObj.Header_ID = $('#Modify_ID').val();//是否修改
                    NodeDialog(NodeObj);

                }
            }]

        });
    }

添加根节点

  $('#tbList').treegrid('append', {
                            parent: "0",
                            data: [{
                                ID: JsNewGuid(),
                                REPAIRE_NAME: Fix_Index_Current
                            }]
                        });

添加子节点

 $('#tbList').treegrid('append', {
                            parent: $('#dlg_ID').val(),
                            data: [{
                                ID: JsNewGuid(),
                                REPAIRE_NAME: Fix_Index_Current

                            }]
                        });

更新节点

 $('#tbList').treegrid('update', {
            id: ID,
            row: {
                REPAIRE_NAME: Modify_REPAIRE_NAME,
            }
        });

获取 treegrid

 let FixList = [];
        let roots = $('#tbList').treegrid('getRoots');
        $.each(roots, function (i, item) {
            FixList.push(item);
            var Childrens = $('#tbList').treegrid('getChildren', item.ID);
            if (Childrens.length > 0) {
                $.each(Childrens, function (i, child_item) {
                    FixList.push(child_item);
                });
            }
        });