jqxTreeGrid
基本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>
jqxTreeGrid的更多相关文章
- Jquery的树插件jqxTreeGrid的使用小结
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
- Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
- 【原创】JQWidgets-TreeGrid 2、初探源码
已知JQWidgets的TreeGrid组件依赖于jqxcore.js.jqxtreegrid.js,实际上它还依赖于jqxdatatable.js.我们先通过一个例子,来探索本次的话题. 需求: 图 ...
- 【原创】JQWidgets-TreeGrid 1、快速入门
首先附上官方TreeGrid的传送门: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/ ...
随机推荐
- 【POJ 1698】Alice's Chance（二分图多重匹配）
http://poj.org/problem?id=1698 电影和日子匹配,电影可以匹配多个日子. 最多有maxw*7个日子. 二分图多重匹配完,检查一下是否每个电影都匹配了要求的日子那么多. #i ...
- 【BZOJ-3931】网络吞吐量 最短路 + 最大流
3931: [CQOI2015]网络吞吐量 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1228 Solved: 524[Submit][Stat ...
- 【BZOJ-3156】防御准备 DP + 斜率优化
3156: 防御准备 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 951 Solved: 446[Submit][Status][Discuss] ...
- 深入解析direct path read (转)
文章转自:http://www.itpub.net/thread-1815281-1-1.html 传统读取数据的方式是服务器进程通过读取磁盘,然后把数据加载到共享内存中,这样后面的进程就可以通过共享 ...
- bestcoder杯回顾
题目列表:hdu5214~5223 5214: 当时第一反应是由递推公式推出通项公式,事实证明这就是作!大!死! 因为通项公式是这样的:L[n]=a^(n-1)*(b+L[1])-b 于是就需要快速幂 ...
- windows下安装使用Composer记录
一直以来都是直接下载类库文件放到项目中使用 Composer是一个PHP依赖管理工具,有了它,就可以对依赖的包进行统一管理,而且在项目中可以实现自动加载 安装和使用composer 下载并且运行 Co ...
- C++ 第一次课堂作业
GitHub链接: 传送门 题目描述 Create a program that asks for the radius of a circle and prints the area of that ...
- 关于win7上内存占用较大的说明
1 Win7系统较XP系统内存占用高: 由于xp系统属于轻量化的系统,而win7系统是一个重量型的系统,在两者的内存管理机制上有很大的区别,根据业界和微软对外的发布公告中可以看到,win7系 ...
- 更改primefaces theme
PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes th ...
- python函数基础
一.基础 函数的定义 def 函数名(参数): ... 函数体 ... 返回值 #如果函数执行完毕也没有return语句时,自动return None. 空函数 如果想定义一个什么事也不做的空函数,可 ...