首先附上官方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所依赖的文件包括：

　　

 //主要使用元素选择器以及事件处理

  //JQWidgets framework 核心代码 

 //source数据源相关代码

  //涉及滚动条上的按钮

  //涉及滚动条以及按钮

  //涉及查询功能

 //涉及查询功能

  //treegrid核心代码

 //treegrid核心代码 
     //样式库 入门实例：

 　　　　对一个TreeGrid对象执行任何操作，都是通过jqxTreeGrid函数进行的，下面是个简单的例子：

 

　　

 调用方法：

　　　我们可以使用 $("#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(); //中止事件继续传播 });

 最终效果：