【原创】JQWidgets-TreeGrid 1、快速入门
首先附上官方TreeGrid的传送门:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-getting-started.htm?search=treegrid
根据官方描述、TreeGrid所拥有的功能包括：
展示树形结构数据(multi column display of hierarchical data);
分页(data paging);
排序( sorting and filtering);
数据编辑(data editing);
调整列宽( columns resizing);
固定列头( fixed columns);
数据格式化(conditional formatting);
自带统计功能(aggregates);
多行选择(rows selection);
TreeGrid支持多种格式的数据源，包括： XML, JSON, Array, CSV or TSV.
TreeGrid所依赖的文件包括：
<script type="text/javascript" src="/scripts/jquery.js"></script> //主要使用元素选择器以及事件处理
<script type="text/javascript" src="/jqwidgets/jqxcore.js"></script> //JQWidgets framework 核心代码
<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script> //source数据源相关代码
<script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script> //涉及滚动条上的按钮
<script type="text/javascript" src="/jqwidgets/jqxscrollbar.js"></script> //涉及滚动条以及按钮
<script type="text/javascript" src="/jqwidgets/jqxlistbox.js"></script> //涉及查询功能
<script type="text/javascript" src="/jqwidgets/jqxdropdownlist.js"></script> //涉及查询功能
<script type="text/javascript" src="/jqwidgets/jqxdatatable.js"></script> //treegrid核心代码
<script type="text/javascript" src="/jqwidgets/jqxtreegrid.js"></script> //treegrid核心代码 <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" /> //样式库 入门实例：
对一个TreeGrid对象执行任何操作，都是通过jqxTreeGrid函数进行的，下面是个简单的例子：
<!DOCTYPE>
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="jquery-1.11.2.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/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtreegrid.js"></script> <body class="ellipsis">
<div>
<div id="treeGrid">
</div> </div>
<script type="text/javascript"> var localData=[
{id:0,order:1,"class":"301","name":"301班级","expanded": "true",
children:[
{"id":1,"order":1,"class":"301","name":"张雷","age":20,"score":"289","date":"2017-03-14 00:00:00"},
{"id":2,"order":2,"class":"301","name":"张雷1","age":21,"score":"276","date":"2017-03-14 00:00:00"},
{"id":3,"order":3,"class":"301","name":"张雷2","age":24,"score":"266","date":"2017-03-14 00:00:00"},
{"id":4,"order":4,"class":"301","name":"张雷3","age":22,"score":"199","date":"2017-03-14 00:00:00"}
]},
{id:5,order:2,"class":"401","name":"401班级","expanded": "true",
children:[
{"id":6,"order":1,"class":"401","name":"张雷1","age":21,"score":"195","date":"2017-03-14 00:00:00"},
{"id":7,"order":2,"class":"401","name":"张雷2","age":18,"score":"206","date":"2017-03-14 00:00:00"},
{"id":8,"order":3,"class":"401","name":"张雷3","age":19,"score":"234","date":"2017-03-14 00:00:00"}
]}, ]; var dataAdapter = {
dataType: "json",
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'order', type: 'number' },
{ name: 'class', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'age', type: 'number' },
{ name: 'score', type: 'number' },
{ name: 'children', type: 'array' },
{ name: 'expanded', type: 'bool' },
{ name: 'date', type: 'date' }
],
hierarchy:
{
root: 'children'
},
id: 'id',
localData: localData
} $("#treeGrid").jqxTreeGrid(
{
source: dataAdapter,
sortable: true,
columns: [
{ text: 'id', dataField: 'id', width: 100 ,hidden:true},
{ text: '序号', dataField: 'order', width: 50 ,align: 'center',cellsAlign: 'center'},
{ text: '班级', dataField: 'class', width: 100 ,align: 'center',cellsAlign: 'center'},
{ text: '姓名', dataField: 'name', width: 180 ,align: 'center',cellsAlign: 'center'},
{ text: '年龄', dataField: 'age', width: 90, align: 'center', cellsAlign: 'center' },
{ text: '总分', dataField: 'score', width: 80, align: 'center', cellsAlign: 'center' },
{ text: '日期', dataField: 'date', width: 160, align: 'center', cellsAlign: 'center',cellsFormat: "yyyy年MM月dd日" }
]
}); </script>
</body>
</html>
调用方法：
我们可以使用 $("#treeGrid").jqxTreeGrid('selectRow', 1); 来选中某一行
也可以为TreeGrid添加选中事件 $("#treeGrid").on('rowSelect', function (event) {
// 得到事件参数
var args = event.args;
// 得到行对象
var rowData = args.row;
// 得到行id
var rowKey = args.key;
event.stopPropagation(); //中止事件继续传播
});
最终效果：
【原创】JQWidgets-TreeGrid 1、快速入门的更多相关文章
- 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)
[原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...
- html5快速入门（一）—— html简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- SpringMvc_快速入门,深入分析
目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...
- Spring MVC 教程,快速入门,深入分析
http://elf8848.iteye.com/blog/875830/ Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: ...
- Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
- 基于PHP的cURL快速入门
cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性,以及在PHP中如 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- php随笔3-thinkphp 学习-ThinkPHP3.1快速入门（1）基础
ThinkPHP3.1快速入门(1)基础 简介 ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发 框架,遵循Apache2开源协议发布,从诞生以来一直秉承简洁实用的设计原则,在 ...
- lex与yacc快速入门
lex与yacc快速入门 [原创] 声明:原创文章,转载注明出处http://www.cnblogs.com/lucasysfeng/ 联系作者:lucasysfeng@gmail.com 第一节.l ...
- Gradle 1.12 翻译——第九章 Groovy快速入门
由于时间关系,没办法同时做笔记和翻译,关于Gradle的用户指南,本博客不再做相关笔记,而只对未翻译章节进行翻译并在此发表. 有关其他已翻译的章节请关注Github上的项目:https://githu ...
随机推荐
- unity插件开发——MenuItem
有unity中的菜单栏是我们经常使用到的地方,如下图: MenuItem的作用就是增加一个自己的菜单 使用方法: 在工程中Assets目录下任意一个Editor目录(以后简称Editor目录,如果不存 ...
- git团队合作开发流程
关于git的环境配置在以前已说过就不罗索了,这里介绍在公司如何团队一起开发项目 首先你需要把你的秘钥给管理员,如何配置以前介绍过了就不说了 进入正题:git ls-files查看当前厂库被add得所有 ...
- String 类的实现（1）浅拷贝存在的问题
浅拷贝 : 也称位拷贝 , 编译器只是直接将指针的值拷贝过来, 结果多个对象共用 同 一块内 存, 当一个对象将这块内 存释放掉之后, 另 一些对象不知道该块空间 已经还给了 系 统, 以 为还有效, ...
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- webpack2.x基础属性讲解(一)
webpack作为构建工具平时作为前端作为优化.模块编程.和分片打包的重要组成部分,大家可能并不陌生,如果没有时刻的去关注文档,那么大家可能不太清楚webpack已经默默然的升级到2.x了,对比1 ...
- 【Egret】里使用iframe标签达到内嵌多个web界面
目的:Egret里使用iframe标签达到内嵌多个web界面,模式相当于主swf调用N个子swf的效果: 目前在做项目过程中,在使用iframe的时候,碰到了一些功能需求,以及解决方法如下: 一..在 ...
- MapReduce处理流程
MapReduce是Hadoop2.x的一个计算框架,利用分治的思想,将一个计算量很大的作业分给很多个任务,每个任务完成其中的一小部分,然后再将结果合并到一起.将任务分开处理的过程为map阶段,将每个 ...
- Node.js系列：Buffer类的使用
客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- python——面向对象基础
概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初学 ...