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,标示匹配的节点样式
分享到:
相关推荐
**jstree1.0** 是一款基于JavaScript的开源库,专门用于创建、操作和展示树状数据结构。它在Web应用中广泛用于构建目录结构、文件系统浏览器、组织图表等。尽管标题提及的是"jstree1.0 demo",但实际提供的压缩包...
3. **文档(_docs)**:`_docs`文件夹可能包含了关于jsTree API、教程和使用方法的文档。这些文档对于开发者来说至关重要,它们帮助理解如何初始化树结构,添加、删除和操作节点,以及如何响应用户的交互事件。 4. ...
**jsTree.v.1.0中文文档** jsTree是一款基于JavaScript的开源库,主要用于创建、操作和展示HTML页面上的树状结构。它适用于构建复杂的交互式界面,如文件管理系统、组织架构图、导航菜单等。jsTree v.1.0是该库的一...
<script type="text/javascript" src="../../../resources/libs/jstree/1.0-rc3/jquery.jstree.js"> ``` 3. **Cookies 扩展库**: 用于处理与 Cookies 相关的功能。 ```html ...
"mtree1.0-checkbox-tableTree-带复选框树形控件"是一个专门设计用于Web应用的组件,它集成了复选框功能的树形表格控件。这个控件允许用户在树形结构中选择一个或多个节点,通过复选框进行操作,增加了交互性和数据...
**jsTree 1.0 中文文档** jsTree 是一个基于 JavaScript 的开源库,用于创建交互式的树形数据结构,通常用于网站的导航菜单、文件系统或者组织结构的展示。这个压缩包“jsTree 1.0 中文文档.zip”包含的是 jsTree ...
3. **使用**:在你的代码中,导入并使用`rc-config-loader`来加载配置: ```javascript const configLoader = require('rc-config-loader'); const config = configLoader.load('product'); // 'product'是产品...
mtree1.0是基于javascript的树形控件,主要实现了基本树形控件和树形表格功能,可以使用复选框(checkbox)。 代码简洁,调用方法简单,容易上手。 由于受dtree影响较深,里面的编程思想抹不去dtree的影子,我也希望我...
"jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本(v1.0)来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库,它允许开发者在网页上创建交互式的树视图,通常用于文件系统、组织...
**jstree-3.3.4:一个强大的jQuery树型结构插件** jstree是一个功能丰富的JavaScript库,专为构建交互式的树状数据结构而设计。在3.3.4版本中,它提供了多层树结构的支持,以及动态加载等功能,使其成为Web应用程序...
在原来的JSTree.js进行了优化,支持加载后台数据。性能和原来的一样,单个节点可加载千个数据。如果采用延迟加载,可以轻松加载上万条数据。 前后台交互采用的是JSONRPC。 希望你那个对大家有个帮助,希望大家来...
标题"Pencil-1.0-4-win32"所指的是Pencil软件的一个特定版本,1.0.4,这是专为Windows 32位操作系统设计的。Pencil是一款开源的图形设计工具,主要用于创建线框图、故事板和原型设计。它支持手绘风格,使用户能够...
**jsTree 1.0 开发技术指南** jsTree 是一款基于 jQuery 的开源库,用于在Web应用中创建交互式的树形结构。随着版本更新至 pre1.0,jsTree 的使用方式、函数名和整体结构都发生了显著变化。本文将深入探讨如何使用 ...
**jsTree:一个强大的JavaScript树视图库** jsTree是一个基于JavaScript的开源库,用于创建交互式的树形结构。它支持HTML、JSON等多种数据格式,适用于构建目录结构、文件系统或者复杂的组织架构。jsTree提供了丰富...
在“jsTree例子3-ui”中,我们将深入探讨jsTree的UI插件及其功能。 ### 1. jsTree基本概念 jsTree 提供了一个易于使用的API,允许开发者通过JSON数据源或者HTML元素来创建树结构。它支持多种操作,包括节点的添加...
colResizable.js 提供了从1.0到1.6的多个版本,以满足不同开发环境和需求。 1. **基本功能** - **列宽度拖动**:colResizable.js 的核心功能是让用户能够通过鼠标直接拖动表格的列边框来改变列宽。这种交互方式...
Jeecg-Boot开源框架是基于Java开发的一款高效、便捷的企业级开发框架,它结合了Spring Boot、MyBatis Plus、Vue.js等技术栈,旨在简化企业级应用的开发流程,提高开发效率。1.0至1.1版本的源码升级主要涵盖了框架的...
《jstree 3.3.4:构建优雅的多层树形结构》 jstree 是一个基于 jQuery 的开源库,专为构建交互式的树形数据结构而设计。在3.3.4这个版本中,它提供了丰富的功能和优化,使得在网页应用中创建、操作和展示树型结构变...
js css images; templates:保存所有的模板页面;(Spring Boot默认jar包使用嵌入式的Tomcat,默认不支持JSP页 面);可以使用模板引擎(freemarker、thymeleaf); application.properties:Spring Boot应用的...
1.0 同构 React + Flux 电影数据库示例 完整的应用示例,包括在服务器端使用 koa 进行用户身份验证,以及在前端使用 React/Flux(Alt)。 还使用 koa-mongo-rest 生成 REST API,并使用 restful.js 来使用它们。 使用...