jqGrid treegrid配置

樹形表格用於顯示在jqGrid中顯示分層數據。樹形表格支持嵌套集合模型（ Nested Set model ）和鄰接模型（Adjacency model）。描述嵌套集合模型的相關文章推薦

• http://ftp.ntu.edu.tw/MySQL/tech-resources/articles/hierarchical-data.html
• http://www.sitepoint.com/article/hierarchical-data-database
• 分層數據管理-嵌套集合模型
• 分層數據管理-臨界表模型

安裝

　　要使用這個方法，須要在下載頁面勾選Treegrid後再下載jqGrid，下載地址：http://www.trirand.com/blog/?page_id=6。源文件grid.treegrid.js在src目錄中。

再使用屬性表格以前，強烈建議先閱讀本文內容和相關分層數據顯示的文章。

Options

下面爲在jqGrid中配置的選項，用於配置樹形表格

Option	Type	Description	Default
ExpandColClick	boolean	設置爲true，點擊行時將會展開/收縮屬性表格，而不只限於點擊圖標	true
ExpandColumn	string	指定哪列（colModel中的name配置值）用於展開屬性表格。不設置則默認第一列，treeGrid配置爲true時有效	null
treedatatype	mixed	定義初始化數據類型（參考：datatype），通常不須要配置，使用配置的datatype屬性	null
treeGrid	boolean	是否啓用樹形表格	false
treeGridModel	string	決定樹形表格可以使用的方法，可用值有nested 或者adjacency.	nested
treeIcons	array	設置屬性表格使用的圖標，須要爲UI主題中定義的有效值圖像。默認值爲： {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}
treeReader	array	擴展父表格定義的colModel。這裏定義的字段添加到colModel最後而且是隱藏的，因此須要服務器返回的數據中也要包含這裏定義的字段。查看下面獲取有哪些可用值
tree_root_level	numeric	定義根元素開始的層次。（Determines the level where the root element begins when treeGrid is enabled）	0

若是jqGrid配置了gridview爲true，樹形表格不會被構造。（If the gridview option in the grid is set to true the treeGrid will not be constructed instead that set to true.）（不太明白這句表達什麼）

　　treeReader動態的想colModel中添加列（treeGrid要設置爲true）

－收縮JavaScript代碼

treeReader : {
   property1 : value1
   ...
   propertyN : valueN
}

　　treeReader依據treeGridModel的值，想colModel中添加不一樣的列，既不一樣的方法須要有不一樣的配置，參考： Nested Set Model and Adjacency Model。當前的jqGrid只能從服務器加載數據。下面介紹一些技巧如何使用本地數據（local data）。

須要特別注意，從服務器返回的數據須要以適當的方式排序過，例如

－收縮SQL代碼

SELECT category_name, level, lft, rgt FROM categories ORDER BY lft;

方法

下面的方法中，record表明當前記錄，經過getInd方法獲取

－收縮JavaScript代碼

var record = jQuery("#grid_id").getInd(rowid,true);

備註：3.7.x+版本不在使用此方法，改用var record = jQuery(」#grid_id」).getRowData(rowid);來替代

• rowid爲數據行id。
• 注意此方法第二個參，設置爲false（默認）或者未傳遞，返回值爲行的索引（ returned value is the index of the row）。設置爲true返回DOM對象（TR，是否被jQuery包裝過沒測試），找不到對應的行返回false。

方法名稱	參數	描述
addChildNode	nodeid, parentid, data	參考parentid值向樹中添加節點。nodeid爲數據行中惟一值。若是設置爲空字符串，此方法從數據中獲取下一個最大數值+1（If set to empty string the method gets the next max number + 1 from the data）。若是parentid爲null，增長的節點做爲根節點。parentid爲當前顯示某數據行的id，參數data將添加到這行做爲子元素。data爲須要插入的數據（Data is a data to be inserted.）
collapseNode	record	收縮指定記錄的節點。（Collapse the node at specified record）
collapseRow	record	收縮指定記錄（的樹形表格）（Collapse the current row）
delTreeNode	rowid	刪除rowid指定節點及全部子節點，rowid爲數據行id。此方法不會從服務器上刪除節點
expandNode	record	展開指定記錄節點
expandRow	record	展開指定記錄（的樹形表格）Expand the current row
getNodeAncestors	record	以數組形式返回指定記錄的全部祖先
getNodeParent	record	返回指定記錄的父節點
getNodeChildren	record	以數組形式返回指定個記錄的子節點，沒有子節點返回空數組
getRootNodes	none	以數組形式返回當前根節點
isNodeLoaded	record	判斷指定記錄節點是否已經加載（返回true表示已經加載）
isVisibleNode	record	返回true/false指示指定記錄節點是否可見
setTreeRow	rowid, data	和setRowData同樣
SortTree	direction	爲1（升序）或者-1（降序）。經過sortname（jqGrid中的配置）對樹排序

注意事項和限制

• 目前不支持經過addRowData添加節點

• 目前不建議使用樹形表格時聯合使用行編輯和表單編輯，不然展開的列不可編輯

• 目前不支持（一次？）添加多個節點

• Pager 功能在使用樹形控件時被禁用

• 父表格初始化讀取數據後，datatype配置自動變爲local。由於樹形表格支持自動加載樹節點。就是說，爲了速度或者效率，你能夠首先只加載根節點，當點擊展開須要展開子節點時才加載子節點數據。父表格是否存在子節點數據，不存在才從服務器加載，所以當請求服務器時須要傳遞附加參數。設置datatype爲local，是爲了干預在發送的請求前，正確建立請求（Setting datatype to local permits intervening before the request is made to build the request correctly）。查看嵌套集合模型（ Nested Set model ）和 鄰接模型（Adjacency model）瞭解什麼內容將提交到服務器。

 

來源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid