今天包爾伯自己將dynatree 整合了資料庫資料,做出可以直接吃JSON資料呈現出來
自己爽了很久,哈哈,或許是有點小小成就感吧。
dynatree是什麼?
dynatree是一個jQuery的tree view外掛
http://code.google.com/p/dynatree/
sample:
http://wwwendt.de/tech/dynatree/doc/samples.html
要生成資料可以用兩種方式
一種就是直接先把資料依照格式排列出來,然後再轉成dynatree,然後顯示出來
<scripttype="text/javascript">
$(function(){
$("#tree").dynatree({
// using default options
});
<!--(Irrelevant source removed.)-->
});
</script>
裡面格式就是如下:
<divid="tree">
<ulid="treeData"style="display: none;">
<liid="id1"title="Look, a tool tip!">item1 with key and tooltip
<liid="id2">item2
<liid="id3"class="folder">Folder with some children
<ul>
<liid="id3.1">Sub-item 3.1
<ul>
<liid="id3.1.1">Sub-item 3.1.1
<liid="id3.1.2">Sub-item 3.1.2
</ul>
<liid="id3.2">Sub-item 3.2
<ul>
<liid="id3.2.1">Sub-item 3.2.1
<liid="id3.2.2">Sub-item 3.2.2
</ul>
</ul>
<liid="id4"class="expanded">Document with some children (expanded on init)
<ul>
<liid="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
<ul>
<liid="id4.1.1">Sub-item 4.1.1
<liid="id4.1.2">Sub-item 4.1.2
</ul>
<liid="id4.2">Sub-item 4.2
<ul>
<liid="id4.2.1">Sub-item 4.2.1
<liid="id4.2.2">Sub-item 4.2.2
</ul>
</ul>
</ul>
</div>
包爾伯最初抓出資料庫資料時,自己先用都字串方式把資料全部按照此規則排列,格式正確後,畫面顯示就會是像官網的tree view那樣顯示出來
然而,做完後,自己覺得這方式有點鳥,所以再度重新思考如何直接用JSON方式顯示資料,好讓dynatree 可以吃資料
所先,要吃JSON資料就得在dynatree設定一下
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
initAjax: {
url: "sample-data1.json"//這裡就是要吃JSON資料的網址
},
onActivate: function(node) {
$("#echoActive").text(node.data.title);
},
onDeactivate: function(node) {
$("#echoActive").text("-");
}
});
});
</script>
實際上:他的JSON資料必須要長這樣
[
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2",
"children": [
{"title": "Sub-item 2.1"},
{"title": "Sub-item 2.2"}
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1"},
{"title": "Sub-item 3.2"}
]
},
{"title": "Item 5"}
]
知道他的格式後,就是把自己資料庫資料撈出來組合成這副死德行XD
包爾伯是用C#在寫,所以我原本想用DataSet將資料撈出後組合成XML資料然後再轉換成JSON
但以前對於XML使用上,不是那麼的容易使用,好吧,包爾伯承認是我自己鳥,懶得慢慢組合
(自從ASP.NET開始可以用List<object>後,我已經無法離開他了)
所以包爾伯決定用ASP.NET裡面 List來做做看,結果還真的可以做
首先當然就是要先做出一個Entity來放資料
經過反覆測試後,以下是可以用的Entity,當然你也可以自己在裡面多建立一些你自己想給的屬性,前端皆可以找到這些屬性
private class TreeObject
{
public string title { get; set; }
public string id { get; set; }
public string href { get; set; }
/// <summary>
/// 是否為資料夾
/// </summary>
public bool? isFolder { get; set; }
/// <summary>
/// 是否展開
/// </summary>
public bool? expand { get; set; }
public string key { get; set; }
public List<TreeObject> children { get; set; }
}
之後就是自己將自己資料從資料庫撈出來塞到裡面就成了
如果你是使用MVC專案的話,那就直接以JSON丟出即可
public JsonResult JSON_GetData(string id)
{
.....
return Json(tree, JsonRequestBehavior.AllowGet);
}
如果是傳統專案的話
using System.Web.Script.Serialization;
使用JavaScriptSerializer元件
(tree就是我建好的TreeObject)
JavaScriptSerializer js = new JavaScriptSerializer();
Response.Write(js.Serialize(tree));
這樣就可以生出dynatree要得格式了
希望對大家有幫助