[轉]easyUI1.3.1 TreeGrid延遲加載

@author YHC

從$.fn.datagrid.defaults.繼承,覆蓋默認值$.fn.treegrid.defaults.

treegrid 是使用顯示分層數據在grid中,treegrid 是基於datagrid和關聯treeview 和關聯可編輯的grid,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新增的屬性.

Name	Type	Description	Default
idField	string	定義鍵字段標識一個tree節點,該項是必須的.	null
treeField	string	定義tree節點字段,該項是必須的.	null
animate	boolean	定義當節點展開/關閉的時候,是否顯示動畫效果.	false
loader	function(param,success,error)	定義如何從遠程服務器端加載數據. 返回false將終止這個動作. 這個函數提供一下參數 : param: 傳遞給遠程服務器的參數對象. success(data): 當檢索數據成功之后執行的回調函數. error(): 當檢索數據失敗的時候調用的回調函數.	json loader
loadFilter	function(data,parentId)	返回過濾后的顯示數據.

 

事件

事件從datagrid繼承, 以下是datagrid新增事件.

Name	Parameters	Description
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, 這個參數指明tree節點值.

 

Name	Parameter	Description
options	none	返回treegrid的 options對象.
resize	options	設置treegrid 大小,options包含兩個屬性: width: treegrid新的寬度. height: treegrid新的高度.
fixRowHeight	id	固定特定行高度.
loadData	data	加載 treegrid 數據.
reload	id	重新加載treegrid 數據.如果傳遞了id參數, 重新加載特定的tree行, 其他的重新加載所有tree行. 示例代碼: $('#tt').treegrid('reload', 2); // 重新加載指定id值是2的行 $('#tt').treegrid('reload'); // 重新加載所有行
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	切換節點的 expanded(展開)/collapsed (關閉)狀態.
append	param	附加一個節點到父節點. 'param' 參數包含以下屬性: parent:父節點id , 如果沒有分配, 附加作為根節點. data: 數組, 節點數據. 示例代碼: // 添加一些節點到選中節點 var node = $('#tt').treegrid('getSelected'); $('#tt').treegrid('append',{ parent: node.id, // 節點有一個'id'值,定義是通過'idField'屬性 data: [{ id: '073', name: 'name73' }] });
remove	id	移除一個節點和其子節點.
refresh	id	刷新特定的節點.
beginEdit	id	開始編輯一個節點.
endEdit	id	結束編輯一個節點.
cancelEdit	id	取消編輯一個節點.
getEditors	id	得到特定行編輯器.每一個編輯器都有以下屬性: actions:編輯器可以做的動作. target: 目標編輯器jQuery對象. field:字段名. type:編輯器類型.
getEditor	options	得到特定的編輯器, options 包含兩個屬性: id:行節點id. field: 字段名.

項目地址：https://github.com/zhengjin/WindowDemo/tree/master/EasyUI

PS:網上很多例子使用onBeforeExpand事件進行ajax取值，我也犯了這樣的錯誤；

其實，只要父對象的state= closed,在前台點擊節點時會自動像后台請求數據，當前樹的節點作為id將一塊傳至后台