极客教程EasyUI jQuery treegrid Widget
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计treegrid。树状图是用来在一个网格中显示分层数据的。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-treegrid">
属性:
- idField。指明哪个字段是身份字段。
- treeField。定义树节点字段。
- animate。定义当节点扩展或折叠时是否显示动画效果。
- checkbox:定义是否在每个行结点前显示复选框。
- cascadeCheck。定义是否进行级联检查。
- onlyLeafCheck。定义是否只在叶子结点前显示复选框。
- lines。定义是否显示树状图节点之间的线条。
- loader。如何从远程服务器加载数据。返回false可以中止这个动作。
- loadFilter。返回要显示的过滤后的数据。
事件:
- onLoadSuccess。当数据被成功加载时，它被触发。
- onLoadError。当加载远程数据时发生一些错误时，它被触发。
- onBeforeLoad：它在请求加载数据之前被触发。
- onClickRow：当用户点击某一行时，它被触发，参数包含。
- onDblClickRow：当用户双击一个行时，它被触发，参数包含。
- onClickCell：当用户点击一个单元格时，它被触发。
- onDblClickCell：当用户双击一个单元格时，它被触发。
- onBeforeSelect。它在用户选择某一行之前被触发。
- onSelect。当用户选择某一行时，它被触发。
- onBeforeUnselect。它在用户取消选择某行之前被触发。
- onUnselect。当用户取消选择某一行时，它会被触发。
- onBeforeCheckNode。它在用户检查某一行之前被触发。
- onCheckNode。当用户检查某一行时，它会被触发。
- onBeforeExpand。它在一行被展开之前被触发
- onExpand。它在行扩展时被触发。
- onBeforeCollapse。它在一个行被折叠之前被触发。
- onCollapse。当一个行被折叠时，它被触发。
- onContextMenu。当一个行被右键点击时，它会被触发。
- onBeforeEdit：当用户开始编辑某一行时，它被触发。
- onAfterEdit：当用户完成编辑时，它被触发。
- onCancelEdit：当用户取消编辑某一行时，它被触发。
方法:
- options。它返回树形网格的选项。
- resize。它设置树状图的大小。
- fixRowHeight：它固定了指定的行高。
- loadData。它加载树状图的数据。
- load。它加载并显示第一页。
- reload。它重新加载treegrid数据。
- reloadFooter。它重新加载页脚数据。
- getData。它获得加载的数据。
- getFooterRows。它获取页脚数据。
- getRoot：它获取根节点，返回节点对象。
- getRoots。它获取根节点，返回节点数组。
- getParent：它获取父节点。
- getChildren。它获取子节点。
- getSelected。它获取所选择的节点并返回，如果没有选择的节点则返回null。
- getSelections。它获得所有选定的节点。
- getCheckedNodes。它获取所有被检查的行。
- getLevel。它获得指定的节点级别。
- find。它找到指定的节点并返回节点数据。
- select。它选择一个节点。
- unselect。它取消对一个节点的选择。
- selectAll：它选择所有的节点。
- unselectAll：取消对所有节点的选择。
- checkNode。它设置指定的行节点来检查。
- uncheckNode:它将指定的行节点设置为取消检查
- collapse。它使一个节点崩溃。
- expand。。它扩展一个节点。
- collapseAll：它折叠所有的节点。
- expandAll：它展开所有节点。
- expandTo。它从根部扩展到指定的节点。
- toggle。它可以切换节点的扩展/折叠状态。
- append。它将节点追加到一个父节点。
- remove。它删除了一个节点和它的子节点。
- pop：它弹出并返回节点数据，包括删除该节点后的子节点。
- refresh。它刷新了指定的节点。
- update：它更新指定的节点
- beginEdit：它开始编辑一个节点。
- endEdit：它结束对一个节点的编辑。
- cancelEdit：它取消了对一个节点的编辑。
- getEditors。它获得指定的行编辑。
- getEditor：它获得指定的编辑器。
- showLines。它显示树状走廊的线条。
方法：首先，添加你的项目需要的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
示例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href=
"https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href=
"https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src=
"https://www.jeasyui.com/easyui/jquery.min.js">
</script>
<script type="text/javascript" src=
"https://www.jeasyui.com/easyui/jquery.easyui.min.js">
</script>
<script type="text/javascript">
(document).ready(function() {
('#gfg').treegrid({
rownumbers: true,
showFooter: true,
idField: 'id',
treeField: 'region',
animate: true
});
});
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>jQuery EasyUI TreeGrid Widget</p>
<div style="margin:20px 0;"></div>
<table id='gfg' title="EasyUI TreeGrid">
<thead>
<tr>
<th colspan="4">Geek1</th>
<th colspan="4">Geek2</th>
</tr>
<tr>
<th field="1" width="60"
align="Center">A</th>
<th field="2" width="60"
align="Center">B</th>
<th field="3" width="60"
align="Center">C</th>
<th field="4" width="60"
align="Center">D</th>
<th field="5" width="60"
align="Center">E</th>
<th field="6" width="60"
align="Center">F</th>
<th field="7" width="60"
align="Center">G</th>
<th field="8" width="60"
align="Center">H</th>
</tr>
</thead>
</table>
</body>
</html>
输出:
Treegrid