數據網格和樹-EasyUI Datagrid 數據網格、EasyUI Propertygrid 屬性網格、EasyUI Tree 樹、EasyUI Treegrid 樹形網格

EasyUI Datagrid 數據網格

擴展自 $.fn.panel.defaults。通過 $.fn.datagrid.defaults 重寫默認的 defaults。

數據網格（datagrid）以表格格式顯示數據，並為選擇、排序、分組和編輯數據提供了豐富的支持。數據網格（datagrid）的設計目的是為了減少開發時間，且不要求開發人員具備指定的知識。它是輕量級的，但是功能豐富。它的特性包括單元格合並，多列頁眉，凍結列和頁腳，等等。

依賴

• panel
• resizable
• linkbutton
• pagination

用法

從已有的表格元素創建數據網格（datagrid），在 html 中定義列、行及數據。

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">Code</th>
            <th data-options="field:'name'">Name</th>
            <th data-options="field:'price'">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>name1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>name2</td><td>4612</td>
        </tr>
    </tbody>
</table>

通過 <table> 標記創建數據網格（datagrid）。嵌套的 <th> 標簽定義表格中的列。

<table class="easyui-datagrid" style="width:400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:100">Code</th>
            <th data-options="field:'name',width:100">Name</th>
            <th data-options="field:'price',width:100,align:'right'">Price</th>
        </tr>
    </thead>
</table>

也可以使用 javascript 創建數據網格（datagrid）。

<table id="dg"></table>

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'Code',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100,align:'right'}
    ]]
});

通過一些參數查詢數據。

$('#dg').datagrid('load', {
    name: 'easyui',
    address: 'ho'
});

在向服務器改變數據之后，更新前台數據。

$('#dg').datagrid('reload');    // reload the current page data

數據網格（DataGrid）屬性

該屬性擴展自面板（panel），下面是為數據網格（datagrid）添加的屬性。

名稱	類型	描述	默認值
columns	array	數據網格（datagrid）的列（column）的配置對象，更多細節請參見列（column）屬性。	undefined
frozenColumns	array	和列（column）屬性一樣，但是這些列將被凍結在左邊。	undefined
fitColumns	boolean	設置為 true，則會自動擴大或縮小列的尺寸以適應網格的寬度並且防止水平滾動。	false
resizeHandle	string	調整列的位置，可用的值有：'left'、'right'、'both'。當設置為 'right' 時，用戶可通過拖拽列頭部的右邊緣來調整列。 該屬性自版本 1.3.2 起可用。	right
autoRowHeight	boolean	定義是否設置基於該行內容的行高度。設置為 false，則可以提高加載性能。	true
toolbar	array,selector	數據網格（datagrid）面板的頭部工具欄。可能的值： 1、數組，每個工具選項與鏈接按鈕（linkbutton）一樣。 2、選擇器，只是工具欄。 在 <div> 標簽內定義工具欄： $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a> </div> 通過數組定義工具欄： $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });	null
striped	boolean	設置為 true，則把行條紋化。（即奇偶行使用不同背景色）	false
method	string	請求遠程數據的方法（method）類型。	post
nowrap	boolean	設置為 true，則把數據顯示在一行里。設置為 true 可提高加載性能。	true
idField	string	指示哪個字段是標識字段。	null
url	string	從遠程站點請求數據的 URL。	null
data	array,object	要加載的數據。該屬性自版本 1.3.2 起可用。 代碼實例： $('#dg').datagrid({ data: [ {f1:'value11', f2:'value12'}, {f1:'value21', f2:'value22'} ] });	null
loadMsg	string	當從遠程站點加載數據時，顯示的提示消息。	Processing, please wait …
pagination	boolean	設置為 true，則在數據網格（datagrid）底部顯示分頁工具欄。	false
rownumbers	boolean	設置為 true，則顯示帶有行號的列。	false
singleSelect	boolean	設置為 true，則只允許選中一行。	false
checkOnSelect	boolean	如果設置為 true，當用戶點擊某一行時，則會選中/取消選中復選框。如果設置為 false 時，只有當用戶點擊了復選框時，才會選中/取消選中復選框。 該屬性自版本 1.3 起可用。	true
selectOnCheck	boolean	如果設置為 true，點擊復選框將會選中該行。如果設置為 false，選中該行將不會選中復選框。 該屬性自版本 1.3 起可用。	true
pagePosition	string	定義分頁欄的位置。可用的值有：'top'、'bottom'、'both'。 該屬性自版本 1.3 起可用。	bottom
pageNumber	number	當設置了 pagination 屬性時，初始化頁碼。	1
pageSize	number	當設置了 pagination 屬性時，初始化頁面尺寸。	10
pageList	array	當設置了 pagination 屬性時，初始化頁面尺寸的選擇列表。	[10,20,30,40,50]
queryParams	object	當請求遠程數據時，發送的額外參數。 代碼實例： $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });	{}
sortName	string	定義可以排序的列。	null
sortOrder	string	定義列的排序順序，只能用 'asc' 或 'desc'。	asc
multiSort	boolean	定義是否啟用多列排序。該屬性自版本 1.3.4 起可用。	false
remoteSort	boolean	定義是否從服務器排序數據。	true
showHeader	boolean	定義是否顯示行的頭部。	true
showFooter	boolean	定義是否顯示行的底部。	false
scrollbarSize	number	滾動條寬度（當滾動條是垂直的時候）或者滾動條的高度（當滾動條是水平的時候）。	18
rowStyler	function	返回例如 'background:red' 的樣式。該函數需要兩個參數： rowIndex：行的索引，從 0 開始。 rowData：該行相應的記錄。 代碼實例： $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'color:#fff;'; // return inline style // the function can return predefined css class and inline style // return {class:'r1', style:{'color:#fff'}}; } } });
loader	function	定義如何從遠程服務器加載數據。返回 false 則取消該動作。該函數有下列參數： param：要傳遞到遠程服務器的參數對象。 success(data)：當檢索數據成功時調用的回調函數。 error()：當檢索數據失敗時調用的回調函數。	json loader
loadFilter	function	返回要顯示的過濾數據。該函數有一個參數 'data' ，表示原始數據。您可以把原始數據變成標准數據格式。該函數必須返回標准數據對象，含有 'total' 和 'rows' 屬性。 代碼實例： // removing 'd' object from asp.net web service json output $('#dg').datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });
editors	object	定義編輯行時的編輯器。	predefined editors
view	object	定義數據網格（datagrid）的視圖。	default view

列（Column）屬性

數據網格（DataGrid） 的列（Column）是一個數組對象，它的每個元素也是一個數組。元素數組的元素是一個配置對象，它定義了每個列的字段。

代碼實例：

1. columns:[[
2. {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
3. {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
4. {title:'Item Details',colspan:4}
5. ],[
6. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
7. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
8. {field:'attr1',title:'Attribute',width:100},
9. {field:'status',title:'Status',width:60}
10. ]]

名稱	類型	描述	默認值
title	string	列的標題文本。	undefined
field	string	列的字段名。	undefined
width	number	列的寬度。如果未定義，則寬度會自動擴展以適應它的內容。沒有定義寬度將會降低性能。	undefined
rowspan	number	指示一個單元格占據多少行。	undefined
colspan	number	指示一個單元格占據多少列。	undefined
align	string	指示如何對齊該列的數據，可以用 'left'、'right'、'center'。	undefined
halign	string	指示如何對齊該列的頭部，可能的值：'left'、'right'、'center'。如果沒有分配值，則頭部對齊方式將與通過 'align' 屬性定義的數據對齊方式一致。該屬性自版本 1.3.2 起可用。	undefined
sortable	boolean	設置為 true，則允許該列被排序。	undefined
order	string	默認的排序順序，只能用 'asc' 或 'desc'。該屬性自版本 1.3.2 起可用。	undefined
resizable	boolean	設置為 true，則允許該列可調整尺寸。	undefined
fixed	boolean	設置為 true，則當 'fitColumns' 設置為 true 時放置調整寬度。	undefined
hidden	boolean	設置為 true，則隱藏該列。	undefined
checkbox	boolean	設置為 true，則顯示復選框。復選框有固定寬度。	undefined
formatter	function	單元格的格式化函數，需要三個參數： value：字段的值。 rowData：行的記錄數據。 rowIndex：行的索引。 代碼實例： $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] });	undefined
styler	function	單元格的樣式函數，返回樣式字符串來自定義該單元格的樣式，例如 'background:red' 。該函數需要三個參數： value：字段的值。 rowData：行的記錄數據。 rowIndex：行的索引。 代碼實例： $('#dg').datagrid({ columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value < 20){ return 'color:red;'; // the function can return predefined css class and inline style // return {class:'c1',style:'color:red'} } } } ]] });	undefined
sorter	function	用於本地排序的自定義字段的排序函數，需要兩個參數： a：第一個字段值。 b：第二個字段值。 代碼實例： $('#dg').datagrid({ remoteSort: false, columns: [[ {field:'date',title:'Date',width:80,sortable:true,align:'center', sorter:function(a,b){ a = a.split('/'); b = b.split('/'); if (a[2] == b[2]){ if (a[0] == b[0]){ return (a[1]>b[1]?1:-1); } else { return (a[0]>b[0]?1:-1); } } else { return (a[2]>b[2]?1:-1); } } } ]] });	undefined
editor	string,object	指示編輯類型。當是字符串（string）時則指編輯類型，當是對象（object）時則包含兩個屬性： type：字符串，編輯類型，可能的類型：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 options：對象，編輯類型對應的編輯器選項。	undefined

編輯器（Editor）

通過 $.fn.datagrid.defaults.editors 重寫默認的 defaults。

每個編輯器有下列行為：

名稱	參數	描述
init	container, options	初始化編輯器並且返回目標對象。
destroy	target	如果必要就銷毀編輯器。
getValue	target	從編輯器的文本獲取值。
setValue	target , value	給編輯器設置值。
resize	target , width	如果必要就調整編輯器的尺寸。

例如，文本編輯器（text editor）定義如下：

1. $.extend($.fn.datagrid.defaults.editors, {
2. text: {
3. init: function(container, options){
4. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
5. return input;
6. },
7. destroy: function(target){
8. $(target).remove();
9. },
10. getValue: function(target){
11. return $(target).val();
12. },
13. setValue: function(target, value){
14. $(target).val(value);
15. },
16. resize: function(target, width){
17. $(target)._outerWidth(width);
18. }
19. }
20. });

數據網格視圖（DataGrid View）

通過 $.fn.datagrid.defaults.view 重寫默認的 defaults。

視圖（view）是一個對象，它告訴數據網格（datagrid）如何呈現行。該對象必須定義下列函數：

名稱	參數	描述
render	target, container, frozen	當數據加載時調用。 target：DOM 對象，數據網格（datagrid）對象。 container：行的容器。 frozen：指示是否呈現凍結容器。
renderFooter	target, container, frozen	這是呈現行腳的選項函數。
renderRow	target, fields, frozen, rowIndex, rowData	這是將會被 render 函數調用的選項函數。
refreshRow	target, rowIndex	定義如何刷新指定的行。
onBeforeRender	target, rows	視圖被呈現前觸發。
onAfterRender	target	視圖被呈現后觸發。

事件

該事件擴展自面板（panel），下面是為數據網格（datagrid）添加的事件。

名稱	參數	描述
onLoadSuccess	data	當數據加載成功時觸發。
onLoadError	none	加載遠程數據發生某些錯誤時觸發。
onBeforeLoad	param	發送加載數據的請求前觸發，如果返回 false 加載動作就會取消。
onClickRow	rowIndex, rowData	當用戶點擊一行時觸發，參數包括： rowIndex：被點擊行的索引，從 0 開始 rowData：被點擊行對應的記錄
onDblClickRow	rowIndex, rowData	當用戶雙擊一行時觸發，參數包括： rowIndex：被雙擊行的索引，從 0 開始 rowData：被雙擊行對應的記錄
onClickCell	rowIndex, field, value	當用戶單擊一個單元格時觸發。
onDblClickCell	rowIndex, field, value	當用戶雙擊一個單元格時觸發。 代碼實例： // when double click a cell, begin editing and make the editor get focus $('#dg').datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } });
onSortColumn	sort, order	當用戶對一列進行排序時觸發，參數包括： sort：排序的列的字段名 order：排序的列的順序
onResizeColumn	field, width	當用戶調整列的尺寸時觸發。
onSelect	rowIndex, rowData	當用戶選中一行時觸發，參數包括： rowIndex：選中行的索引，從 0 開始 rowData：選中行對應的記錄
onUnselect	rowIndex, rowData	當用戶取消選中一行時觸發，參數包括： rowIndex：取消選中行的索引，從 0 開始 rowData：取消選中行對應的記錄
onSelectAll	rows	當用戶選中全部行時觸發。
onUnselectAll	rows	當用戶取消選中全部行時觸發。
onCheck	rowIndex,rowData	當用戶勾選一行時觸發，參數包括： rowIndex：勾選行的索引，從 0 開始 rowData：勾選行對應的記錄 該事件自版本 1.3 起可用。
onUncheck	rowIndex,rowData	當用戶取消勾選一行時觸發，參數包括： rowIndex：取消勾選行的索引，從 0 開始 rowData：取消勾選行對應的記錄 該事件自版本 1.3 起可用。
onCheckAll	rows	當用戶勾選全部行時觸發。該事件自版本 1.3 起可用。
onUncheckAll	rows	當用戶取消勾選全部行時觸發。該事件自版本 1.3 起可用。
onBeforeEdit	rowIndex, rowData	當用戶開始編輯一行時觸發，參數包括： rowIndex：編輯行的索引，從 0 開始 rowData：編輯行對應的記錄
onAfterEdit	rowIndex, rowData, changes	當用戶完成編輯一行時觸發，參數包括： rowIndex：編輯行的索引，從 0 開始 rowData：編輯行對應的記錄 changes：更改的字段/值對
onCancelEdit	rowIndex, rowData	當用戶取消編輯一行時觸發，參數包括： rowIndex：編輯行的索引，從 0 開始 rowData：編輯行對應的記錄
onHeaderContextMenu	e, field	當數據網格（datagrid）的頭部被右鍵單擊時觸發。
onRowContextMenu	e, rowIndex, rowData	當右鍵點擊行時觸發。

方法

名稱	參數	描述
options	none	返回選項（options）對象。
getPager	none	返回分頁（pager）對象。
getPanel	none	返回面板（panel）對象。
getColumnFields	frozen	返回列的字段，如果 frozen 設置為 true，則凍結列的字段被返回。 代碼實例： var opts = $('#dg').datagrid('getColumnFields'); // get unfrozen columns var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOption	field	返回指定列的選項。
resize	param	調整尺寸和布局。
load	param	加載並顯示第一頁的行，如果指定 'param' 參數，它將替換 queryParams 屬性。通常情況下，通過傳遞一些從參數進行查詢，該方法被調用來從服務器加載新數據。 $('#dg').datagrid('load',{ code: '01', name: 'name01' });
reload	param	重新加載行，就像 load 方法一樣，但是保持在當前頁。
reloadFooter	footer	重新加載底部的行。代碼實例： // update footer row values and then refresh var rows = $('#dg').datagrid('getFooterRows'); rows[0]['name'] = 'new name'; rows[0]['salary'] = 60000; $('#dg').datagrid('reloadFooter');   // update footer rows with new data $('#dg').datagrid('reloadFooter',[ {name: 'name1', salary: 60000}, {name: 'name2', salary: 65000} ]);
loading	none	顯示正在加載狀態。
loaded	none	隱藏正在加載狀態。
fitColumns	none	使列自動展開/折疊以適應數據網格（datagrid）的寬度。
fixColumnSize	field	固定列的尺寸。如果 'field' 參數未設置，所有的列的尺寸將是固定的。 代碼實例： $('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size $('#dg').datagrid('fixColumnSize'); // fix all columns size
fixRowHeight	index	固定指定行的高度。如果 'index' 參數未設置，所有的行的高度將是固定的。
freezeRow	index	凍結指定的行，以便數據網格（datagrid）向下滾動時這些凍結行總是被顯示在頂部。該方法自版本 1.3.2 起可用。
autoSizeColumn	field	調整列的寬度以適應內容。該方法自版本 1.3 起可用。
loadData	data	加載本地數據，舊的行會被移除。
getData	none	返回加載的數據。
getRows	none	返回當前頁的行。
getFooterRows	none	返回底部的行。
getRowIndex	row	返回指定行的索引，row 參數可以是一個行記錄或者一個 id 字段的值。
getChecked	none	返回復選框選中的所有行。該方法自版本 1.3 起可用。
getSelected	none	返回第一個選中的行或者 null。
getSelections	none	返回所有選中的行，當沒有選中的記錄時，將返回空數組。
clearSelections	none	清除所有的選擇。
clearChecked	none	清除所有勾選的行。該方法自版本 1.3.2 起可用。
scrollTo	index	滾動到指定行。該方法自版本 1.3.3 起可用。
highlightRow	index	高亮顯示一行。該方法自版本 1.3.3 起可用。
selectAll	none	選中當前頁所有的行。
unselectAll	none	取消選中當前頁所有的行。
selectRow	index	選中一行，行索引從 0 開始。
selectRecord	idValue	通過傳遞 id 的值做參數選中一行。
unselectRow	index	取消選中一行。
checkAll	none	勾選當前頁所有的行。該方法自版本 1.3 起可用。
uncheckAll	none	取消勾選當前頁所有的行。該方法自版本 1.3 起可用。
checkRow	index	勾選一行，行索引從 0 開始。該方法自版本 1.3 起可用。
uncheckRow	index	取消勾選一行，行索引從 0 開始。該方法自版本 1.3 起可用。
beginEdit	index	開始對一行進行編輯。
endEdit	index	結束對一行進行編輯。
cancelEdit	index	取消對一行進行編輯。
getEditors	index	獲取指定行的編輯器。每個編輯器有下列屬性： actions：編輯器能做的動作，與編輯器定義相同。 target：目標編輯器的 jQuery 對象。 field：字段名。 type：編輯器的類型，比如：'text'、'combobox'、'datebox'，等等。
getEditor	options	獲取指定的編輯器， options 參數包含兩個屬性： index：行的索引。 field：字段名。 代碼實例： // get the datebox editor and change its value var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012');
refreshRow	index	刷新一行。
validateRow	index	驗證指定的行，有效時返回 true。
updateRow	param	更新指定的行， param 參數包括下列屬性： index：要更新的行的索引。 row：新的行數據。 代碼實例： $('#dg').datagrid('updateRow',{ index: 2, row: { name: 'new name', note: 'new note message' } });
appendRow	row	追加一個新行。新的行將被添加在最后的位置： $('#dg').datagrid('appendRow',{ name: 'new name', age: 30, note: 'some messages' });
insertRow	param	插入一個新行， param 參數包括下列屬性： index：插入進去的行的索引，如果沒有定義，就追加該新行。 row：行的數據。 代碼實例： // insert a new row at second row position $('#dg').datagrid('insertRow',{ index: 1, // index start with 0 row: { name: 'new name', age: 30, note: 'some messages' } });
deleteRow	index	刪除一行。
getChanges	type	獲取最后一次提交以來更改的行，type 參數表示更改的行的類型，可能的值是：inserted、deleted、updated，等等。當 type 參數沒有分配時，返回所有改變的行。
acceptChanges	none	提交自從被加載以來或最后一次調用 acceptChanges 以來所有更改的數據。
rejectChanges	none	回滾自從創建以來或最后一次調用 acceptChanges 以來所有更改的數據。
mergeCells	options	把一些單元格合並為一個單元格，options 參數包括下列特性： index：列的索引。 field：字段名。 rowspan：合並跨越的行數。 colspan：合並跨越的列數。
showColumn	field	顯示指定的列。
hideColumn	field	隱藏指定的列。

EasyUI Propertygrid 屬性網格

擴展自 $.fn.datagrid.defaults。通過 $.fn.propertygrid.defaults 重寫默認的 defaults。

屬性網格（propertygrid）為用戶提供李露蘭和編輯屬性的接口。屬性網格是內聯編輯的數據網格。它相當容易使用。用戶可以很容易就創建一個可編輯屬性的分層列表和表示任何數據類型的項目。屬性網格帶有內置的排序和分組特征。

依賴

• datagrid

用法

在標記中創建一個屬性網格（propertygrid）。請注意，列是內置的，不需要再次聲明。

<table id="pg" class="easyui-propertygrid" style="width:300px"
    data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

使用 javascript 創建一個屬性網格（propertygrid）。

<table id="pg" style="width:300px"></table>

$('#pg').propertygrid({
    url: 'get_data.php',
    showGroup: true,
    scrollbarSize: 0
});

向屬性網格（propertygrid）追加一個新行。

var row = {
    name:'AddName',
    value:'',
    group:'Marketing Settings',
    editor:'text'
};
$('#pg').propertygrid('appendRow',row);

行數據（Row Data）

屬性網格（propertygrid）擴展自數據網格（datagrid）。它的行數據格式與數據網格（datagrid）相同。作為一個屬性行，下列字段是必需的：
name：字段名。
value：要被編輯的字段值。
group：組的字段值。
editor：編輯屬性值的編輯器。

行數據實例：

{"total":4,"rows":[
    {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
    {"name":"Address","value":"","group":"ID Settings","editor":"text"},
    {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
    {"name":"Email","value":"[e-mail]","group":"Marketing Settings","editor":{
        "type":"validatebox",
        "options":{
            "validType":"email"
        }
    }}
]}

屬性

該屬性擴展自數據網格（datagrid）。下面是為屬性網格（propertygrid）添加的屬性。

名稱	類型	描述	默認值
showGroup	boolean	定義是否顯示屬性組。	false
groupField	string	定義組的字段名。	group
groupFormatter	function(group,rows)	定義如何格式化組的值。該函數包括下列參數： group：組的字段名。 rows：屬於改組的行。

方法

該方法擴展自數據網格（datagrid）。下面是為屬性網格（propertygrid）添加的方法。

名稱	參數	描述
expandGroup	groupIndex	展開指定的組。如果 'groupIndex' 參數未分配，則展開所有的組。
collapseGroup	groupIndex	折疊指定的組。如果 'groupIndex' 參數未分配，則折疊所有的組。

EasyUI Tree 樹

通過 $.fn.tree.defaults 重寫默認的 defaults。

樹（tree）在網頁中以樹形結構顯示分層數據。它向用戶提供展開、折疊、拖拽、編輯和異步加載功能。

依賴

• draggable
• droppable

用法

樹（tree）定義在 <ul> 元素中。該標記可定義葉節點和子節點。節點將是 ul 列表內的 <li> 元素。下面演示了將被用於制作嵌套在 ul 元素內的樹節點的元素。

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>

樹（Tree）也可以在一個空的 <ul> 元素中定義，可使用 javascript 加載數據。

<ul id="tt"></ul>

$('#tt').tree({
    url:'tree_data.json'
});

使用 loadFilter 來處理來自 ASP.NET web 服務的 json 數據。

$('#tt').tree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

樹的數據格式（Tree Data Format）

每個節點可以包括下列屬性：

• id：節點的 id，它對於加載遠程數據很重要。
• text：要顯示的節點文本。
• state：節點狀態，'open' 或 'closed'，默認是 'open'。當設置為 'closed' 時，該節點有子節點，並且將從遠程站點加載它們。
• checked：指示節點是否被選中。
• attributes：給一個節點添加的自定義屬性。
• children：定義了一些子節點的節點數組。

實例：

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

異步樹

樹支持內置的異步加載模式，因此用戶可以創建一個空的樹，然后指定一個動態返回 JSON 數據的服務器端，用於根據需求異步填充樹。下面是一個實例：

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

樹是通過 URL 'get_data.php' 加載的。子節點依賴於父節點狀態被加載。當展開一個關閉的節點時，如果該節點沒有子節點加載，它將通過上面定義的 URL 向服務器發送節點的 id 值作為名為 'id' 的 http 請求參數，以便檢索子節點。

請看從服務器返回的數據：

[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

節點 1 和節點 2 是關閉的，當展開節點 1 時，將直接展示它的子節點。當展開節點 2 時，將向服務器發送 value(2) 以便檢索子節點。

本教程中的 創建異步樹 演示了如何編寫服務器代碼來根據需求返回樹的數據。

屬性

名稱	類型	描述	默認值
url	string	獲取遠程數據的 URL 。	null
method	string	檢索數據的 http 方法（method）。	post
animate	boolean	定義當節點展開折疊時是否顯示動畫效果。	false
checkbox	boolean	定義是否在每個節點前邊顯示復選框。	false
cascadeCheck	boolean	定義是否級聯檢查。	true
onlyLeafCheck	boolean	定義是否只在葉節點前顯示復選框。	false
lines	boolean	定義是否顯示樹線條。	false
dnd	boolean	定義是否啟用拖放。	false
data	array	要加載的節點數據。 $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }] });	null
formatter	function(node)	定義如何呈現節點文本。 代碼實例： $('#tt').tree({ formatter:function(node){ return node.text; } });
loader	function(param,success,error)	定義如何從遠程服務器加載數據。返回 false 則取消該動作。該函數有下列參數： param：要傳遞到遠程服務器的參數對象。 success(data)：當檢索數據成功時調用的回調函數。 error()：當檢索數據失敗時調用的回調函數。	json loader
loadFilter	function(data,parent)	返回要顯示的過濾數據。返回數據時以標准樹格式返回的。該函數有下列參數： data：要加載的原始數據。 parent：DOM 對象，表示父節點。

事件

很多事件的回調函數需要 'node' 參數，它包括下列屬性：

• id：綁定到節點的標識值。
• text：要顯示的文本。
• iconCls：用來顯示圖標的 css class。
• checked：節點是否被選中。
• state：節點狀態，'open' 或 'closed'。
• attributes：綁定到節點的自定義屬性。
• target：目標的 DOM 對象。

名稱	參數	描述
onClick	node	當用戶點擊一個節點時觸發。代碼實例： $('#tt').tree({ onClick: function(node){ alert(node.text); // alert node text property when clicked } });
onDblClick	node	當用戶雙擊一個節點時觸發。
onBeforeLoad	node, param	當加載數據的請求發出前觸發，返回 false 則取消加載動作。
onLoadSuccess	node, data	當數據加載成功時觸發。
onLoadError	arguments	當數據加載失敗時觸發，arguments 參數與 jQuery.ajax 的 'error' 函數一樣。
onBeforeExpand	node	節點展開前觸發，返回 false 則取消展開動作。
onExpand	node	當節點展開時觸發。
onBeforeCollapse	node	節點折疊前觸發，返回 false 則取消折疊動作。
onCollapse	node	當節點折疊時觸發。
onBeforeCheck	node, checked	當用戶點擊復選框前觸發，返回 false 則取消該選中動作。該事件自版本 1.3.1 起可用。
onCheck	node, checked	當用戶點擊復選框時觸發。
onBeforeSelect	node	節點被選中前觸發，返回 false 則取消選擇動作。
onSelect	node	當節點被選中時觸發。
onContextMenu	e, node	當右鍵點擊節點時觸發。代碼實例： // right click node and then display the context menu $('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // select the node $('#tt').tree('select', node.target); // display context menu $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } });   // the context menu is defined as below: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div> </div>
onBeforeDrag	node	當節點的拖拽開始時觸發，返回 false 則禁止拖拽。該事件自版本 1.3.2 起可用。
onStartDrag	node	當開始拖拽節點時觸發。該事件自版本 1.3.2 起可用。
onStopDrag	node	當停止拖拽節點時觸發。該事件自版本 1.3.2 起可用。
onDragEnter	target, source	當節點被拖拽進入某個允許放置的目標節點時觸發，返回 false 則禁止放置。 target：被放置的目標節點元素。 source：被拖拽的源節點。 該事件自版本 1.3.2 起可用。
onDragOver	target, source	當節點被拖拽到允許放置的目標節點上時觸發，返回 false 則禁止放置。 target：被放置的目標節點元素。 source：被拖拽的源節點。 該事件自版本 1.3.2 起可用。
onDragLeave	target, source	當節點被拖拽離開允許放置的目標節點時觸發。 target：被放置的目標節點元素。 source：被拖拽的源節點。 該事件自版本 1.3.2 起可用。
onBeforeDrop	target,source,point	節點被放置之前觸發，返回 false 則禁止放置。 target：DOM 對象，放置的目標節點。 source：源節點。 point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。 該事件自版本 1.3.2 起可用。
onDrop	target,source,point	當節點被放置時觸發。 target：DOM 對象，放置的目標節點。 source：源節點。 point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。
onBeforeEdit	node	編輯節點前觸發。
onAfterEdit	node	編輯節點后觸發。
onCancelEdit	node	當取消編輯動作時觸發。

方法

名稱	參數	描述
options	none	返回樹的選項（options）。
loadData	data	加載樹的數據。
getNode	target	獲取指定的節點對象。
getData	target	獲取指定的節點數據，包括它的子節點。
reload	target	重新加載樹的數據。
getRoot	none	獲取根節點，返回節點對象。
getRoots	none	獲取根節點，返回節點數組。
getParent	target	獲取父節點，target 參數表示節點的 DOM 對象。
getChildren	target	獲取子節點， target 參數表示節點的 DOM 對象。
getChecked	state	獲取選中的節點。狀態可用值有：'checked'、'unchecked'、'indeterminate'。如果狀態未分配，則返回 'checked' 節點。 代碼實例： var nodes = $('#tt').tree('getChecked'); // get checked nodes var nodes = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes var nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and indeterminate nodes
getSelected	none	獲取選中的節點並返回它，如果沒有選中節點，則返回 null。
isLeaf	target	把指定的節點定義成葉節點，target 參數表示節點的 DOM 對象。
find	id	找到指定的節點並返回該節點對象。代碼實例： // find a node and then select it var node = $('#tt').tree('find', 12); $('#tt').tree('select', node.target);
select	target	選中一個節點，target 參數表示節點的 DOM 對象。
check	target	把指定節點設置為勾選。
uncheck	target	把指定節點設置為未勾選。
collapse	target	折疊一個節點，target 參數表示節點的 DOM 對象。
expand	target	展開一個節點，target 參數表示節點的 DOM 對象。當節點關閉且沒有子節點時，節點的 id 值（名為 'id' 參數）將被發送至服務器以請求子節點數據。
collapseAll	target	折疊所有的節點。
expandAll	target	展開所有的節點。
expandTo	target	從根部展開一個指定的節點。
scrollTo	target	滾動到指定節點。該方法自版本 1.3.4 起可用。
append	param	追加一些子節點到一個父節點，param 參數有兩個屬性： parent：DOM 對象，要追加到的父節點，如果沒有分配，則追加為根節點。 data：數組，節點的數據。 代碼實例： // append some nodes to the selected node var selected = $('#tt').tree('getSelected'); $('#tt').tree('append', { parent: selected.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }] });
toggle	target	切換節點的展開/折疊狀態，target 參數表示節點的 DOM 對象。
insert	param	在指定節點的前邊或后邊插入一個節點，param 參數包括下列屬性： before：DOM 對象，前邊插入的節點。 after：DOM 對象，后邊插入的節點。 data：對象，節點數據。 下面的代碼演示了如何在選中節點之前插入一個新的節點： var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } }); }
remove	target	移除一個節點和它的子節點，target 參數表示節點的 DOM 對象。
pop	target	彈出一個節點和它的子節點，該方法和 remove 一樣，但是返回了移除的節點數據。
update	param	更新指定的節點，'param' 參數有下列屬性： target（DOM 對象，要被更新的節點）、id、text、iconCls、checked，等等。 代碼實例： // update the selected node text var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); }
enableDnd	none	啟用拖放功能。
disableDnd	none	禁用拖放功能。
beginEdit	target	開始編輯節點。
endEdit	target	結束編輯節點。
cancelEdit	target	取消編輯節點。

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：字段名。