一、簡介：
combotree控件是對combo（自定義下拉框）與tree（樹）控件的擴展，它與combobox（下拉列表框）類似，但是它將下拉列表框的列表替換成了樹。該控件支持樹狀態的復選框從而實現多選。
1、屬性
樹形下拉框的屬性擴展自combo與tree,其重寫的屬性如下：
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| editable | boolean | 定義用戶是否可以直接輸入文本到字段中。 | false |
2、方法
樹形下拉框的方法擴展自combo(自定義下拉框)，其重寫和新增的方法如下：
| 方法名 | 方法參數 | 描述 |
|---|---|---|
| options | none | 返回屬性對象。 |
| tree | none | 返回樹形對象。以下的例子顯示了如何得到選擇的樹節點。 var t = $('#cc').combotree('tree'); // 獲取樹對象
var n = t.tree('getSelected'); // 獲取選擇的節點
alert(n.text);
|
| loadData | data | 讀取本地樹形數據。 代碼示例： $('#cc').combotree('loadData', [{
id: 1,
text: 'Languages',
children: [{
id: 11,
text: 'Java'
},{
id: 12,
text: 'C++'
}]
}]);
|
| reload | url | 再次請求遠程樹數據。通過'url'參數重寫原始URL值。 |
| clear | none | 清空控件的值。 |
| setValues | values | 設置組件值數組。 代碼示例： $('#cc').combotree('setValues', [1,3,21]);
|
| setValue | value | 設置組件值。 代碼示例： $('#cc').combotree('setValue', 6);
|
3、事件
該控件的事件完全繼承自combo與tree.
二、用法
該控件有兩種創建的方式：通過標簽的方式創建以及通過javascript編程的方式創建，在下面的例子中着重以編程的方式實現。
html代碼：
<input id="ProjectTree" style="width: 300px;" />
1、本地數據源的加載
通過繼承自tree的"data"屬性來實現：
$("#ProjectTree").combotree({
data: [{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
}, {
text: 'Item12'
}]
}, {
text: 'Item2'
}]
});
效果圖：
通過方法“loadData”實現：
HTML代碼：
<input id="ProjectTree" class="easyui-combotree" style="width: 300px;" />
js代碼：
$("#ProjectTree").combotree("loaddata", [{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
}, {
text: 'Item12'
}]
}, {
text: 'Item2'
}]);
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;
}
}
});
在這里我是通過一般處理程序來接受傳遞到后台的參數然后進行一系列的邏輯處理生成一個json。
三、在實現過程中遇到的問題以及解決方法記錄
1、json的格式
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;
}
3、combotree如何實現只允許選擇葉子節點
四、總結
不積跬步、無以至千里！