JsTree 1.0 使用小结
jsTree 从 0.99版本到1.0版本之间语法和配置发生了很大的变化,且1.0版的文档也不是很详细,给开发带来了一些麻烦。以下是使用jsTree 1.0-rc3的一些小结:
版本:jsTree 1.0-rc3
主要实现功能:异步加载树、绑定节点的单击事件、配置节点图标、设置节点的开关状态、配置节点class、后台搜索树
1、异步加载树:如果节点下没有子节点,系统会异步加载子节点,如果节点下有子节点,则不会再次加载数据
$("#treeDiv").jstree({
"json_data": {
"ajax": {//不需要设置返回的类型
"url": '.....ashx',//加载数据的IHttpHandler 路径
"data": function(n){
//取数据时的参数,用{}括起来表示是javascript对象,当第一次加载或点击节点展开时,就是把参数传递到后台
//在此用户可以子定义要传递的参数
return {id:n.attr?n.attr("id"):0,...};
}
}
}
, "themes": { "theme": "default", "dots": true, "icons": true }
, "plugins": ["themes", "json_data", "ui"]
});
};
2、绑定节点的单击事件:由于未找到通过配置如何绑定,所以采用jQuery的delegate 方式在页面绑定,通过在后台设置href的值,然后前台解析
$("#treeDiv").delegate("a", "click", function() {
var href = eval("(" + $(this).attr("href") + ")");
});
3、基本配置:
{ "attr" : {"id":"标示 "};
,"data" :{"title": " 显示的标题 "
,"attr":{"href" :"可以自定义一些值,在UI 解析"
,"class": "jstree-search"//可以预先在后台给节点设置样式
}
,"icon":" 图标的地址 "
}
, "state" : "closed" 或"open"
,"children":[ {子节点1},{子节点2}]
}
4、后台搜索树:此功能没有用jsTree的自带功能,而是根据搜索条件自己重新加载数据,然后通过设置节点的class,标示匹配的节点样式