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

时间：2024-01-09 11:39:32

首先这两个文件是必须要引用的,还有就是引用 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()：显示、隐藏、激活树的图标

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

相关文章