jsTree的基本使用方法以及按需装载子节点

本文主要是介绍jsTree的基本使用方法以及按需装载子节点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文主要内容：

一、jsTree的基本使用方法；

二、按需装载子节点，即每次展开某节点时，才去服务器装载其子节点。

jsTree是基于jQuery的一个树形插件，该项目主页：http://www.jstree.com/

本文使用版本为   jsTree - v3.3.2 - 2016-08-15 - (MIT)，主要参考文档在下载包里的documentation.html文件。

jsTree的基本使用方法：

一、 在页面导入必要的库文件

基本的使用只需要jquery.js和jquery.tree.js两个文件，都在jsTree的下载包里，不同版本的jsTree需要导入的库文件可能不同。

  <script type="text/javascript" src="/Content/javascript/jsTree/jquery.js"></script>

  <script type="text/javascript"   src="/Content/javascript/jsTree/jquery.tree.js"></script>

二、前端Html代码

      <div   id="myTree"></div>   

三、 前端JS代码

<script type="text/javascript">

   (function () {
       $("#myTree").jstree({
                    'core': {
                        data: {
                            'url': '/mpa/PrivateFolder/GetFolder',
                            'data': function (node) {
                                return { 'id': node.id };
                            },
                            "success": function (data) {
                                
                                folderTree.setUnitCount(data.length);
                                return data;
                            }
                        },
                        multiple: false,
                        check_callback: function (operation, node, node_parent, node_position, more) {
                            return true;
                        }
                    },
                    types: {
                        "default": {
                            "icon": "fa fa-folder tree-item-icon-color icon-lg"
                        },
                        "file": {
                            "icon": "fa fa-file tree-item-icon-color icon-lg"
                        }
                    },
                    plugins: [
                        'types',
                        'wholerow',
                          'json_data'
                    ]
                }).on('changed.jstree', function (e, data) {
                    if (data.selected.length != 1) {
                        folderTree.selectedFolder.set(null);
                    } else {
                        var selectedNode = data.instance.get_node(data.selected[0]);
                       
                    }
                });
})();

</script>

四、后台   controller 中的代码

  public async Task<JsonResult> GetFolder(string id)
        {
            GetPrivateFoldersInput input = new GetPrivateFoldersInput();
            if (id == "#")
            {
                input.ParentId = null;
            }
            else
            {
                input.ParentId = long.Parse(id);
            }
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            var list = await _folderAppService.GetPrivateFolders(input);
            var items = list.Items.Select(o => new TreeNode()
            {
                id = o.Id.ToString(),
                parent = o.ParentId == null ? "#" : o.ParentId.ToString(),
                text = "<span title=\"" + o.DisplayName + "\"   data-ou-id=\"" + o.Id.ToString() + "\">" + o.DisplayName + " (<span class=\"ou-text-member-count\">" + o.FileCount + "</span>) </span>",
                children = o.ChildCount > 0 ? true : false
            }).ToList();

            result.Data = items;
         
            return result;
        }

五、JSTree 的节点发生变化后刷新节点

   $("#myTree").jstree('refresh');

这篇关于jsTree的基本使用方法以及按需装载子节点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---