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

  

    
  
    
  
    
    
  
    
    
  
    
        $(document).ready(function() {
            $('#gfg').treegrid({
                rownumbers: true,
                showFooter: true,
                idField: 'id',
                treeField: 'region',
                animate: true
            });
        });
    

  

    GeeksforGeeks
  
    jQuery EasyUI TreeGrid Widget
  
    
    
        
            
                
                
            
            
                
  
                
  
                
                  
                
                  
                
                  
                
                  
                
                  
                
            
        
    Geek1Geek2ABCDEFGH

  

输出：

树形网格

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