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

更新时间：2022年05月06日 10:30:45 投稿：lijiao

这篇文章主要帮助大家轻松学习jQuery插件EasyUI，并且教大家如何利用EasyUI创建树形网络，感兴趣的小伙伴们可以参考一下

一、EasyUI创建基础树形网格

树形网格（TreeGrid）组件从数据网格（DataGrid）继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格（DataGrid），可以用在树形网格（TreeGrid）中。为了使用树形网格（TreeGrid），用户必须定义 'treeField' 属性，指明哪个字段作为树节点。

本文将向您展示如何使用树形网格（TreeGrid）组件设置一个文件夹浏览。

创建树形网格（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）可以展示有限空间上带有多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中，以便组织共同的数据。

创建树形网格（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）》

您可能感兴趣的文章:

jQuery中Dom的基本操作小结
本篇文章主要是对jQuery中Dom的基本操作进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
jquery插件实现轮播图效果
这篇文章主要为大家详细介绍了jquery插件实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效，但一直没有用，这几天研究了一下，并应用于实际中，对网站SEO方面没有什么帮助，不过可以节省一些流量，对于大网站来说显的尤为重要，至于节省了多少流量我无从统计。
2011-03-03
jQuery EasyUI 中文API Layout(Tabs)
发布jQuery EasyUI 中文API—Layout(Tabs)总结，需要的朋友可以参考下。
2010-04-04
jQuery ui1.7 dialog只能弹出一次问题
之前对于删除操作，一直使用的是头儿写的通用的“确认删除”的方法
2009-08-08
jquery选择器需要注意的问题
本文讲述的是jquery选择器结果是数组时需要主要的一个问题，并详细分析了产生此问题的原因，这里记录下来，小伙伴们在项目中使用的时候要注意一下。
2014-11-11
20款非常优秀的 jQuery 工具提示插件推荐
工具提示（Tooltip）在网站中的一个小功能，但却有很重要的作用，常用于显示一些温馨的提示信息。如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象
2012-07-07
jquery实现滑动楼梯效果
这篇文章主要为大家详细介绍了jquery实现滑动楼梯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
使用jQuery的easydrag插件实现可拖动的DIV弹出框
EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。接下来通过本文给大家介绍使用jQuery的easydrag插件实现可拖动的DIV弹出框，感兴趣的朋友一起学习吧
2016-02-02
jQuery中hasClass()方法用法实例
这篇文章主要介绍了jQuery中hasClass()方法用法,实例分析了hasClass()方法的功能、定义及验证匹配元素是否包含指定类的使用技巧,需要的朋友可以参考下
2015-01-01