jQuery EasyUI，TreeGrid(樹形表格)組件
學習要點：
1.加載方式
2.屬性列表
3.事件列表
4.方法列表
本節課重點了解 EasyUI 中 TreeGrid(樹形表格)組件的使用方法，這個組件依賴於 DataGrid(數據表格)組件。
一．加載方式
建立一個 JSON 文件
[ { "id": 1, "name": "系統管理", "date": "2015-05-10", "children": [ { "id": 2, "name": "主機信息", "date": "2015-05-11" } ] }, { "id": 3, "name": "會員管理", "date": "2015-05-10", "children": [ { "id": 4, "name": "認證審核", "date": "2015-05-11" } ] } ]
class 加載方式
<table class="easyui-treegrid" style="width:380px;height:150px" data-options="url:'property.json',idField:'id',treeField:'name'"> <thead> <tr> <th data-options="field:'name',width:180">菜單名稱</th> <th data-options="field:'date',width:180">創建時間</th> </tr> </thead> </table>
JS 加載方式
treegrid()將一個table元素執行TreeGrid(樹形表格)組件
<table id="box" style="width:380px;height:150px;"></table>
$(function () { $('#box').treegrid({ url: 'property.json', idField: 'id', //定義關鍵字段來標識樹節點。也就是數據的id treeField: 'name', //定義樹形顯示字段 columns: [[ //定義表格頭名稱 { title: '菜單名稱', field: 'name', width: 180, }, { title: '創建時間', field: 'date', width: 180, } ]], }); });
二．屬性列表
樹形表格擴展自 datagrid(數據表格)，樹形表格新增的屬性如下：
方法和 DataGrid 一致，不在重復！略。
idField string 定義關鍵字段來標識樹節點。（必須的）
treeField string 定義樹節點字段。（必須的）
animate boolean 定義在節點展開或折疊的時候是否顯示動畫效果。
loader function(param,success,error)定義以何種方式從遠程服務器讀取數據。返回false 可以忽略該動作。該函數具有一下參數：param：傳遞到遠程服務器的參數對象。success(data)：當檢索數據成功的時候調用的回調函數。error()：當檢索數據失敗的時候調用的回調函數。
loadFilter function(data,parentId) 返回過濾后的數據進行展示。
方法和 DataGrid 一致，不在重復！略。
三．事件列表
樹形表格的事件擴展自 datagrid(數據表格)，樹形表格新增的時間如下：
事件和 DataGrid 基本一致，代碼演示忽略。
onClickRow row 在用戶點擊節點的時候觸發。
onDblClickRow row 在用戶雙擊節點的時候觸發。
onClickCell field,row 在用戶點擊單元格的時候觸發。
onDblClickCell field,row 在用戶雙擊單元格的時候觸發。
onBeforeLoad row, param在請求數據加載之前觸發，返回 false可以取消加載動作。
onLoadSuccess row, data 數據加載完成之后觸發。
onLoadError arguments數據加載失敗的時候觸發，參數和jQuery 的$.ajax()函數的'error'回調函數一樣。
onBeforeExpand row在節點展開之前觸發，返回 false 可以取消展開節點的動作。
onExpand row 在節點被展開的時候觸發。
onBeforeCollapse row在節點折疊之前觸發，返回 false 可以取消折疊節點的動作。
onCollapse row 在節點被折疊的時候觸發。
onContextMenu e, row 在右鍵點擊節點的時候觸發。
onBeforeEdit row 在用戶開始編輯節點的時候觸發。
onAfterEdit row,changes 在用戶完成編輯的時候觸發。
onCancelEdit row 在用戶取消編輯節點的時候觸發。
事件和 DataGrid 基本一致，代碼演示忽略。
四．方法列表
很多方法都使用'id'命名參數，而'id'參數代表樹節點的值。
方法和 DataGrid 一致，代碼演示忽略。
options none 返回樹形表格的屬性。
resize options設置樹形表格大小，options 包含 2 個屬性：width：樹形表格的新寬度。height：樹形表格的新高度。
fixRowHeight id 修正指定的行高。
load param 讀取並顯示首頁內容。
loadData data 讀取樹形表格數據。
reload id重新加載樹形表格數據。如果'id'屬性有值，將重新載入指定樹形行，否則重新載入所有行。
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：數組，節點數據。
insert param插入一個新節點到指定節點。'param'參數包含一下參數：before：插入指定節點 ID 值之前。after：插入指定節點 ID 值之后。data：新節點數據。
remove id 移除一個節點和他的所有子節點。
pop id 彈出並返回節點數據以及它的子節點之后刪除。
refresh id 刷新指定節點。
update param更新指定節點。'param'參數包含以下屬性：id：要更新的節點的 ID。row：新的行數據。
beginEdit id 開始編輯一個節點。
endEdit id 結束編輯一個節點。
cancelEdit id 取消編輯一個節點。
getEditors id獲取指定行編輯器。每個編輯器都包含以下屬性：actions：編輯器執行的動作。target：目標編輯器的 jQuery 對象。field：字段名稱。type：編輯器類型。
getEditor param獲取指定編輯器，'param'參數包含 2 個屬性：id：行節點 ID。field：字段名稱。
方法和 DataGrid 一致，代碼演示忽略。