首先附上官方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、快速入门的更多相关文章

  1. 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)

    [原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...

  2. html5快速入门（一）—— html简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  3. SpringMvc_快速入门,深入分析

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  4. Spring MVC 教程,快速入门,深入分析

    http://elf8848.iteye.com/blog/875830/ Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: ...

  5. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  6. 基于PHP的cURL快速入门

    cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性,以及在PHP中如 ...

  7. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  8. php随笔3-thinkphp 学习-ThinkPHP3.1快速入门（1）基础

    ThinkPHP3.1快速入门(1)基础 简介 ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发 框架,遵循Apache2开源协议发布,从诞生以来一直秉承简洁实用的设计原则,在 ...

  9. lex与yacc快速入门

    lex与yacc快速入门 [原创] 声明:原创文章,转载注明出处http://www.cnblogs.com/lucasysfeng/ 联系作者:lucasysfeng@gmail.com 第一节.l ...

  10. Gradle 1.12 翻译——第九章 Groovy快速入门

    由于时间关系,没办法同时做笔记和翻译,关于Gradle的用户指南,本博客不再做相关笔记,而只对未翻译章节进行翻译并在此发表. 有关其他已翻译的章节请关注Github上的项目:https://githu ...

随机推荐

  1. Linux shell指令运行的原理

    shell是一种命令行解释器 对于一般用户,我们不能直接使用操作系统(kernel).而是通过 kernel的"外壳"程序,也就是所谓的shell,来与kernel沟通.    为 ...

  2. insmod: can't insert 'led.ko': invalid module format详细解释

    insmod: can't insert 'led.ko': invalid module format 之前在Imx257学习版固件编写的驱动想直接移植imx257核心板的开发板上.以为2个板子的源 ...

  3. 手机自动化测试：appium源码分析之bootstrap十五

    手机自动化测试:appium源码分析之bootstrap十五   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  4. BZOJ2818 与 BZOJ2301【euler，线性筛，莫比乌斯】

    题目大意: 给一个范围[1,n],从中找出两个数x,y,使得gcd(x,y)为质数,问有多少对(x,y有序) 解法: 不难,欧拉函数练手题,可以定义集合P ={x|x为素数},那么我们枚举gcd(x, ...

  5. Python练习册 第 0013 题： 用 Python 写一个爬图片的程序，爬 这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)

    这道题是一道爬虫练习题,需要爬链接http://tieba.baidu.com/p/2166231880里的所有妹子图片,点进链接看一下,这位妹子是日本著名性感女演员--杉本由美,^_^好漂亮啊,赶紧 ...

  6. 在Centos中yum安装和卸载软件的使用方法

    安装一个软件时 yum -y install httpd 安装多个相类似的软件时 yum -y install httpd* 安装多个非类似软件时 yum -y install httpd php p ...

  7. Sitemesh 3 配置和使用(最新)

    Sitemesh 3 配置和使用(最新) 一 Sitemesh简介 Sitemesh是一个页面装饰器,可以快速的创建有统一外观Web应用 -- 导航 加 布局 的统一方案~ Sitemesh可以拦截任 ...

  8. 通过一个小游戏开始接触Python！

    之前就一直嚷嚷着要找视频看学习Python,可是一直拖到今晚才开始....好好加油吧骚年,坚持不一定就能有好的结果,但是不坚持就一定是不好的!! 看着视频学习1: 首先,打开IDLE,在IDLE中新建 ...

  9. 一文搞定FastDFS分布式文件系统配置与部署

    Ubuntu下FastDFS分布式文件系统配置与部署 白宁超 2017年4月15日09:11:52 摘要: FastDFS是一个开源的轻量级分布式文件系统,功能包括:文件存储.文件同步.文件访问(文件 ...

  10. Java设计模式：桥接模式

    问题提出 生活中有很多事物集合,设为A1,A2......Am ,而每个事物都有功能F1,F2....Fn. 例如邮局的发送业务.简单模拟有两类事物:信件和包裹,均有平邮和挂号邮寄功能.程序设计中如何 ...