jstree树形控件显示灰色

最新推荐文章于 2021-10-21 11:47:48 发布

转载最新推荐文章于 2021-10-21 11:47:48 发布 · 2.6k 阅读

本文详细解析了如何使用JSTree插件进行文件管理系统的构建，包括HTML/JSP页面的初始化、图标更改、JSON数据的正确格式、AJAX调用、节点选择与折叠等功能，并提供了常见错误排查技巧。

1. HTML/JSP must start with：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
otherwise cannot expand/collapse, and icon will not work.

2. to change icon
after the "types" is defined and is included in plugins.
for JSON data, must add attr{"rel" : "folder" }
for HTML data, must add

3. 如果出现javascript错误，检查json定义是否有错，最后一项不能加逗号，中间项必须加逗号。

ajax, select_node，toggle_node 用法
$("#ManageMenu").jstree({
"plugins" : [ "themes", "json_data", "types", "ui" ],
"core" : {
"animation" : false
},
"themes": {
"theme": "classic",
"dots": true,
"icons": true,
"url": "js/themes/classic/style.css"
},
"json_data" : {
"ajax" : {
"async" : false,
"cache" : false,
"url" : "PopeManageAction.do?method=getUserMenuJson"
}
}
})
.bind("select_node.jstree", function (e, data) {
var href = data.rslt.obj.find("a").attr('href');
if (href == '#')
$("#ManageMenu").jstree("toggle_node", data.rslt.obj);
else
document.getElementByIdx_x('managesys').src=href;
});