從數(shù)據(jù)庫里面取值綁定到Ztree

2019-11-17 01:41:09

字體：大中小

供稿：網(wǎng)友

從數(shù)據(jù)庫里面取值綁定到Ztree

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

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

2、添加應用及顯示的位置，設(shè)置樹需要綁定的字段，與數(shù)據(jù)庫里面的表字段有關(guān)（備注：設(shè)置樹為展開狀態(tài)）

<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屬性當做節(jié)點名稱                    name: "ItemName"                        },                simpleData: {                    //是否使用簡單數(shù)據(jù)模式                    enable: true,                    //當前節(jié)點id屬性                      idKey: "Id",                    //當前節(jié)點的父節(jié)點id屬性                     pIdKey: "pItemId",                    //用于修正根節(jié)點父節(jié)點數(shù)據(jù)，即pIdKey指定的屬性值                    rootPId: 0                }            },            view: {                //是否支持同時選中多個節(jié)點                selectedMulti: false            }        };        $(function () {            $.post("test.aspx", function (json) {                var treeObj = $.fn.zTree.init($("#tree"), setting, json);                          //默認展開所有節(jié)點                treeObj.expandAll(true);                            });        });           </script>

3、獲取數(shù)據(jù)庫表中數(shù)據(jù)，轉(zhuǎn)換為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)    {                //在服務(wù)器端判斷request來自Ajax請求(異步)還是傳統(tǒng)請求(同步)        if (Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "xmlHttpRequest".ToLower())        {                       //清除緩沖區(qū)流中的所有內(nèi)容輸出            Response.Clear();            //設(shè)置輸出流的HTTP MIMEl類型            Response.ContentType = "application/json";            //將一個字符串寫入HTTP相應輸出流        　 Response.Write(GetJson());        　//將當前所有緩沖的輸出發(fā)送到客戶端，停止該頁的執(zhí)行            Response.End();        }         }    //序列化，將對象轉(zhuǎn)化為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();        //將對象轉(zhuǎn)換為JSON字符串              return json.Serialize(list);           }}

*4、將數(shù)據(jù)庫中表按照樹狀結(jié)構(gòu)的形式排序（即為以后轉(zhuǎn)換成符合要求的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;        }

備注：排序后的數(shù)據(jù)庫表