jQuery EasyUI 數(shù)據(jù)網(wǎng)格與樹插件 – Treegrid 樹形網(wǎng)格

2018-09-20 10:08 更新

jQuery EasyUI 數(shù)據(jù)網(wǎng)格與樹插件 - Treegrid 樹形網(wǎng)格

jQuery EasyUI 插件 jQuery EasyUI 插件

擴展自 $.fn.datagrid.defaults。通過 $.fn.treegrid.defaults 重寫默認(rèn)的 defaults。

樹形網(wǎng)格（treegrid）用于以網(wǎng)格形式顯示分層數(shù)據(jù)。它是基于數(shù)據(jù)網(wǎng)格（datagrid）的，并結(jié)合了樹視圖（treeview）和可編輯網(wǎng)格。樹形網(wǎng)格（treegrid）允許您創(chuàng)建可定制的、可異步展開的行，并以多列形式顯示分層數(shù)據(jù)。

依賴

  • datagrid

用法

在 HTML 標(biāo)記中創(chuàng)建樹形網(wǎng)格（treegrid）。在大多數(shù)情況下，樹形網(wǎng)格（treegrid）遵循與數(shù)據(jù)網(wǎng)格（datagrid）相同的結(jié)構(gòu)和格式。

<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 創(chuàng)建樹形網(wǎng)格（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}
    ]]
});

屬性

該屬性擴展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為樹形網(wǎng)格（treegrid）添加的屬性。

名稱 類型 描述 默認(rèn)值
idField string 定義標(biāo)識樹節(jié)點的鍵名字段。必需。 null
treeField string 定義樹節(jié)點的字段。必需。 null
animate boolean 定義當(dāng)節(jié)點展開或折疊時是否顯示動畫效果。 false
loader function(param,success,error) 定義如何從遠(yuǎn)程服務(wù)器加載數(shù)據(jù)。返回 false 則取消該動作。該函數(shù)有下列參數(shù)：
param：要傳遞到遠(yuǎn)程服務(wù)器的參數(shù)對象。
success(data)：當(dāng)檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。
error()：當(dāng)檢索數(shù)據(jù)失敗時調(diào)用的回調(diào)函數(shù)。
 json loader
loadFilter function(data,parentId) 返回要顯示的過濾數(shù)據(jù)。

事件

該事件擴展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為樹形網(wǎng)格（treegrid）添加的事件。

名稱 參數(shù) 描述
onClickRow row 當(dāng)用戶點擊一個節(jié)點時觸發(fā)。
onDblClickRow row 當(dāng)用戶雙擊一個節(jié)點時觸發(fā)。
onClickCell field,row 當(dāng)用戶點擊一個單元格時觸發(fā)。
onDblClickCell field,row 當(dāng)用戶雙擊一個單元格時觸發(fā)。
onBeforeLoad row, param 當(dāng)加載數(shù)據(jù)的請求發(fā)出前觸發(fā)，返回 false 則取消加載動作。
onLoadSuccess row, data 當(dāng)數(shù)據(jù)加載成功時觸發(fā)。
onLoadError arguments 當(dāng)數(shù)據(jù)加載失敗時觸發(fā)，arguments 參數(shù)和 jQuery.ajax 的 'error' 方法一樣。
onBeforeExpand row 節(jié)點展開前觸發(fā)，返回 false 則取消展開動作。
onExpand row 當(dāng)節(jié)點展開時觸發(fā)。
onBeforeCollapse row 節(jié)點折疊前觸發(fā)，返回 false 則取消折疊動作。
onCollapse row 當(dāng)節(jié)點折疊時觸發(fā)。
onContextMenu e, row 當(dāng)右鍵點擊節(jié)點時觸發(fā)。
onBeforeEdit row 當(dāng)用戶開始編輯節(jié)點時觸發(fā)。
onAfterEdit row,changes 當(dāng)用戶完成編輯時觸發(fā)。
onCancelEdit row 當(dāng)用戶取消編輯節(jié)點時觸發(fā)。

方法

很多方法需要一個名為 'id' 的參數(shù)，該參數(shù)表示樹節(jié)點的值。

名稱 參數(shù) 描述
options none 返回樹形網(wǎng)格（treegrid）的選項（options）。
resize options 設(shè)置樹形網(wǎng)格（treegrid）的尺寸， options 參數(shù)包含兩個屬性：
width：樹形網(wǎng)格（treegrid）的新寬度。
height：樹形網(wǎng)格（treegrid）的新高度。
fixRowHeight id 固定指定行的高度。
loadData data 加載樹形網(wǎng)格（treegrid）的數(shù)據(jù)。
load param 加載并顯示第一頁。該方法自版本 1.3.4 起可用。
代碼實例： 
// load and send some request parameters
$('#tg').treegrid('load', {
	q: 'abc',
	name: 'name1'
});
reload id 重新加載樹形網(wǎng)格（treegrid）的數(shù)據(jù)。如果傳遞了 'id' 參數(shù)，則重新加載樹的指定行，否則重新加載樹的所有行。
代碼實例： 
$('#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 重新加載底部數(shù)據(jù)。
getData none 獲取加載的數(shù)據(jù)。
getFooterRows none 獲取底部數(shù)據(jù)。
getRoot none 獲取根節(jié)點，返回節(jié)點對象。
getRoots none 獲取根節(jié)點，返回節(jié)點數(shù)組。
getParent id 獲取父節(jié)點。
getChildren id 獲取子節(jié)點。
getSelected none 獲取選中的節(jié)點并返回它，如果沒有選中節(jié)點則返回 null。
getSelections none 獲取所有選中的節(jié)點。
getLevel id 獲取指定節(jié)點的層級。
find id 找到指定節(jié)點并返回該節(jié)點數(shù)據(jù)。
select id 選擇節(jié)點。
unselect id 取消選擇節(jié)點。
selectAll none 選擇所有節(jié)點。
unselectAll none 取消選擇所有節(jié)點。
collapse id 折疊節(jié)點。
expand id 展開節(jié)點。
collapseAll id 折疊所有的節(jié)點。
expandAll id 展開所有的節(jié)點。
expandTo id 從根部展開一個指定的節(jié)點。
toggle id 切換節(jié)點的展開/折疊狀態(tài)。
append param 追加一些子節(jié)點到一個父節(jié)點，'param' 參數(shù)包括下列屬性：
parent：父節(jié)點的 id，如果沒有分配，則追加為根節(jié)點。
data：數(shù)組，節(jié)點的數(shù)據(jù)。

代碼實例： 
// 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 在指定節(jié)點的前邊或后邊插入一個節(jié)點，'param' 參數(shù)包括下列屬性：
before：前邊插入的節(jié)點的 id 值。
after：后邊插入的節(jié)點的 id 值。
data：新的節(jié)點數(shù)據(jù)。

代碼實例： 
// 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 移除節(jié)點和它的子節(jié)點。
pop id 彈出節(jié)點并在移除該節(jié)點后返回包含其子節(jié)點的節(jié)點數(shù)據(jù)。該方法自版本 1.3.1 起可用。
refresh id 刷新指定的節(jié)點。
update param 更新指定的節(jié)點。'param' 參數(shù)包括下列屬性：
id：表示要被更新的節(jié)點的 id。
row：新的行數(shù)據(jù)。

代碼實例： 
$('#tt').treegrid('update',{
	id: 2,
	row: {
		name: 'new name',
		iconCls: 'icon-save'
	}
});
該方法自版本 1.3.1 起可用。
beginEdit id 開始編輯節(jié)點。
endEdit id 結(jié)束編輯節(jié)點。
cancelEdit id 取消編輯節(jié)點。
getEditors id 獲取指定行的編輯器。每個編輯器有下列屬性：
actions：編輯器可以做的動作。
target：目標(biāo)編輯器的 jQuery 對象。
field：字段名。
type：編輯器的類型。
getEditor param 獲取指定的編輯器，param 參數(shù)包含兩個屬性：
id：行節(jié)點的 id。
field：字段名。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號