jsTree 的简单用法--异步加载和刷新数据

首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了：

<link href="/css/plugins/jsTree/style.min.css" rel="stylesheet" />

<script src="/js/plugins/jsTree/jstree.min.js"></script>

 

                //这个是关键，如果不清空实例，jstree不会重新生成
                $('#jstree1').data('jstree', false).empty();
                $('#jstree1').jstree({
                    'core': {
                        'data': {
                            'url': '/API/ajax_nodes.ashx',  //异步加载jstree html格式的数据地址
                            'data': function (node) {
                                return { 'id': node.id };
                            }
                        }
                    }
                }).bind('select_node.jstree', function (event, data) {  //绑定的点击事件
                    menuid = data.node.data.menuid + ""; // 获取我自己定义的属性menuid，可以根据自己实际情况定义
                });
                //隐藏图标，因为觉得太难看了，我没有使用jstree 样式的插件 “plugs” ，因为异步刷新数据之后就没有效果了，果断放弃
                $('#jstree1').jstree().hide_icons();
　　　　　　　　　 //还可以根据需要绑定点击事件
                //.bind('click.jstree', function (event, data) {
                //    alert($(event.target).parents('li').attr('data-menuid'));
                //});          

后台获取到的代码格式如下
  <ul>
        <li data-menuid='3e544d7a-d850-4785-9648-feafc4698a3b'>系统管理<ul>
            <li data-menuid='545d2450-4dac-4377-afbe-d9aa451f795f' data-jstree='{"type":"html"}'>角色管理
                <ul>
                    <li data-menuid='810a72f0-55d3-468f-8653-10d1b06a4234' data-jstree='{"type":"html"}'>角色 -  分配权限页
                    <ul></ul>
                    </li>
                    <li data-menuid='02b48102-4e8a-44fb-84a0-7a8c8535676a' data-jstree='{"type":"html"}'>角色 -  详细信息页
                    <ul></ul>
                    </li>
                </ul>
            </li>
            <li data-menuid='e620450b-6d17-4192-bee0-66fbd114e82a' data-jstree='{"type":"html"}'>部门管理123211
                <ul></ul>
            </li>
        </ul>
        </li>
    </ul>

 

 jsTree还提供几个api来设置主题的行为

 

.set_theme(name, url)：设置主题

.get_theme()：取得当前激活即使用的主题

.show_dots(),.hide_dots(),.toggle_dots()：显示、隐藏、激活树边框的点

.show_icons(),.hide_icons(),.toggle_icons()：显示、隐藏、激活树的图标

在项目中使用的时候，就可以直接把以上代码封装成一个方法，加载和刷新数据的时候可以直接调用就行。