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():显示、隐藏、激活树的图标

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

上一篇:Docker - 配置国内加速器加速镜像下载。


下一篇:HTML解析HtmlAgilityPack