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/ ...
随机推荐
- JS 弹窗到右下角
<div id="msg_win" style="display: block; top: 490px; visibility: visible; opacity: ...
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...
- 【hdu 5918】Sequence I（KMP）
给定两个数字序列,求a序列中每隔p个构成的p+1个序列中共能匹配多少个b序列. 例如1 1 2 2 3 3 每隔1个的序列有两个1 2 3 kmp,匹配时每次主串往前p个,枚举1到p为起点. 题目 # ...
- 【matlab】设定C++编译器
在用matlab2016a,运行的代码涉及到C++混编,要用mex把C++代码编译出来. 记得几年前的matlab版本,通过: mex -setup 就可以设定了,选择要使用的编译器(文本的超链接), ...
- Slave2: no datanode to stop（HADOOP_PID_DIR）
HADOOP_PID_DIR 本想在环境变量里设置,在相关文件里直接尹用,但是我想起来那时候的JAVA_HOME都不行,还是一个一个设置吧. 有时候,我们对运行几天或者几个月的hadoop或者hbas ...
- JeeSite环境搭建及运行和打包（master20161117）
涉及的软件: 1.phpStudy(主要用MySql) 2.maven3(用于依赖包,下面我将上传已经下载好所有依赖包的版本,保证运行正常) 具体操作: 0.前言 由于GitHub上的Release版 ...
- Linux VFS Extended Attribute And Access Control Table
catalog . 简介 . 扩展属性 . 访问控制表 . 小结 0. 简介 许多文件系统都提供了一些特性,扩展了VFS层提供的标准功能,虚拟文件系统不可能为所有特性都提供具体的数据结构.超出标准的U ...
- FT232RL变砖之后
FT232RL是个是神奇的片子,说万能可能有些夸张,但是...总之就是FTDIChip这个神奇的公司基于类似的技术,做了很多好用的产品,包括转IIC啦,转SPI啦,密码狗啦之类的.是个很有用的工具就对 ...
- 动态添加和更改F7编辑器(div和editGrid列)
//更改列编辑器 waf("#editGrid").wafGrid("setColumnConfig", "settlementType", ...
- AngularJs $interval 和 $timeout
$interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...