jQuery EasyUI
jQuery EasyUI 简介 jEasyUI 创建 CRUD 应用 jEasyUI 创建 CRUD 数据网格 jEasyUI 表单的 CRUD 应用 jEasyUI 创建 RSS 阅读器 jEasyUI 基本的拖动和放置 jEasyUI 创建拖放的购物车 jEasyUI 创建学校课程表 jEasyUI 创建简单的菜单 jEasyUI 创建链接按钮 jEasyUI 创建菜单按钮 jEasyUI 创建分割按钮 jEasyUI 创建边框布局 jEasyUI 创建复杂布局 jEasyUI 创建折叠面板 jEasyUI 创建标签页 jEasyUI 动态添加标签页 jEasyUI 添加自动播放标签页 jEasyUI 创建 XP 风格左侧面板 jEasyUI 转换 HTML 表格为数据网格 jEasyUI 取得选中行数据 jEasyUI 添加查询功能 jEasyUI 添加工具栏 jEasyUI 创建复杂工具栏 jEasyUI 设置冻结列 jEasyUI 动态改变列 jEasyUI 格式化列 jEasyUI 设置排序 jEasyUI 自定义排序 jEasyUI 创建列组合 jEasyUI 添加复选框 jEasyUI 自定义分页 jEasyUI 启用行内编辑 jEasyUI 扩展编辑器 jEasyUI 列运算 jEasyUI 合并单元格 jEasyUI 创建自定义视图 jEasyUI 创建页脚摘要 jEasyUI 条件设置行背景颜色 jEasyUI 创建属性网格 jEasyUI 扩展行显示细节 jEasyUI 创建子网格 jEasyUI 显示海量数据 jEasyUI 添加分页组件 jEasyUI 创建简单窗口 jEasyUI 自定义窗口工具栏 jEasyUI 窗口与布局 jEasyUI 创建对话框 jEasyUI 自定义对话框 jEasyUI 使用标记创建树形菜单 jEasyUI 创建异步树形菜单 jEasyUI 树形菜单添加节点 jEasyUI 创建带复选框的树形菜单 jEasyUI 树形菜单拖放控制 jEasyUI 树形菜单加载父/子节点 jEasyUI 创建基础树形网格 jEasyUI 创建复杂树形网格 jEasyUI 树形网格动态加载 jEasyUI 树形网格添加分页 jEasyUI 树形网格惰性加载节点 jEasyUI 创建异步提交表单 jEasyUI 表单验证 jEasyUI 创建树形下拉框 jEasyUI 格式化下拉框 jEasyUI 过滤下拉数据网格 jQuery EasyUI 插件 jQuery EasyUI 扩展
首页 > JavaScript > jQuery EasyUI

Treegrid 树形网格

jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格

扩展自 $.fn.datagrid.defaults。通过 $.fn.treegrid.defaults 重写默认的 defaults。

树形网格（treegrid）用于以网格形式显示分层数据。它是基于数据网格（datagrid）的，并结合了树视图（treeview）和可编辑网格。树形网格（treegrid）允许您创建可定制的、可异步展开的行，并以多列形式显示分层数据。

依赖

  • datagrid

用法

在 HTML 标记中创建树形网格（treegrid）。在大多数情况下，树形网格（treegrid）遵循与数据网格（datagrid）相同的结构和格式。 

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
    data-options="url:‘get_data.php‘,idField:‘id‘,treeField:‘name‘">
    <thead>
		<tr>
			<th data-options="field:‘name‘,width:180">Task Name</th>
			<th data-options="field:‘persons‘,width:60,align:‘right‘">Persons</th>
			<th data-options="field:‘begin‘,width:80">Begin Date</th>
			<th data-options="field:‘end‘,width:80">End Date</th>
		</tr>
    </thead>
</table>

使用 javascript 创建树形网格（treegrid）。 

<table id="tt" style="width:600px;height:400px"></table>

$(‘#tt‘).treegrid({
    url:‘get_data.php‘,
    idField:‘id‘,
    treeField:‘name‘,
    columns:[[
		{title:‘Task Name‘,field:‘name‘,width:180},
		{field:‘persons‘,title:‘Persons‘,width:60,align:‘right‘},
		{field:‘begin‘,title:‘Begin Date‘,width:80},
		{field:‘end‘,title:‘End Date‘,width:80}
    ]]
});

属性

该属性扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的属性。

名称 类型 描述 默认值
idField string 定义标识树节点的键名字段。必需。 null
treeField string 定义树节点的字段。必需。 null
animate boolean 定义当节点展开或折叠时是否显示动画效果。 false
loader function(param,success,error) 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
param：要传递到远程服务器的参数对象。
success(data)：当检索数据成功时调用的回调函数。
error()：当检索数据失败时调用的回调函数。
 json loader
loadFilter function(data,parentId) 返回要显示的过滤数据。

事件

该事件扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的事件。

名称 参数 描述
onClickRow row 当用户点击一个节点时触发。
onDblClickRow row 当用户双击一个节点时触发。
onClickCell field,row 当用户点击一个单元格时触发。
onDblClickCell field,row 当用户双击一个单元格时触发。
onBeforeLoad row, param 当加载数据的请求发出前触发，返回 false 则取消加载动作。
onLoadSuccess row, data 当数据加载成功时触发。
onLoadError arguments 当数据加载失败时触发，arguments 参数和 jQuery.ajax 的 ‘error‘ 方法一样。
onBeforeExpand row 节点展开前触发，返回 false 则取消展开动作。
onExpand row 当节点展开时触发。
onBeforeCollapse row 节点折叠前触发，返回 false 则取消折叠动作。
onCollapse row 当节点折叠时触发。
onContextMenu e, row 当右键点击节点时触发。
onBeforeEdit row 当用户开始编辑节点时触发。
onAfterEdit row,changes 当用户完成编辑时触发。
onCancelEdit row 当用户取消编辑节点时触发。

方法

很多方法需要一个名为 ‘id‘ 的参数，该参数表示树节点的值。

名称 参数 描述
options none 返回树形网格（treegrid）的选项（options）。
resize options 设置树形网格（treegrid）的尺寸， options 参数包含两个属性：
width：树形网格（treegrid）的新宽度。
height：树形网格（treegrid）的新高度。
fixRowHeight id 固定指定行的高度。
loadData data 加载树形网格（treegrid）的数据。
load param 加载并显示第一页。该方法自版本 1.3.4 起可用。
代码实例： 
// load and send some request parameters
$(‘#tg‘).treegrid(‘load‘, {
	q: ‘abc‘,
	name: ‘name1‘
});
reload id 重新加载树形网格（treegrid）的数据。如果传递了 ‘id‘ 参数，则重新加载树的指定行，否则重新加载树的所有行。
代码实例： 
$(‘#tt‘).treegrid(‘reload‘, 2);	// reload the row which value is equals to 2
$(‘#tt‘).treegrid(‘reload‘);	// reload the all rows
$(‘#tt‘).treegrid(‘reload‘, {id:2, q:‘abc‘});  // reload the specified row with ‘q‘ parameter passing to server
reloadFooter footer 重新加载底部数据。
getData none 获取加载的数据。
getFooterRows none 获取底部数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取根节点，返回节点数组。
getParent id 获取父节点。
getChildren id 获取子节点。
getSelected none 获取选中的节点并返回它，如果没有选中节点则返回 null。
getSelections none 获取所有选中的节点。
getLevel id 获取指定节点的层级。
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‘ 参数包括下列属性：
parent：父节点的 id，如果没有分配，则追加为根节点。
data：数组，节点的数据。

代码实例： 
// append some nodes to the selected row
var node = $(‘#tt‘).treegrid(‘getSelected‘);
$(‘#tt‘).treegrid(‘append‘,{
	parent: node.id,  // the node has a ‘id‘ value that defined through ‘idField‘ property
	data: [{
		id: ‘073‘,
		name: ‘name73‘
	}]
});
insert param 在指定节点的前边或后边插入一个节点，‘param‘ 参数包括下列属性：
before：前边插入的节点的 id 值。
after：后边插入的节点的 id 值。
data：新的节点数据。

代码实例： 
// insert a new node before the selected node
var node = $(‘#tt‘).treegrid(‘getSelected‘);
if (node){
	$(‘#tt‘).treegrid(‘insert‘, {
		before: node.id,
		data: {
			id: 38,
			name: ‘name38‘
		}
	});
}
该方法自版本 1.3.1 起可用。
remove id 移除节点和它的子节点。
pop id 弹出节点并在移除该节点后返回包含其子节点的节点数据。该方法自版本 1.3.1 起可用。
refresh id 刷新指定的节点。
update param 更新指定的节点。‘param‘ 参数包括下列属性：
id：表示要被更新的节点的 id。
row：新的行数据。

代码实例： 
$(‘#tt‘).treegrid(‘update‘,{
	id: 2,
	row: {
		name: ‘new name‘,
		iconCls: ‘icon-save‘
	}
});
该方法自版本 1.3.1 起可用。
beginEdit id 开始编辑节点。
endEdit id 结束编辑节点。
cancelEdit id 取消编辑节点。
getEditors id 获取指定行的编辑器。每个编辑器有下列属性：
actions：编辑器可以做的动作。
target：目标编辑器的 jQuery 对象。
field：字段名。
type：编辑器的类型。
getEditor param 获取指定的编辑器，param 参数包含两个属性：
id：行节点的 id。
field：字段名。
上一篇
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3