📜  EasyUI jQuery 树形网格小部件

📅  最后修改于: 2022-05-13 01:55:58.601000             🧑  作者: Mango

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

       
                                                                                                                                                                                                                                                                                                                                                              
Geek1Geek2
ABCDEFGH
  


输出:

树形网格

参考: http://www.jeasyui.com/documentation/