ztree备忘笔记，读取数据（并解决了如何控制修改和移出按钮是否显示）

服务端 首先需要一个zTree类

  public class TreeNodes
    {
        public Guid id { get; set; }
        public Guid? pId { get; set; }
        public string name { get; set; } = string.Empty;
        public bool open { get; set; } = false;
        public bool isParent { get; set; } = true;
        public bool isShowRemoveBtn { get; set; } = true;
        public bool isShowRenameBtn { get; set; } = true;
    }

然后返回根目录以及其下一级的目录

     [HttpPost]
        public ActionResult GetInitCatalog()
        {
            List<TreeNodes> nodeList = new List<TreeNodes>();

            GeosocEntities context = new GeosocEntities();
            var root = context.T_Resource_Catalog.First(i => i.RC_ParentGuid == null);
            TreeNodes rootNode = new TreeNodes();
            rootNode.id = root.RC_Guid;
            rootNode.name = root.RC_Name;
            rootNode.open = true;
            rootNode.isShowRemoveBtn = false;
            rootNode.isShowRenameBtn = false;
            nodeList.Add(rootNode);

            var nodes = context.T_Resource_Catalog.Where(i => i.RC_ParentGuid == root.RC_Guid);
            foreach(var item in nodes)
            {
                TreeNodes node = new TreeNodes();
                node.id = item.RC_Guid;
                node.pId = item.RC_ParentGuid;
                node.name = item.RC_Name;

                nodeList.Add(node);
            }

            return Json(nodeList);
        }

JS端

var ResourceCatalog = function () {
    this.Init();
};
ResourceCatalog.prototype = {
    Init: function () {
        $.post('/Admin/GetInitCatalog', function (data) {
            if (data) {
                var setting = {
                    edit: {
                        enable: true,
                        showRemoveBtn: showRemoveBtn,
                        showRenameBtn: showRenameBtn
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        beforeRemove: beforeRemove,
                        beforeRename: beforeRename,
                        onRename: onRename,

                    }
                };

                function showRemoveBtn(treeId, treeNode) {
                    return treeNode.isShowRemoveBtn;
                }

                function showRenameBtn(treeId, treeNode) {
                    return treeNode.isShowRenameBtn;
                }

                function beforeRemove(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("TreeResourceCatalog");
                    zTree.selectNode(treeNode);
                    return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
                }

                function beforeRename(treeId, treeNode, newName, isCancel) {
                    if (newName.length == 0) {
                        setTimeout(function () {
                            var zTree = $.fn.zTree.getZTreeObj("TreeResourceCatalog");
                            zTree.cancelEditName();
                            alert("节点名称不能为空.");
                        }, 0);
                        return false;
                    }
                    return true;
                }

                function onRename(e, treeId, treeNode, isCancel) {
                    $.post('/Admin/UpdateCatalogName', { gId: treeNode.id, cName: treeNode.name }, function (res) {
                        if (!res.status) {
                            alert(res.ErrorMessage);
                        }
                    })
                }

                $(document).ready(function () {
                    $.fn.zTree.init($("#TreeResourceCatalog"), setting, data);
                });
                
            }
        })
    }
}

这边引入了Metro样式

是不是棒棒哒