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/ ...
随机推荐
- VS2015 安装mvc4安装包以及vs2010 sp1后导致Razor语法失效代码不高亮(能正常运行)/视图页面无法智能提示(.cshtml)解决办法
VS2015默认asp.net mvc 版本为5.0以上,默认不支持创建5.0以下的版本.所以想要使用mvc 4.0只能单独安装.在网上搜了几篇教程后在微软官网下载了Visual Studio 201 ...
- 自定义cell的一些知识
1.要往cell里面添加一个自定义的子控件,都是添加到cell的contentView,不是添加到cell里面. 2.通过xib自定义cell * 添加tableView * 加载团购数据 * 新建x ...
- 在ORACLE触发器里调用JAVA程序
因为项目需要,有一个已经写好的Java程序,想要在Oracle某个表的触发器中调用,以使得每次数据更新时,调用这个JAVA程序,来修改后台某个数据. 现将过程记录如下: 1.编写JAVA程序 publ ...
- js-JavaScript高级程序设计学习笔记1
第一章 1.一个完整的JavaScript实现应该由三个不同的部分组成:核心(ECMAScript).文档对象模型(DOM,提供访问和操作网页内容的方法和接口),浏览器对象模型(BOM,提供与浏览器交 ...
- NetLink Communication Mechanism And Netlink Sourcecode Analysis
catalog . Netlink简介 . Netlink Function API Howto . Generic Netlink HOWTO kernel API . RFC Linux Netl ...
- Linux C/C++ Memory Leak Detection Tool
目录 . 内存使用情况分析 . 内存泄漏(memory leak) . Valgrind使用 1. 内存使用情况分析 0x1: 系统总内存的分析 可以从proc目录下的meminfo文件了解到当前系统 ...
- nand以及yaffs2
用的是tiny210+1312的SDK,友善之臂给的文件系统居然有300多兆,烧写系统可是要人命了,那个等啊...所以,想着把系统给做小一点.和其他一样,我的知识仅限于理论阶段,嘿嘿.今天实践一下. ...
- MACOS 答题器，界面跳转
国内OSX开发的资料实在少,甚至连一本开发的书都找不到… 更无语的是,苹果自家的开发文档Sample Code不仅还停留在OC版本,还是MRC的… 在这样的情况下,OSX开发还真得靠“想象力”… 网上 ...
- Unity赛车游戏之移动
这个赛车游戏真是让我费劲脑汁啊.尤其是写这种系统化的东西. 目前漂移还没找到更好的算法,不过基本的移动还是可以做到的. 别看就光是个移动,其实也是很费事的. Unity给了个对于赛车系统很好的碰撞组件 ...
- HTML5学习总结-09 拖放和手机触屏事件
一 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 ht ...