最近整理了一下树,使用jquery插件的方式重写。感觉比以前仅仅基于jquery写看的舒服多了。和以前一样还是借用treeview 的样式。
目前实现的功能和准备移植能的功能:
- 树的按层初始化(通过expanded属性可以控制节点的默认展开)
- 根节点的可控显示(通过初始化参数 isShowRoot控制)
- 支持单独为每一个节点设置展开、关闭和图标文件(属性fileIcon、folderIcon、openFolderIcon)
- 支持复选框(youiChecked属性控制)
- 树的点击动作(通过youiAction属性关联注册动作,事件 默认为click ,通过actionHandle属性控制,可以为dblclick)
- 动态读取(src属性,未完成,还在考虑那种方式比较好,只实现了简单的id和text的读取。)
- 拖放(属性draggable控制 依赖jquery 的ui组件 draggable,简单的实现,未完善)
- 树的搜索根据路径查找节点(支持未读取数据方式的查找展开,以前实现的速度比较慢,改动比较大,还在想用什么方法比较好)
action注册:
html 代码
- <li youiAction="showStatusBar" youiChecked="true" id="2703000000004"><a><span>2703000000004失业率(月度数据)span>a>li>
js 代码
- jQuery.actionFactory.register("showStatusBar",function(checked){
- alert(this.options.text);
- if(checked=="true"){
- alert("显示状态栏");
- }else{
- alert("隐藏状态栏");
- }
- });
2703000000004失业率(月度数据)
增加功能:
动态读取(xml数据集格式)
xml数据附加其他属性到树节点
节点定位openPath
js 代码
- $("#demoTree").load("template.html",function(){
- var templateTree = $(this).youiTree({
- treeMapObject:{
- mapId :'fileId',
- mapText :'fileName',
- mapPid :'parentFileId'
- },
- attributes:'filePath'
- });
- templateTree.openPath("t1/t11/t21");
- $(this).show();
- });
- 大小: 52.5 KB
分享到:
相关推荐
本文将深入探讨jQuery中的一个经典树形组件——jQuery Tree,帮助开发者更好地理解和应用这一工具。 jQuery Tree组件是基于流行的JavaScript库jQuery构建的,它为开发者提供了在网页上创建交互式、可操作的树状结构...
**jQuery实现的多级树结构详解** ...通过理解和掌握上述代码,你可以根据项目需求进行定制和扩展,创建出符合业务场景的多级树组件。无论是在文件管理、导航菜单还是其他层级关系的展示中,这个方法都能发挥重要作用。
在实际开发中,使用这个jQuery树形控件可能涉及以下步骤: 1. 引入jQuery库、`widgetTreeList.js`以及相应的CSS文件。 2. 在HTML中创建一个容器元素,作为树形控件的占位符。 3. 初始化树形控件,传递必要的数据源和...
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用。 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够...
2. **发送Ajax请求**:使用jQuery的`$.ajax`或`$.getJSON`方法向Struts2 action发起请求,获取目录树的JSON数据。 3. **处理服务器响应**:当Struts2 action处理完请求后,会返回JSON数据。在jQuery的success回调...
本文将深入探讨“jQuery树形展示服务端目录结构树组件”,这是一个利用jQuery实现的功能,用于在前端展示服务器的目录结构,使得用户可以直观地浏览和操作文件系统。 首先,我们要了解的核心知识点是jQuery ...
jQuery TreeGrid 是一款强大的树形表格组件,适用于需要展示层次化数据的场景。通过合理的配置和扩展,它可以为你的Web应用提供灵活、高效的表格管理功能。记得保持对组件的维护和更新,以便充分利用其新特性并避免...
同时,你还可以结合 jQuery Mobile 的其他组件,如对话框、表单等,构建更复杂的交互场景。 ### 文件结构分析 在提供的 `jqm-tree-master` 压缩包中,通常包含以下内容: 1. **CSS 文件**:用于定义树形插件的...
- jQuery UI的Treeview:基于jQuery的树组件。 - Angular UI Tree:适用于AngularJS应用的树组件。 - React Treebeard:适用于React应用的可定制化树组件。 - Vue.js的Vuetree:专门为Vue.js设计的树组件。 - ...
"jQuery文件树"是一种在网页上以树状结构展示文件目录和文件的交互式组件,常用于文件管理系统、文档库或者资源导航等场景。它利用jQuery库的强大功能,结合HTML、CSS和JavaScript实现动态的、可操作的文件目录展示...
基于c#、jquery开发的treeView目录树组件,最大的特点是可以将树节点的显示状态以ajax方式,保存到用户session里,即使页面刷新,树的显示状态也不会丢失,效率极佳。 扩展性也非常好,组件的html和css分离,很简洁...
**jQuery组件大全** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本篇文章中,我们将探讨一系列基于jQuery的组件,这些组件能够帮助开发者快速构建功能丰富的...
在IT领域,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本话题中,我们将深入探讨如何使用jQuery实现...通过实践和学习,你可以创建出既实用又美观的表格树组件。
**基于jQuery的树形插件**是前端开发中常用的一种组件,它可以帮助开发者在网页上构建出层次结构清晰、交互性强的目录或组织结构。在本文中,我们将深入探讨这种插件的工作原理、优势以及如何在项目中进行有效集成。...