基于jQuery的TreeGrid组件详解

妖狐艹你老母 2023-10-16 22:59 152阅读 0赞

**一、组件使用范例**

html代码：

<input type="button" value="关闭所有节点" onclick="expandAll('N')">  
    <input type="button" value="展开所有节点" onclick="expandAll('Y')">  
    <input type="button" value="取得当前行的数据" onclick="selectedItem()"><br>  
    当前选中的行：<input type="text" id="currentRow" size="110">  
      
    <div id="div1"></div>

Js代码:

效果附图：  
![效果图][20160525114824140]

**二、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下载地址(未更新)][TreeGrid DEMO]

[20160525114824140]: https://img-blog.csdn.net/20160525114824140
[TreeGrid DEMO]: http://download.csdn.net/detail/s445320/9438778