基於jQuery的TreeGrid組件詳解

一、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對象。

 

五、組件使用范例

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

 

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