JQuery EasyUI(49)

最新推荐文章于 2020-07-16 16:21:58 发布

翻译最新推荐文章于 2020-07-16 16:21:58 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文深入讲解了JQuery EasyUI中的TreeGrid（树型表格）组件的加载方式、属性、事件和方法，包括如何通过JSON文件和JS加载数据，以及如何使用TreeGrid的各种功能。

第三十八章： TreeGrid（树型表格）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

//建立一个JSON文件

1.class 加载方式

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> 
    <style>
       .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>             
</head>
  <body>
     <table class="easyui-treegrid" style="width:12px;" data-options="url:'treegrid.json',idfield:'id',treeField:'name'">
      <thead>
         <tr> 
           <th data-options="field:'name',width:180" >菜单名称</th>
           <th data-options="field:'date',width:180">创建时间</th>
         </tr>
      </thead>
     </table> 
  </body>
</html>

//treegrid.json
[
  { 
   "id":1,
   "name":"系统管理",
   "date":"2015-10-10",
   "children":[{
           "id":2,
           "name":"主机信息", 
           "date":"2015-10-10",                           
         }]
   },{ 
   "id":3,
   "name":"会员管理",
   "date":"2015-10-10",
   "children":[{
           "id":4,
           "name":"认证审核", 
           "date":"2015-10-10",                           
         }]
   }
]

2.JS 加载方式

<head>
  <style>
      .textbox{
          height:200px;
          margin:0;
          padding:0 2px;
          box-sizing:content-box;
     }
  </style>
</head>
<body>
    <table id="box"></table>
</body>

$(function(){
    $('#box').treegrid({
       url:'treegrid.json',
       width:400,
       idField:'id',
       treeField:'name',
       columns:[[
           { 
             field:'name',
             title:'菜单名称',
             width:180,
           },
           { 
             field:'date',
             title:'创建时间',
             width:180,
           },
         ]]
     });
});

//treegrid.json
[
  { 
   "id":1,
   "name":"系统管理",
   "date":"2015-10-10",
   "children":[{
           "id":2,
           "name":"主机信息", 
           "date":"2015-10-10",                           
         }]
   },{ 
   "id":3,
   "name":"会员管理",
   "date":"2015-10-10",
   "children":[{
           "id":4,
           "name":"认证审核", 
           "date":"2015-10-10",                           
         }]
   }
]

二、属性列表：

树型表格扩展自dataGrid（数据表格），树型表格新增的属性如下：

TreeGrid属性
属性名	类型	说明
idField	string	定义关键字段来标识树节点。（必须的）
treeField	string	定义树节点字段。（必须的）
animate	boolean	定义在节点展开或者折叠的时候是否显示动画效果。
loader	function(param,success,error)	定义以何种方式从远程服务器读取数据。返回false可以忽略该动作。该函数具有以下属性：param：传递到远程服务器的参数对象。success（data）：当检索数据成功的时候调用的回调函数。error（）：当检索数据失败的时候调用的回调函数。
loadFilter	function(data,parentId)	返回过滤后的数据进行展示。

方法和DataGrid一致，不在重复！略。

三、事件列表：

树型表格的事件扩展自datagrid（数据表格），树型表格新增的事件如下：

TreeGrid事件
事件名	参数	说明
onClickRow	row	在用户点击节点的时候触发。
onDblClickRow	row	在用户双击节点的时候触发。
onClickCell	field,row	在用户点击单元格的时候触发。
onDblClickCell	field,row	在用户双击单元格的时候触发。
onBeforeLoad	row,param	在请求数据加载之前触发，返回false可以取消加载动作。
onLoadSuccess	row,data	数据加载完成之后触发。
onLoadError	arguments	数据加载失败的时候触发。参数和$.ajax()函数的'error'回调函数一样。
onBeforeExpand	row	在节点展开之前触发，返回false可以取消展开节点的动作。
onExpand	row	在节点展开的时候触发。
onBeforeCollapse	row	在节点折叠之前触发，返回false可以取消折叠节点的动作。
onCollapse	row	在节点被折叠的时候触发。
onContextMenu	e,row	在右键点击节点的时候触发。
onBeforeEdit	row	在用户开始编辑节点的时候触发。
onAfterEdit	row,changes	在用户完成编辑的时候触发。
onCancelEdit	row	在用户取消编辑节点的时候触发。

事件和DataGrid基本一致，代码演示忽略。

四、方法列表：

很多方法都是用'id'命名参数，而'id'参数代表数节点的值。

TreeGrid方法
方法名	参数	说明
options	none	返回树型表格的属性。
resize	options	设置树型表格大小，options包含两个属性：width：树型表格的新宽度。height：树型表格的新高度。
fixRowHeigth	id	修正指定的横高。
load	param	读取并显示主页内容。
loadData	data	读取树型表格数据。
reload	id	重新加载树型表格数据。如果'id'属性有值，将重新载入指定树型行，否则重新载入所有行。
reloadFooter	footer	重新载入页脚数据。
getData	none	获取载入数据。
getFooterRow	none	获取页脚数据。
getRoot	none	获取根节点，返回节点对象。
getRoots	none	获取所有根节点，返回节点数组。
getParent	id	获取父节点。
getChildren	id	获取子节点。
getSelecte	none	获取选择的节点并返回它，如果没有节点被选中则返回null。
getSelections	none	获取所有选择的节点。
getLevel	none	获取指定节点等级。
find	id	查找指定节点并返回节点数据。
select	id	选择一个节点。
unselect	id	反选一个节点。
selectAll	none	选择所有节点。
unselectAll	none	反选所有节点。
collapse	id	折叠一个节点。
expand	id	展开一个节点。
collapseAll	id	折叠所有节点。
expandAll	id	展开所有节点。
expandTo	id	展开从根节点到指定节点之间的所有节点。
toggle	id	节点展开/折叠状态触发器。
append	param	追加节点到一个父节点，'param'参数包括以下属性：param：父节点ID，如果未指定则追加到根节点。data：数组，节点数据。
insert	param	插入一个新的节点到指定节点，'param'参数包括以下属性：before：插入指定节点ID值之前。after：插入指定节点ID值之后。data：新节点数据。
remove	id	移除一个节点和它的所有子节点。
pop	id	弹出并返回节点数据以及它的子节点之后删除。
refresh	id	涮新指定节点。
update	param	更新指定节点。'param'参数包括以下属性：id：要更新的节点的ID。row：新的行数据。
beginEdit	id	开始编辑一个节点。
endEdit	id	结束编辑一个节点。
cancelEdit	id	取消编辑一个节点。
getEditors	id	获取指定行编辑器，每个编辑器都包含以下属性：actions：编辑器执行的动作。target：目标管理器的JQuery对象。field：字段名称。type：编辑器类型。
getEdit	param	获取指定编辑器，'param'参数包含2个属性：id：行节点ID。field：字段名称。

方法和DataGrid一致，代码演示忽略。

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103871280

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载