轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)


Posted in Javascript onNovember 30, 2015

一、EasyUI创建基础树形网格
树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系。许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中。为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点。
本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览。

轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)

创建树形网格(TreeGrid)

<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
 url="data/treegrid_data.json"
 rownumbers="true"
 idField="id" treeField="name">
 <thead>
 <tr>
 <th field="name" width="160">Name</th>
 <th field="size" width="60" align="right">Size</th>
 <th field="date" width="100">Modified Date</th>
 </tr>
 </thead>
</table>

二、EasyUI创建复杂树形网格
树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共同的数据。

轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)

创建树形网格(TreeGrid)

<table title="Complex TreeGrid" class="easyui-treegrid" style="width:550px;height:250px"
 url="data/treegrid2_data.json"
 rownumbers="true" showFooter="true"
 idField="id" treeField="region">
 <thead frozen="true">
 <tr>
 <th field="region" width="150">Region</th>
 </tr>
 </thead>
 <thead>
 <tr>
 <th colspan="4">2009</th>
 <th colspan="4">2010</th>
 </tr>
 <tr>
 <th field="f1" width="50" align="right">1st qrt.</th>
 <th field="f2" width="50" align="right">2st qrt.</th>
 <th field="f3" width="50" align="right">3st qrt.</th>
 <th field="f4" width="50" align="right">4st qrt.</th>
 <th field="f5" width="50" align="right">1st qrt.</th>
 <th field="f6" width="50" align="right">2st qrt.</th>
 <th field="f7" width="50" align="right">3st qrt.</th>
 <th field="f8" width="50" align="right">4st qrt.</th>
 </tr>
 </thead>
</table>

正如您所看到的,树形网格(Treegrid)的使用和数据网格(Datagrid)一样。请使用 'frozen' 属性来定义冻结列,列的 'colspan' 和 'rowspan' 属性来定义多行表头。

以上就是分别为大家分享的EasyUI创建简单树形网络和复杂树形网络的方法,希望对大家的学习有所帮助。

想要学习更多内容请查看这篇文章:  《轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)》

Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js实现照片墙功能实例
Feb 05 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
vuex的使用和简易实现
Jan 07 Vue.js
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 #Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 #Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 #Javascript
浅析node连接数据库(express+mysql)
Nov 30 #Javascript
javascript编程异常处理实例小结
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 #Javascript
You might like
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
javascript 短路法代码精简
2009/08/20 Javascript
javascript天然的迭代器
2010/10/29 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
python构建深度神经网络(续)
2018/03/10 Python
Python中的延迟绑定原理详解
2019/10/11 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
python 实现图片裁剪小工具
2021/02/02 Python
优秀应届生推荐信
2013/11/09 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
行政人事岗位职责
2014/03/17 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
毕业生党员个人总结
2015/02/14 职场文书
工作保证书怎么写
2015/02/28 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Python音乐爬虫完美绕过反爬
2021/08/30 Python
HTTP中的Content-type详解
2022/01/18 HTML / CSS