JsTree的使用demo

拿项目中的一个例子直接搬过来，纯属为了下次使用方便。详细使用方法可以查看官网或者一些中文api网上都有。

https://www.jstree.com/api/ 一些方法属性api查询地址。

功能：点击树节点。表格显示点击节点下面的子节点内容

需要引入3个脚本文件:
1. jQuery (>= 1.9.1)
2. 一个jstree主题 (默认只有一个主题)
3. jstree资源文件

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>

<div class="portlet-body">
                        <div id="tree" class="tree-demo"></div>
                    </div> 
            <div class="col-md-9">
                <div id="MenuTable"></div>
            </div>

首先ajax请求后台数据

var _$MenuTable = $('#MenuTable');
        var _menuService = abp.services.app.menu;

        var _$MenusTree = $('#tree');
        var _TreeNodeName = "根节点";
        var _parentId = 0;
function loadtree() {
            var treedata = [{ "id": 0, "parent": "#", "text": _TreeNodeName, state: { opened: true } }];     
            $.ajax({        
                type: "POST",
                //dataType : 'json',  
                url: abp.appPath + 'api/services/app/menu/GetTreeMenusAsync',
                error: function (data) {
                    alert("出错了！！:" + data);
                },
                success: function (data) {
                    // alert("success:" + data);  
                    var item = data.result.items;
                    for (var i = 0; i < item.length; i++) {
                        var parentid = item[i].parentId == null ? 0 : item[i].parentId;
                        var node = { "id": item[i].id, "parent": parentid, "text": item[i].name };
                        treedata.push(node);
                    }  
                    GetJsTree(treedata);//使用JsTree插件
                }     
            });
        }  
 function GetJsTree(treedata) {
            _$MenusTree.data('jstree', false).empty();
            _$MenusTree.jstree({
                'core': {
                    'data': treedata,
                    "themes": {
                        "dots": true,               // no connecting dots between dots
                        "responsive": false        //无响应
                    },
                    'multiple': false,              //设置其为没有多选
                    'check_callback': true,          //设置其true.可以进行文本的修改。    
                },
                "plugins": [ //插件  
                    "search", //允许插件搜索  
                    //"sort", //排序插件  
                    "state", //状态插件  
                    //"types", //类型插件  
                    "unique", //唯一插件  
                    "wholerow" //整行插件  
                ],
            }).bind("activate_node.jstree", function (obj, e) {//点击节点事件，对应的表格显示节点下面的子节点
                // 处理代码
                // 获取当前节点
                _parentId = e.node.id;
                getMenus(false);
                e.node.state.opened = true;
            });
        }
 function getMenus(isLoad = true) {     
            _$MenuTable.jtable('load', { ParentID: _parentId });//将点击的节点传到后台的查询方法，作为父节点查询出子节点
            if (isLoad) {
                loadtree();//刷新树
            }
        }

猜你喜欢