combotree（組合樹）的使用

一、前言： 

　　組合樹（combotree）把選擇控件和下拉樹結合起來。它與組合框（combobox）相似，不同的是把列表替換成樹組件。組合樹（combotree）支持帶有用於多選的樹狀態復選框的樹。

二、使用實例

1、創建方式

　　easyui 中的控件一般有兩種創建方式：通過標簽的方式以及js編程的方式。

1.1 標簽的方式創建：

<select id="cc" class="easyui-combotree" style="width:200px;" data-options="url:'get_data.php',required:true">
</select>

1.2 使用 javascript 創建組合樹（combotree）

1.2.1 本地數據源的加載

通過繼承自tree的"data"屬性來實現：

<input id="ProjectTree" style="width: 300px;" />

$("#ProjectTree").combotree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' }, { text: 'Item12' }] }, { text: 'Item2' }] });

效果圖：

通過方法“loadData”實現：

<input id="ProjectTree" class="easyui-combotree" style="width: 300px;" />

$("#ProjectTree").combotree("loaddata", [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' }, { text: 'Item12' }] }, { text: 'Item2' }]);

1.2.2 異步加載數據：

在介紹異步加載數據之前，先講解一下數據源的格式。其格式為json，每個節點都具備一下屬性：

• id：節點ID，對加載遠程數據很重要。
• text：顯示節點文本。
• state：節點狀態，'open' 或 'closed'，默認：'open'。如果為'closed'的時候，將不自動展開該節點。
• checked：表示該節點是否被選中。
• attributes: 被添加到節點的自定義屬性。
• children: 一個節點數組聲明了若干節點。

數據源格式舉例：

[{   
    "id":1,   
    "text":"Folder1",   
    "iconCls":"icon-save",   
    "children":[{   
        "text":"File1",   
        "checked":true  
    },{   
        "text":"Books",   
        "state":"open",   
        "attributes":{   
            "url":"/demo/book/abc",   
            "price":100   
        },   
        "children":[{   
            "text":"PhotoShop",   
            "checked":true  
        },{   
            "id": 8,   
            "text":"Sub Bookds",   
            "state":"closed"  
        }]   
    }]   
},{   
    "text":"Languages",   
    "state":"closed",   
    "children":[{   
        "text":"Java"  
    },{   
        "text":"C#"  
    }]   
}] 

異步加載數據舉例：

前端js代碼：

//構造項目樹
           $("#ProjectTree").combotree({ url: "Ajax.ashx", valueField: "id", textField: "text", lines: true, queryParams: { ParamType: "Init", Action: "GetProjectTree", M: Math.random() }, onBeforeSelect: function (node) { // debugger;
                   if (!$(this).tree('isLeaf', node.target)) { $(this).combo("showPanel"); return false; } } });

1.2.2.1 在實現過程中遇到的問題以及解決方法

1、json的格式

http://baike.baidu.com/link?url=-NLPp39k0VtBHuPU0yER_K06ek_yTVzzXTzC05GwBuiAtIb-9HE7Ufgn85MbrjBXaeKUtxl_MnOPmumpv8n34q

2、C#中引號的嵌套

通過轉義字符來實現:\"

3、如何生成combotree的數據源

　　通過遞歸的算法來實現，直接上代碼：

/// <summary>
      /// 構造項目樹 /// </summary>
      /// <returns>返回Json格式的字符串</returns>
      public string GetProjectTree() { string Jsonstring = "["; DataTable dt = GetPorjectNodeById(0); foreach(DataRow dr in dt.Rows) { if(dr!=dt.Rows[dt.Rows.Count-1])//如果此時不是最后一行數據
 { Jsonstring +='{'+ GetProjJson(dr)+'}'+','; } else { //string a = GetProjJson(dr);
                  Jsonstring +='{'+ GetProjJson(dr)+'}'; } } return Jsonstring+="]"; } /// <summary>
      /// 獲取根節點或某個父節點的子節點 /// </summary>
      /// <param name="Parent_id"></param>
      /// <returns></returns>
      public DataTable GetPorjectNodeById(int Parent_id) { SqlParameter[] Sqlpara = new SqlParameter[] { new SqlParameter("@Parent_id",Parent_id) }; return db.ExecuteDataTable("P_GetProjectInfr",Sqlpara); } /// <summary>
      /// 獲取根節點的子節點 /// </summary>
      /// <param name="dr"></param>
      /// <returns>返回json格式的字符串</returns>
      public string GetProjJson(DataRow dr) { string ProjectJson = ""; ProjectJson = "\"id\":" + dr["type_sid"] + ",\"text\":\"" + dr["Name"] + "\",\"children\":"; DataTable dt = GetPorjectNodeById(int.Parse(dr["type_sid"].ToString())); if (dt.Rows.Count != 0) { ProjectJson += "["; foreach(DataRow d in dt.Rows) { if(d!=dt.Rows[dt.Rows.Count-1]) { ProjectJson +="{"+GetProjJson(d)+"}"+","; } else { ProjectJson +="{"+GetProjJson(d)+"}"; } } ProjectJson += "]"; } else { ProjectJson += "null"; } return ProjectJson; }

2. combotree如何實現只允許選擇葉子節點

3、下面對相關的屬性、方法進行記錄說明

 3.1 屬性

樹形下拉框的屬性擴展自combo與tree,其重寫的屬性如下：

屬性名	屬性值類型	描述	默認值
editable	boolean	定義用戶是否可以直接輸入文本到字段中。	false

 

 

 3.2 事件

該事件擴展自組合（combo）和樹（tree）

3.3 方法

該方法擴展自組合（combo），下面是為組合樹（combotree）添加或重寫的方法。

名稱	參數	描述
options	none	返回選項（options）對象。
tree	none	返回樹（tree）對象。下面的實例演示如何取得選中的樹節點。 var t = $('#cc').combotree('tree'); // get the tree object var n = t.tree('getSelected'); // get selected node alert(n.text);
loadData	data	記住本地的樹（tree）數據。 代碼實例： $('#cc').combotree('loadData', [{ id: 1, text: 'Languages', children: [{ id: 11, text: 'Java' },{ id: 12, text: 'C++' }] }]);
reload	url	再一次請求遠程的樹（tree）數據。傳 'url' 參數來重寫原始的 URL 值。
clear	none	清除組件的值。
setValues	values	設置組件值的數組。 代碼實例： $('#cc').combotree('setValues', [1,3,21]);
setValue	value	設置組件的值。 代碼實例： $('#cc').combotree('setValue', 6);