轻松学习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 相关文章推荐
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 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
用PHP函数解决SQL injection
2006/10/09 PHP
PHP教程 预定义变量
2009/10/23 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
wxPython实现整点报时
2019/11/18 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python requests设置代理的方法步骤
2020/02/23 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
学校司机岗位职责
2013/11/14 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
国企干部对照检查材料
2014/08/22 职场文书
离婚协议书范文2014
2014/10/16 职场文书
企业宣传稿范文
2015/07/23 职场文书
董事长年会致辞
2015/07/29 职场文书
Python竟然能剪辑视频
2021/05/25 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Go语言基础map用法及示例详解
2021/11/17 Golang
JavaScript流程控制(分支)
2021/12/06 Javascript