人生過程精彩才是重點

今天包爾伯自己將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資料必須要長這樣

官網範例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要得格式了

希望對大家有幫助