【原創】JQWidgets-TreeGrid 一、快速入門

時間 2019-12-20

標籤原創 jqwidgets treegrid 快速入門简体版

原文原文鏈接

首先附上官方TreeGrid的傳送門:javascript

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-getting-started.htm?search=treegridcss

根據官方描述、TreeGrid所擁有的功能包括： html

　　　　展現樹形結構數據(multi column display of hierarchical data);java

　　　　分頁(data paging);jquery

　　　　排序( sorting and filtering);json

　　　　數據編輯(data editing);函數

　　　　調整列寬( columns resizing);ui

　　　　固定列頭( fixed columns);spa

　　　　數據格式化(conditional formatting);code

　　　　自帶統計功能(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();  //停止事件繼續傳播 });

最終效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。