tree  

今天包爾伯自己將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要得格式了

 

希望對大家有幫助

 

 

 

 

 

, , ,

包爾伯 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • zoe
  • 包爾伯您好:我有需求將資料庫資料以dynatree方式顯示並可做新刪修功能,目前只找到您實作JSON成功的文章,我還卡在將資料轉作JSON的程序中><我是程式新手@@不知您還有沒有實作新刪修功能搭配JSON?若確定實作可行,我也才多點信心朝此方向繼續奮鬥,非常謝謝您的技術分享~
  • 這部分當然都可以做,你可以到官網看一下文件,裡面有些事件demo可以參考

    包爾伯 於 2012/12/04 16:31 回覆