基于jQuery——TreeGrid 

<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>   

<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代码 复制代码 收藏代码
<script language="javascript">   
    var config = {   
        id: "tg1",   
        width: "800",   
        renderTo: "div1",   
        headerAlign: "left",   
        headerHeight: "30",   
        dataAlign: "left",   
        indentation: "20",   
        folderOpenIcon: "images/folderOpen.gif",   
        folderCloseIcon: "images/folderClose.gif",   
        defaultLeafIcon: "images/defaultLeaf.gif",   
        hoverRowBackground: "false",   
        folderColumnIndex: "1",   
        itemClick: "itemClickEvent",   
        expandLayer: 1,   
        columns:[   
            {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},   
            {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"},   
            {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"},   
            {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"},   
            {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook", folderHidden: true}   
        ],   
        data:[   
            {name: "城区分公司", code: "CQ", assignee: "", children:[   
                {name: "城区卡品分销中心"},   
                {name: "先锋服务厅", children:[   
                    {name: "chlid1"},   
                    {name: "chlid2"},   
                    {name: "chlid3", children: [   
                        {name: "chlid3-1"},   
                        {name: "chlid3-2"},   
                        {name: "chlid3-3"},   
                        {name: "chlid3-4"}   
                    ]}   
                ]},   
                {name: "半环服务厅"}   
            ]},   
            {name: "清新分公司", code: "QX", assignee: "", children:[]},   
            {name: "英德分公司", code: "YD", assignee: "", children:[]},   
            {name: "佛冈分公司", code: "FG", assignee: "", children:[]}   
        ]   
    };   
  
    /*  
        单击数据行后触发该事件  
        id：行的id  
        index：行的索引。  
        data：json格式的行数据对象。  
    */  
    function itemClickEvent(id, index, data){   
        jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));   
    }   
       
    /*  
        通过指定的方法来自定义栏数据  
    */  
    function customCheckBox(row, col){   
        return "<input type='checkbox'>";   
    }   
  
    function customOrgName(row, col){   
        var name = row[col.dataField] || "";   
        return name;   
    }   
  
    function customLook(row, col){   
        return "<a href='' style='color:blue;'>查看</a>";   
    }   
  
    //创建一个组件对象   
    var treeGrid = new TreeGrid(config);   
    treeGrid.show();   
       
    /*  
        展开、关闭所有节点。  
        isOpen=Y表示展开，isOpen=N表示关闭  
    */  
    function expandAll(isOpen){   
        treeGrid.expandAll(isOpen);   
    }   
       
    /*  
        取得当前选中的行，方法返回TreeGridItem对象  
    */  
    function selectedItem(){   
        var treeGridItem = treeGrid.getSelectedItem();   
        if(treeGridItem!=null){   
            //获取数据行属性值   
            //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);   
               
            //获取父数据行   
            var parent = treeGridItem.getParent();   
            if(parent!=null){   
                //jQuery("#currentRow").val(parent.data.name);   
            }   
               
            //获取子数据行集   
            var children = treeGridItem.getChildren();   
            if(children!=null && children.length>0){   
                jQuery("#currentRow").val(children[0].data.name);   
            }   
        }   
    }   
</script>

 

一、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层。

       columns：值为数组，数组元素为json对象。定义数据栏相关信息。

               数组元素的属性：

                        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对象。

 

五、组件使用范例

Html代码 复制代码 收藏代码
  1. <input type="button" value="关闭所有节点" onclick="expandAll('N')">  
  2. <input type="button" value="展开所有节点" onclick="expandAll('Y')">  
  3. <input type="button" value="取得当前行的数据" onclick="selectedItem()"><br>  
  4. 当前选中的行：<input type="text" id="currentRow" size="110">  
  5.   
  6. <div id="div1"></div>   
<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代码 复制代码 收藏代码
  1. <script language="javascript">   
  2.     var config = {   
  3.         id: "tg1",   
  4.         width: "800",   
  5.         renderTo: "div1",   
  6.         headerAlign: "left",   
  7.         headerHeight: "30",   
  8.         dataAlign: "left",   
  9.         indentation: "20",   
  10.         folderOpenIcon: "images/folderOpen.gif",   
  11.         folderCloseIcon: "images/folderClose.gif",   
  12.         defaultLeafIcon: "images/defaultLeaf.gif",   
  13.         hoverRowBackground: "false",   
  14.         folderColumnIndex: "1",   
  15.         itemClick: "itemClickEvent",   
  16.         expandLayer: 1,   
  17.         columns:[   
  18.             {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},   
  19.             {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"},   
  20.             {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"},   
  21.             {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"},   
  22.             {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook", folderHidden: true}   
  23.         ],   
  24.         data:[   
  25.             {name: "城区分公司", code: "CQ", assignee: "", children:[   
  26.                 {name: "城区卡品分销中心"},   
  27.                 {name: "先锋服务厅", children:[   
  28.                     {name: "chlid1"},   
  29.                     {name: "chlid2"},   
  30.                     {name: "chlid3", children: [   
  31.                         {name: "chlid3-1"},   
  32.                         {name: "chlid3-2"},   
  33.                         {name: "chlid3-3"},   
  34.                         {name: "chlid3-4"}   
  35.                     ]}   
  36.                 ]},   
  37.                 {name: "半环服务厅"}   
  38.             ]},   
  39.             {name: "清新分公司", code: "QX", assignee: "", children:[]},   
  40.             {name: "英德分公司", code: "YD", assignee: "", children:[]},   
  41.             {name: "佛冈分公司", code: "FG", assignee: "", children:[]}   
  42.         ]   
  43.     };   
  44.   
  45.     /*  
  46.         单击数据行后触发该事件  
  47.         id：行的id  
  48.         index：行的索引。  
  49.         data：json格式的行数据对象。  
  50.     */  
  51.     function itemClickEvent(id, index, data){   
  52.         jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));   
  53.     }   
  54.        
  55.     /*  
  56.         通过指定的方法来自定义栏数据  
  57.     */  
  58.     function customCheckBox(row, col){   
  59.         return "<input type='checkbox'>";   
  60.     }   
  61.   
  62.     function customOrgName(row, col){   
  63.         var name = row[col.dataField] || "";   
  64.         return name;   
  65.     }   
  66.   
  67.     function customLook(row, col){   
  68.         return "<a href='' style='color:blue;'>查看</a>";   
  69.     }   
  70.   
  71.     //创建一个组件对象   
  72.     var treeGrid = new TreeGrid(config);   
  73.     treeGrid.show();   
  74.        
  75.     /*  
  76.         展开、关闭所有节点。  
  77.         isOpen=Y表示展开，isOpen=N表示关闭  
  78.     */  
  79.     function expandAll(isOpen){   
  80.         treeGrid.expandAll(isOpen);   
  81.     }   
  82.        
  83.     /*  
  84.         取得当前选中的行，方法返回TreeGridItem对象  
  85.     */  
  86.     function selectedItem(){   
  87.         var treeGridItem = treeGrid.getSelectedItem();   
  88.         if(treeGridItem!=null){   
  89.             //获取数据行属性值   
  90.             //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);   
  91.                
  92.             //获取父数据行   
  93.             var parent = treeGridItem.getParent();   
  94.             if(parent!=null){   
  95.                 //jQuery("#currentRow").val(parent.data.name);   
  96.             }   
  97.                
  98.             //获取子数据行集   
  99.             var children = treeGridItem.getChildren();   
  100.             if(children!=null && children.length>0){   
  101.                 jQuery("#currentRow").val(children[0].data.name);   
  102.             }   
  103.         }   
  104.     }   
  105. </script> 
posted @ 2013-10-18 14:23  温馨小巫  阅读(804)  评论(0)  编辑  收藏  举报