jstree使用示例代码

Posted 那一缕阳光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jstree使用示例代码相关的知识,希望对你有一定的参考价值。

首先定义一个展示树的div
<div id="twDept" class="tree-demo"></div>
 
  //初始化树
        function initTree() {
            $(‘#twDept‘).jstree({
                "core": {
                    "themes": {
                        "responsive"false
                    },
                    ‘check_callback‘true,
                    ‘data‘function (obj, callback) {
                        report.DataGet(‘查询1级部门的接口路径‘nullfunction (data) {
                            if (data) {
                                callback.call(this, data);
                            }
                        }, null‘json‘);
                    }
                },
                "types": {
                    "default": {
                        "icon""fa fa-folder icon-state-warning icon-lg"
                    },
                    "file": {
                        "icon""fa fa-file icon-state-warning icon-lg"
                    }
                },
                "plugins": ["types""checkbox"],
                "checkbox": {
                    "keep_selected_style"false,//是否默认选中
                    "three_state"false//父子级别级联选择
                }
            });
            $(‘#twDept‘).on("loaded.jstree"function (e, data) {
                var root = e.target.firstChild.firstChild;
                data.instance.open_node(root);
                _inst = data.instance;
            });
            $(‘#twDept‘).on("open_node.jstree"function (e, data) {
                var inst = data.instance;
                var selectedNode = inst.get_node(data.node);
                var firChild = $(‘#twDept‘).jstree("get_node", inst.get_children_dom(selectedNode)[0].id);
                if (firChild.text == "" && selectedNode.id != e.target.firstChild.firstChild.id) {
                    selectedNode.children = [];
                    report.DataGet(‘查询子节点的接口路径‘?code=‘ + selectedNode.li_attr.treeDeptCode, nullfunction (data) {
                        if (data) {
                            $.each(data, function (i, item) {
                                inst.create_node(selectedNode, item, "last");
                            })
                        }
                    }, null‘json‘);
                }
            });
            //end new
        }

以上是关于jstree使用示例代码的主要内容,如果未能解决你的问题,请参考以下文章

延迟加载 JSTREE

为Mvc添加新的@abp/jstree标准库.

jsTree ajax参数甚至不发送请求

jstree判断是不是有下级节点

jsTree树形菜单分类

单击jstree更改图标