從數據庫里面取值綁定到Ztree

本文轉載自查看原文 2014-08-09 18:27 6810 ztree動態加載數據/ Ztree綁定/ ztree數據/ ztree數據格式/ ztree數據庫/ ztree json數據/ Asp.net

1、效果圖（思路：將數據庫表按照一定的格式排序，然后序列化成json字符串，綁定到Ztree上並顯示出來）

zTree v3.5.16 API 文檔：http://www.ztree.me/v3/api.php

2、添加應用及顯示的位置，設置樹需要綁定的字段，與數據庫里面的表字段有關（備注：設置樹為展開狀態）

<script src="/common/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="/Admin/tree/zTreeStyle.css" rel="stylesheet" type="text/css" />    
<script src="/Admin/tree/jquery.ztree.core-3.5.js" type="text/javascript"></script>

<div style="margin:0 auto;border:1px solid #617775;background:#f0f6e4;width:578px;height:460px;  overflow:auto;">
    <ul id="tree" class="ztree"></ul>
</div>

<script type="text/javascript">
        var setting = {
            data: {
                key: {
                    //將treeNode的ItemName屬性當做節點名稱
                    name: "ItemName"        
                },
                simpleData: {
                    //是否使用簡單數據模式
                    enable: true,
                    //當前節點id屬性  
                    idKey: "Id",
                    //當前節點的父節點id屬性 
                    pIdKey: "pItemId",
                    //用於修正根節點父節點數據，即pIdKey指定的屬性值
                    rootPId: 0
                }
            },
            view: {
                //是否支持同時選中多個節點
                selectedMulti: false
            }
        };

        $(function () {
            $.post("test.aspx", function (json) {
                var treeObj = $.fn.zTree.init($("#tree"), setting, json);  //默認展開所有節點
                treeObj.expandAll(true);                
            });
        });       
    </script>

3、獲取數據庫表中數據，轉換為JSON字符串，並在前台以樹的形式顯示出來

using System;
using System.Collections.Generic;
using System.Data;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {        
        //在服務器端判斷request來自Ajax請求(異步)還是傳統請求(同步)
        if (Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "XMLHttpRequest".ToLower())
        {           
            //清除緩沖區流中的所有內容輸出
            Response.Clear();
            //設置輸出流的HTTP MIMEl類型
            Response.ContentType = "application/json";
            //將一個字符串寫入HTTP相應輸出流
        　 Response.Write(GetJson());
        　//將當前所有緩沖的輸出發送到客戶端，停止該頁的執行
            Response.End();
        }     
    }
    //序列化，將對象轉化為JSON字符串
    protected string GetJson()
    {
        //為啟用 AFAX 的應用程序提供序列化和反序列化功能
        System.Web.Script.Serialization.JavaScriptSerializer json = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Express.Model.AdminLeft> list = new List<Express.Model.AdminLeft>();
        //獲取管理員模塊列表
        list = Express.BLL.AdminLeft.GetList();
        //將對象轉換為JSON字符串      
        return json.Serialize(list);    
    }
}

*4、將數據庫中表按照樹狀結構的形式排序（即為以后轉換成符合要求的json字符串作准備）

  /// <summary>
        /// 獲取所有名稱不為空的欄目
        /// </summary>
        public List<Model.AdminLeft> GetList()
        {
            string sql = string.Format("select * from AdminLeft where itemName<>'' order by case when pItemId=0 then Id*10000 else pItemId*10000+Id end");
            List<Model.AdminLeft> list = new List<Model.AdminLeft>();
            using (SqlDataReader dr = DBUtility.SqlHelper.ExecuteReader(ConnString.connReadonly, CommandType.Text, sql, null))
            {
                while (dr.Read())
                {
                    Model.AdminLeft model = new Model.AdminLeft();
                    object obj;
                   obj = dr["Id"];
                 if (obj != null && obj != DBNull.Value)
                    {
                        model.Id = (int)obj;
                    }
                   obj = dr["pItemId"];
                 if (obj != null && obj != DBNull.Value)
                    {
                        model.pItemId = (int)obj;
                    }                   
                    model.ItemName = dr["ItemName"].ToString();                  
                    list.Add(model);
                }
            }
            return list;
        }