基本TreeGrid样本
<!DOCTYPE html>
<html lang="en">
<head>
<title id="Description">TreeGrid displaying JSON data</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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/jqxdatatable.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var employees =
[
{
"EmployeeID": 1,
"FirstName": "Nancy",
"LastName": "Davolio",
"ReportsTo": 2,
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-05-01 00:00:00",
"BirthDate": "1948-12-08 00:00:00",
"City": "Seattle",
"Address": "507 - 20th Ave. E.Apt. 2A"
},
{
"EmployeeID": 2,
"FirstName": "Andrew",
"LastName": "Fuller",
"ReportsTo": null,
"Country": "USA",
"Title": "Vice President, Sales",
"HireDate": "1992-08-14 00:00:00",
"BirthDate": "1952-02-19 00:00:00",
"City": "Tacoma",
"Address": "908 W. Capital Way"
},
{
"EmployeeID": 3,
"FirstName": "Janet",
"LastName": "Leverling",
"ReportsTo": 2,
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-04-01 00:00:00",
"BirthDate": "1963-08-30 00:00:00",
"City": "Kirkland",
"Address": "722 Moss Bay Blvd."
},
{
"EmployeeID": 4,
"FirstName": "Margaret",
"LastName": "Peacock",
"ReportsTo": 2,
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1993-05-03 00:00:00",
"BirthDate": "1937-09-19 00:00:00",
"City": "Redmond",
"Address": "4110 Old Redmond Rd."
},
{
"EmployeeID": 5,
"FirstName": "Steven",
"LastName": "Buchanan",
"ReportsTo": 2,
"Country": "UK",
"Title": "Sales Manager",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1955-03-04 00:00:00",
"City": "London",
"Address": "14 Garrett Hill"
},
{
"EmployeeID": 6,
"FirstName": "Michael",
"LastName": "Suyama",
"ReportsTo": 5,
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1963-07-02 00:00:00",
"City": "London",
"Address": "Coventry House Miner Rd."
},
{
"EmployeeID": 7,
"FirstName": "Robert",
"LastName": "King",
"ReportsTo": 5,
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-01-02 00:00:00",
"BirthDate": "1960-05-29 00:00:00",
"City": "London",
"Address": "Edgeham Hollow Winchester Way"
},
{
"EmployeeID": 8,
"FirstName": "Laura",
"LastName": "Callahan",
"ReportsTo": 2,
"Country": "USA",
"Title": "Inside Sales Coordinator",
"HireDate": "1994-03-05 00:00:00",
"BirthDate": "1958-01-09 00:00:00",
"City": "Seattle",
"Address": "4726 - 11th Ave. N.E."
},
{
"EmployeeID": 9,
"FirstName": "Anne",
"LastName": "Dodsworth",
"ReportsTo": 5,
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-11-15 00:00:00",
"BirthDate": "1966-01-27 00:00:00",
"City": "London",
"Address": "7 Houndstooth Rd."
}
];
// prepare the data
var source =
{
dataType: "json",
dataFields: [
{ name: 'EmployeeID', type: 'number' },
{ name: 'ReportsTo', type: 'number' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Country', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'HireDate', type: 'date' },
{ name: 'BirthDate', type: 'date' }
],
hierarchy:
{
keyDataField: { name: 'EmployeeID' },
parentDataField: { name: 'ReportsTo' }
},
id: 'EmployeeID',
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 500,
source: dataAdapter,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'FirstName', dataField: 'FirstName', width: 150 },
{ text: 'LastName', dataField: 'LastName', width: 150 },
{ text: 'Title', dataField: 'Title', width: 200 }
]
});
});
</script>
</head>
<body class='default'>
<div id="treeGrid">
</div>
</body>
</html>
$(document).ready(function () {
isAll = false;
var source ={
dataType: "json",
dataFields: [
{ name: 'dictCode', type: 'string' },
{ name: 'dictName', type: 'string' },
{ name: 'isEnumeration', type: 'string' },
{ name: 'isType', type: 'string' },
{ name : 'displayNo',type:'number'},
{ name : 'dictId',type:'string'},
{ name : 'enableFlag',type:'string'},
{ name : 'parentDictCode',type:'string'}],
hierarchy:{
keyDataField: { name: 'dictCode' },
parentDataField: { name: 'parentDictCode' }
},
id: 'dictCode',
localData: orgs
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 850,
source: dataAdapter,
filterable: true,
filterMode: 'simple',
checkboxes: true,
sortable: true,
hierarchicalCheckboxes: true,
ready: function()
{
$("#treeGrid").jqxTreeGrid('expandRow', '1');
},
columns: [
{ text: '字典类型名称', dataField: 'dictName'},
{ text: '字典类型编码', dataField: 'dictCode'},
{ text: '排序号', dataField: 'displayNo',
cellsRenderer: function (rowKey, dataField, value, data) {
if (value == null || "" == value) {
return "";
} else {
return value;
}
}},
{ text: '是否启用', dataField: 'enableFlag', width: 150,
cellsRenderer: function (rowKey, dataField, value, data) {
if (value == 0) {
return '<span class="label label-sm label-success arrowed arrowed-in">否</lable>';
} else {
return '<span class="label label-sm label-info arrowed arrowed-right">是</lable>';
}
}
},
{ text: '操作', dataField: 'dictId', width: 350,
cellsRenderer: function (rowKey, dataField, value, data) {
var content = '<button type="button"' + (($("#editAble").val() != undefined && $("#editAble").val() == "true") ? "" : " disabled ") + ' onclick="editForm(\'' + value + '\')" class="btn btn-info btn-sm">编辑</button>';
content+= '<button style="margin-left:10px;" type="button"' + (('' + data.isEnumeration + '' == "true") ? "" : " disabled ") + ' onclick="findEnumeration(\'' + data.dictCode + '\');" class="btn btn-info btn-sm">查看枚举项</button>';
return content;
}
}]
});
$("#treeGrid").jqxTreeGrid('expandAll');
$("#filtertreeGrid .jqx-fill-state-normal").text("搜索");
$(".jqx-widget-header.jqx-grid-toolbar div:first").text("字典类型名称").addClass("search_title");
$("#wrappertreeGrid").parent().addClass("wrappertreeGrid_wrap");
$(".jqx-grid-table tr").each(function(){$(this).find("td:last").addClass("cz");})
});
<script>
var orgs = [];
<c:forEach items="${dictList}" var="res">
var res = {};
res.dictCode = '${res.dictCode}';
res.parentDictCode = '${res.parentDictCode}';
res.dictName = '${res.dictName}';
res.isType = '${res.isType}';
res.displayNo = '${res.displayNo}';
res.enableFlag = '${res.enableFlag}';
res.dictId = '${res.dictId}';
res.isEnumeration = '${res.isEnumeration}';
orgs.push(res)
</c:forEach>
</script>