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是该库的一...
"jqTouch-1.0-b4-rc"是这个库的一个版本,它代表了“第1.0版的第四次beta测试,候选发布版本”。这个版本通常包含了开发者在正式版发布前对功能的最后调整和优化,使得用户能够体验到更加稳定和功能完备的库。 ...
<script type="text/javascript" src="../../../resources/libs/jstree/1.0-rc3/jquery.jstree.js"> ``` 3. **Cookies 扩展库**: 用于处理与 Cookies 相关的功能。 ```html ...
"mtree1.0-checkbox-tableTree-带复选框树形控件"是一个专门设计用于Web应用的组件,它集成了复选框功能的树形表格控件。这个控件允许用户在树形结构中选择一个或多个节点,通过复选框进行操作,增加了交互性和数据...
3. **使用**:在你的代码中,导入并使用`rc-config-loader`来加载配置: ```javascript const configLoader = require('rc-config-loader'); const config = configLoader.load('product'); // 'product'是产品...
例如,`jstree_pre1.0_fix_1`可能是一个在正式发布1.0之前的小版本更新,主要目的是修复了一些预1.0版本中发现的问题,确保正式版的稳定性和兼容性。 在实际应用中,你可以通过以下步骤集成`jstree`到项目中: 1. ...
"jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本(v1.0)来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库,它允许开发者在网页上创建交互式的树视图,通常用于文件系统、组织...
mtree1.0是基于javascript的树形控件,主要实现了基本树形控件和树形表格功能,可以使用复选框(checkbox)。 代码简洁,调用方法简单,容易上手。 由于受dtree影响较深,里面的编程思想抹不去dtree的影子,我也希望我...
标题"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提供了丰富...
colResizable.js 提供了从1.0到1.6的多个版本,以满足不同开发环境和需求。 1. **基本功能** - **列宽度拖动**:colResizable.js 的核心功能是让用户能够通过鼠标直接拖动表格的列边框来改变列宽。这种交互方式...
js css images; templates:保存所有的模板页面;(Spring Boot默认jar包使用嵌入式的Tomcat,默认不支持JSP页 面);可以使用模板引擎(freemarker、thymeleaf); application.properties:Spring Boot应用的...
**jsTree v.1.0中文文档概述** jsTree 是一个用JavaScript编写的开源库,主要用于在网页上创建可交互的树形结构。这个库在v.1.0版本时,已经成为开发人员构建多层级数据展示和管理界面的常用工具。尽管这个中文文档...
jquery.qtip-1.0.0-rc3.js 弹出层
`jstree v.pre1.0`是该插件的一个版本,它可能包含了该插件的一些预发布特性或者改进,以满足开发者对功能和性能的需求。 **核心功能** 1. **树型展示**: `jstree`能够将HTML元素或JSON数据转换为可交互的树形结构...
Vue.js 2.0的表格(带有树网格)组件。 (其样式扩展了 ) 例 安装 使用npm: npm i vue-table-with-tree-grid -S 或使用纱线: yarn add vue-table-with-tree-grid 用法 import Vue from 'vue' import ZkTable ...
"vijun-1.0-release.zip" 是一个压缩包文件,其中包含了“有源码,有纯LW”的内容,这通常意味着它是一个软件项目或者编程教学资源,供学习者参考使用。从标签“源码”我们可以推断,这个压缩包包含了一个或多个软件...