首先附上官方TreeGrid的傳送門:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-getting-started.htm?search=treegrid
根據官方描述、TreeGrid所擁有的功能包括：
展示樹形結構數據(multi column display of hierarchical data);
分頁(data paging);
排序( sorting and filtering);
數據編輯(data editing);
調整列寬( columns resizing);
固定列頭( fixed columns);
數據格式化(conditional formatting);
自帶統計功能(aggregates);
多行選擇(rows selection);
TreeGrid支持多種格式的數據源，包括： XML, JSON, Array, CSV or TSV.
TreeGrid所依賴的文件包括：
<script type="text/javascript" src="/scripts/jquery.js"></script> //主要使用元素選擇器以及事件處理
<script type="text/javascript" src="/jqwidgets/jqxcore.js"></script> //JQWidgets framework 核心代碼
<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script> //source數據源相關代碼
<script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script> //涉及滾動條上的按鈕
<script type="text/javascript" src="/jqwidgets/jqxscrollbar.js"></script> //涉及滾動條以及按鈕
<script type="text/javascript" src="/jqwidgets/jqxlistbox.js"></script> //涉及查詢功能
<script type="text/javascript" src="/jqwidgets/jqxdropdownlist.js"></script> //涉及查詢功能
<script type="text/javascript" src="/jqwidgets/jqxdatatable.js"></script> //treegrid核心代碼
<script type="text/javascript" src="/jqwidgets/jqxtreegrid.js"></script> //treegrid核心代碼
<link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" /> //樣式庫
入門實例：
對一個TreeGrid對象執行任何操作，都是通過jqxTreeGrid函數進行的，下面是個簡單的例子：
<!DOCTYPE>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtreegrid.js"></script>
<body class="ellipsis">
<div>
<div id="treeGrid">
</div>
</div>
<script type="text/javascript">
var localData=[
{id:0,order:1,"class":"301","name":"301班級","expanded": "true",
children:[
{"id":1,"order":1,"class":"301","name":"張雷","age":20,"score":"289","date":"2017-03-14 00:00:00"},
{"id":2,"order":2,"class":"301","name":"張雷1","age":21,"score":"276","date":"2017-03-14 00:00:00"},
{"id":3,"order":3,"class":"301","name":"張雷2","age":24,"score":"266","date":"2017-03-14 00:00:00"},
{"id":4,"order":4,"class":"301","name":"張雷3","age":22,"score":"199","date":"2017-03-14 00:00:00"}
]},
{id:5,order:2,"class":"401","name":"401班級","expanded": "true",
children:[
{"id":6,"order":1,"class":"401","name":"張雷1","age":21,"score":"195","date":"2017-03-14 00:00:00"},
{"id":7,"order":2,"class":"401","name":"張雷2","age":18,"score":"206","date":"2017-03-14 00:00:00"},
{"id":8,"order":3,"class":"401","name":"張雷3","age":19,"score":"234","date":"2017-03-14 00:00:00"}
]},
];
var dataAdapter = {
dataType: "json",
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'order', type: 'number' },
{ name: 'class', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'age', type: 'number' },
{ name: 'score', type: 'number' },
{ name: 'children', type: 'array' },
{ name: 'expanded', type: 'bool' },
{ name: 'date', type: 'date' }
],
hierarchy:
{
root: 'children'
},
id: 'id',
localData: localData
}
$("#treeGrid").jqxTreeGrid(
{
source: dataAdapter,
sortable: true,
columns: [
{ text: 'id', dataField: 'id', width: 100 ,hidden:true},
{ text: '序號', dataField: 'order', width: 50 ,align: 'center',cellsAlign: 'center'},
{ text: '班級', dataField: 'class', width: 100 ,align: 'center',cellsAlign: 'center'},
{ text: '姓名', dataField: 'name', width: 180 ,align: 'center',cellsAlign: 'center'},
{ text: '年齡', dataField: 'age', width: 90, align: 'center', cellsAlign: 'center' },
{ text: '總分', dataField: 'score', width: 80, align: 'center', cellsAlign: 'center' },
{ text: '日期', dataField: 'date', width: 160, align: 'center', cellsAlign: 'center',cellsFormat: "yyyy年MM月dd日" }
]
});
</script>
</body>
</html>
調用方法：
我們可以使用 $("#treeGrid").jqxTreeGrid('selectRow', 1); 來選中某一行
也可以為TreeGrid添加選中事件 $("#treeGrid").on('rowSelect', function (event) { // 得到事件參數 var args = event.args; // 得到行對象 var rowData = args.row; // 得到行id var rowKey = args.key; event.stopPropagation(); //中止事件繼續傳播 });
最終效果：
