jQuery EasyUI API 中文文檔 - 表格樹（Treegrid）

TreeGrid

由 $.fn.datagrid.defaults擴展而來。

default由$.fn.treegrid.defaults重載。

Treegrid用來在表格中顯示層級數據。它基於datagrid,結合了treeview和editable 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新增的屬性：

名稱	類型	描述	缺省值
idField	string	樹節點的key值。必需.	null
treeField	string	樹節點值. 必需.	null
animate	boolean	定義節點展開或收斂時，是否顯示動畫效果.	false
loader	function(param,success,error)	定義怎樣從遠程服務器裝載數據. return 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	數據請求前觸發, return false 刪除請求動作.
onLoadSuccess	row, data	數據加載成功時觸發.
onLoadError	arguments	數據加載失敗時觸發, 參數 arguments 與jQuery.ajax 的 'error' 函數相同 .
onBeforeExpand	row	節點展開前觸發, return false 刪除展開動作.
onExpand	row	節點展開后觸發.
onBeforeCollapse	row	節點收斂前觸發, return false 刪除收斂動作.
onCollapse	row	節點收斂后觸發.
onContextMenu	e, row	節點右擊時觸發.
onBeforeEdit	row	用戶開始編輯節點時觸發.
onAfterEdit	row,changes	用戶完成編輯節點后觸發.
onCancelEdit	row	用戶放棄編輯節點時觸發.

方法

許多方法有"id"這個參數，這個參數指的是tree節點的value值

名稱	參數	描述
options	none	返回treegrid的可選項.
resize	options	設置treegrid 的大小, 選項包括兩個屬性: width: treegrid新的寬度. height: treegrid新的高度.
fixRowHeight	id	固定指定的行高.
loadData	data	加載treegrid 數據.
reload	id	重新加載treegrid 數據. 如果傳遞了參數 'id', 加載指定的行, 否則加載所有的行. Code example: $('#tt').treegrid('reload', 2); // 重新加載 value 等於 2 的行 $('#tt').treegrid('reload'); // 重新加載所有的行
reloadFooter	footer	重新加載 footer 數據.
getData	none	獲取加載的數據.
getFooterRows	none	獲取footer 數據.
getRoot	none	獲取根節點, 返回node對象
getRoots	none	獲取所有根節點, 返回node列表.
getParent	id	獲取父節點.
getChildren	id	獲取子節點.
getSelected	none	獲取選擇的節點並返回, 如果沒有節點被選擇 返回 null.
getSelections	none	獲取所有選擇節點.
getLevel	id	獲取指定節點的level層級.
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: 節點數據列表. Code example: // append some nodes to the selected row var node = $('#tt').treegrid('getSelected'); $('#tt').treegrid('append',{ parent: node.id, // 節點有一個‘id'值，通過 'idField'屬性指定 data: [{ id: '073', name: 'name73' }] });
insert	param	插入新節點到指定的節點. 參數'param'包括下列屬性 : before: 插入節點之前的節點id. after: 插入節點之后的節點id. data: 新的節點數據. Code example: // 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: 新的數據行. Code example: $('#tt').treegrid('update',{ id: 2, row: { name: 'new name', iconCls: 'icon-save' } }); 該功能在版本 1.3.1 之后可用.
beginEdit	id	開始編輯一個節點.
endEdit	id	結束編輯一個節點.
cancelEdit	id	取消編輯一個節點.
getEditors	id	獲取指定的行編輯器. 每個編輯器有以下屬性: actions: 編輯器可以做的actions. target: 目標編輯器的 jQuery 對象. field: field的名稱. type: 編輯器的類型.
getEditor	param	獲取指定的編輯器, param 包括兩種屬性: id: 行節點id. field: field 名稱.

參考文檔: http://www.jeasyui.com