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/ ...
随机推荐
- Visual Studio Code 添加设置代码段(snippet)
从VSCode发布以来就在关注,最近已经更新到版本0.10.8,已经支持了插件功能.日常使用编辑器已经由Sublime Text迁移到了VSCode.使用中遇到了这个问题,在网上也没搜到解决方案.记录 ...
- vim——打开多个文件、同时显示多个文件、在文件之间切换
打开多个文件: 1.vim还没有启动的时候: 在终端里输入 vim file1 file2 ... filen便可以打开所有想要打开的文件 2.vim已经启动 输入 :open file 可以再打开 ...
- JS 打印功能代码可实现打印预览、打印设置等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- MyEclipse项目上有个感叹号
如图: 然后把有叉的选项移除就可以了
- js-JavaScript高级程序设计学习笔记12
第十五章 使用canvas绘图 1.要使用<canvas>元素,必须先设置其width和height属性. 2.要在这块画布上绘图,需要先取得绘图上下文,取得绘图上下文对象的引用,需要调用 ...
- 深入了解asp.net框架。生命周期以及事件处理机制
刚接触asp.net框架觉得很好奇.他的快速开发是怎么实现的.控件的状态又是怎么保持的.我们都知道http是无状态的.而且网上很多人都说使用asp.net框架使用服务器框架是非常慢的. 带着这些疑问我 ...
- codeforces 723F ： st-Spanning Tree
Description There are n cities and m two-way roads in Berland, each road connects two cities. It is ...
- osquery An Operating System Instrumentation Framewor
catalog . Getting Started . install guide for OS X and Linux . Features Overview . Logging . query e ...
- CF 208A Dubstep(简单字符串处理）
题目链接: 传送门 Dubstep Time Limit: 1000MS Memory Limit: 32768 KB Description Vasya works as a DJ in t ...
- Mac配置一些开发环境（随时补充）
Mac安装mysql并启动 brew install mysql mysql.server start /usr/local/Cellar/mysql/5.6.10/support-files/mys ...