基于jQuery的TreeGrid组件详解

一、组件使用范例

html代码：

  
  

  
当前选中的行：  
  
   

Js代码:

效果附图：

二、TreeGrid组件相关的类

• 1、TreeGrid(_config)

       _config：json格式的数据，组件所需要的数据都通过该参数提供。
  

• 2、TreeGridItem(_root, _rowId, _rowIndex, _rowData)

       _root：显示组件实例的目标容器对象。
       _rowId：选中行的id。
       _rowIndex：选中行的索引。
       _rowData：json格式的行数据。
  

三、_config参数详解

   id：组件实例的id。
   width：组件实例的宽度。
   renderTo：用于显示组件实例的容器对象的id。一般用div作为容器。
   headerAlign：标题行的对齐方式。
   headerHeight：标题行的高度。
   dataAlign：数据行的对齐方式。
   indentation：层级缩进量。
   folderColumnIndex：显示图标的数据列的索引，从0开始。
   folderOpenIcon：节点展开时的图标。
   folderCloseIcon：节点关闭时的图标。
   defaultLeafIcon：叶节点的图标。
   hoverRowBackground：鼠标滑过数据行时，背景色是否改变。
   itemClick：单击数据行后触发的事件。事件方法包含三个参数，分别是：行的id、行的索引、行数据。
   expandLayer：初始展开层数，默认只展开第1层。

   数组元素的属性：
    headerText：栏的标题。
    dataField：栏数据对应的字段名。
    headerAlign：栏头对齐方式。
    dataAlign：栏数据对齐方式。
    width：栏的宽度。
    handler：通过指定的方法来自定义栏数据。
    folderHidden：在文件夹行隐藏单元格值。
    data：组件的数据集。

四、TreeGrid的方法

show：显示填充数据后的组件对象。
expandAll：展开、关闭所有节点。该方法有一个参数，参数值为Y时表示展开，参数值为N时表示关闭。
getSelectedItem：获取当前选中的数据行，返回TreeGridItem对象。

五、TreeGridItem组件

• 1、组件属性

id：数据行的id。
index：数据行的索引。
data：json格式的行数据。

• 2、组件方法

getParent：获取父数据行。方法返回TreeGridItem对象。
getChildren：获取子数据行集。方法返回一个数组，数组元素为TreeGridItem对象。

TreeGrid DEMO下载地址(未更新)