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,标示匹配的节点样式
分享到:
相关推荐
jsTree官方文档,demo的显示及方法的说明,不过1.0暂时还没有中文的api
jsTree.v.1.0rc2 正在学习中
jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版
mtree1.0-checkbox-tableTree-带复选框树形控件,带复选框 支持表格转换为树形表格,使用简单。希望对各位有用,同时也望各位朋友提供更多更好的改进建议!
rc-config-loader: 从 .{product}rc.{json,yml,js} 文件加载配置
JS计算器 v1.0-源码.zip
jsTree 1.0 中文文档,简单翻译的,凑合看,我只是负责搬运。
mtree1.0是基于javascript的树形控件,主要实现了基本树形控件和树形表格功能,可以使用复选框(checkbox)。 代码简洁,调用方法简单,容易上手。 由于受dtree影响较深,里面的编程思想抹不去dtree的影子,我也希望我...
colResizable.js 全版本 1.0-1.6 table列可拖动宽度插件 有demo
在原来的JSTree.js进行了优化,支持加载后台数据。性能和原来的一样,单个节点可加载千个数据。如果采用延迟加载,可以轻松加载上万条数据。 前后台交互采用的是JSONRPC。 希望你那个对大家有个帮助,希望大家来...
js css images; templates:保存所有的模板页面;(Spring Boot默认jar包使用嵌入式的Tomcat,默认不支持JSP页 面);可以使用模板引擎(freemarker、thymeleaf); application.properties:Spring Boot应用的...
让文本仿歌词效果的js类 v1.0-源码.zip
vakata-jstree-3.0.3-0-gcc08849-1
1.0 同构 React + Flux 电影数据库示例 完整的应用示例,包括在服务器端使用 koa 进行用户身份验证,以及在前端使用 React/Flux(Alt)。 还使用 koa-mongo-rest 生成 REST API,并使用 restful.js 来使用它们。 使用...
jquery.qtip-1.0.0-rc3.js 弹出层
本人根据官网英文文档,整理出来的详细的文档,希望大家共同完善此文档谢谢合作
这是一个简单加载jsTree树的实例,里面有简单的说明,容易理解,对初学者有用
dropList v1.0-无限级联动下拉框JavaScript类 1、无限制多级联动 2、支持选择状态保存,使用Cookie 3、支持初始值选定 4、同一页面中多个应用不会相互影响 包含一个省市县三级联动的例子
JS Tree CSS --asp,aspx..
vakata-jstree-651d32c.zip vakata-jstree-651d32c.zip vakata-jstree-651d32c.zip