EasyUI jQuery 树形网格小部件
EasyUI 是一个 HTML5 框架,用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能,为开发人员节省大量时间。
在本文中,我们将学习如何使用 jQuery EasyUI 设计 treegrid。树形网格用于在网格中显示分层数据。
EasyUI for jQuery 下载:
https://www.jeasyui.com/download/index.php
句法:
特性:
- idField:指示哪个字段是身份字段。
- treeField:定义树节点字段。
- animate:定义节点展开或折叠时是否显示动画效果。
- checkbox:定义是否在每个行节点之前显示复选框。
- 级联检查:定义是否进行级联检查。
- onlyLeafCheck:定义是否只在叶节点之前显示复选框。
- 线条:定义是否在树形网格节点之间显示线条。
- 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:它返回树形网格的选项。
- 调整大小:它设置树形网格的大小。
- fixRowHeight:它固定指定的行高。
- loadData:它加载树形网格数据。
- 加载:它加载并显示第一页。
- 重新加载:它重新加载树形网格数据。
- reloadFooter:它重新加载页脚数据。
- getData:它得到 加载的数据。
- getFooterRows:获取页脚数据。
- getRoot:获取根节点,返回节点对象
- getRoots:获取根节点,返回节点数组。
- getParent:获取父节点。
- getChildren:它获取子节点。
- getSelected:获取选中的节点并返回,如果没有选中的节点返回null。
- getSelections:它获取所有选定的节点。
- getCheckedNodes:它获取所有选中的行。
- getLevel:它获取指定的节点级别。
- find:查找指定节点并返回节点数据。
- select:它选择一个节点。
- 取消选择:它取消选择一个节点。
- selectAll:选择所有节点。
- 取消全选:它 取消选择所有节点。
- checkNode:设置要检查的指定行节点。
- uncheckNode:将指定的行节点设置为取消选中
- 折叠:它折叠一个节点。
- expand:它扩展一个节点。
- collapseAll:折叠所有节点。
- expandAll:展开所有节点。
- expandTo:从根扩展到指定节点。
- 切换:它切换节点的展开/折叠状态。
- append:将节点附加到父节点。
- remove:它删除一个节点及其子节点。
- 流行:它流行 并在删除该节点后返回节点数据,包括其子节点。
- refresh:刷新指定节点。
- update:更新指定节点
- beginEdit:它开始编辑一个节点。
- endEdit:它结束编辑节点。
- cancelEdit:它取消编辑节点。
- getEditors:它获取指定的行编辑器。
- getEditor:它得到 指定的编辑器。
- showLines:它显示树形网格线。
方法:首先,添加项目所需的 jQuery Easy UI 脚本。
例子:
HTML
GeeksforGeeks
jQuery EasyUI TreeGrid Widget
Geek1
Geek2
A
B
C
D
E
F
G
H
输出:
参考: http://www.jeasyui.com/documentation/