asp.net 樹形控件 $.fn.zTree.init

在網頁中通過jquery腳本來構築樹形控件將是一個不錯的選擇，比如有一個文本框，當鼠標點擊的時候，像彈出一個下拉框一樣彈出一個樹形控件，
這似乎是一個不錯的控制。下面主要講講這種樹形控件的實現。
為了能使用這種控件，需要中網上下載這個控件的腳本，然后引用到頁面中

<script src="/Scripts/jquery.ztree.core-3.5.js"></script>
    <script src="/Scripts/jquery.ztree.excheck-3.5.js"></script>

當然還有關於這個控件的樣式表

<link href="~/Style/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

這些都可以到網上下載。

首先新建一個網頁，添加一個文本框，頁面代碼如下：

<asp:TextBox runat="server" ID="CitySel" ReadOnly="True" Style="width: 135px;" placeholder="選擇地區" onclick="ShowAreaTree(); "></asp:TextBox>
        <asp:HiddenField runat="server" ID="HiddenAreaTreeSelID" />
        <div id="AreaTreeContent" class="menuContent" style="display: none; position: absolute;  margin-left:32.7%;margin-top: 45px; top:0px;left:0px;width:135px;">
             <ul id="AreaTree" class="ztree" style="margin-top: 0; width: 135px; height: 300px;"></ul>
         </div>

屬性placeholder可以使得文本框中有一個默認的文本，但是在鼠標進入這個文本框后，這個默認文本會自動消失。如果不輸入數據，待鼠標離開后，這
個默認文本又出現了。HiddenField是一個隱藏域，用來保存選項的code或ID。 ul就是樹形控件的節點了。 

界面設計好了，現在需要實現的功能是，在頁面加載完成后，自動的為這個樹形控件填充數據。這同樣是通過腳本來完成。

<script type="text/javascript">
$(function () {
    $.ajax({
                url: "../../ChannelContent/SystemManage/UserManage_JSON.aspx?PostType=AreaTree",
                datatype: "json",
                context: document.body,
                success: function (data) {
                    $.fn.zTree.init($("#AreaTree"), Areasetting, eval("(" + data + ")"));
                }
            });
});
</script>

$(function (){})這個函數是在頁面加載完成后會自動執行的一個腳本函數。$.ajax可以將業務邏輯轉移到url指定的頁面的后台代碼中去執行，這個頁面實際上就是一個空頁面，上面也沒有。
執行完成后返回的數據放到data中，然后通過$.fn.zTree.init來填充樹形控件。Areasetting稍后介紹，這里補充一點關於$.ajax業務邏輯轉移的方法。
在UserManage_JSON頁面的load方法中，通過string postType = Request["PostType"];來接收傳遞過來的參數PostType，在load方法的代碼如下：

IList<ContentTree> bwAreas = BwAreaManage.GetAreaTree();

                string BwAreaJson = JsonConvert.SerializeObject(bwAreas);//將對象轉換為jason字符串

                Response.Write(BwAreaJson);//返回查詢的結果

GetAreaTree函數：

public virtual IList<ContentTree> GetAreaTree()
        {
            IList<ContentTree> Result = new List<ContentTree>();

            ContentTree bwArea = new ContentTree();
            bwArea.id = "0";
            bwArea.name = ConfigurationManager.AppSettings["AreaTreeRoot"];
            bwArea.pId = "-1";
            bwArea.open = true;
            Result.Add(bwArea);

            IList<BWAreaEntity> BwAreaList = bwAreaDataAccess.GetAreas(2);//從數據庫中獲取數據

            foreach (BWAreaEntity Area in BwAreaList)
            {
                ContentTreeEntity newArea = new ContentTreeEntity();
                //下面的name和ID是必須要有的，用於顯示數據
                newArea.id = Area.forgCityCode.ToString();
                newArea.name = Area.FCityName;
                newArea.pId = Area.ftopId.ToString();
                if (Area.ftopId == 0)
                {
                    newArea.open = true;
                }
                else
                {
                    newArea.open = false;
                }
                

                Result.Add(newArea);
            }

            return Result;
        }

上面的BwAreaJson 是一個jason字符串，內容如圖：

在返回這個字符串后，程序又回到了腳本中了。

var Areasetting = {
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }

            },
            callback: {
                onClick: onAreaTreeClick//當選擇樹中的節點時，調用的函數
            }
        };

關於Areasetting 的格式可以到網上去查，這里不做解釋。

腳本函數onAreaTreeClick：

function onAreaTreeClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("AreaTree"),
            nodes = zTree.getSelectedNodes(),
            v = "";
            var SeleValue;
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
                SeleValue = nodes[i].id;
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = $("#<%=CitySel.ClientID%>");
            cityObj.attr("value", v);//這里是將選中項的值寫到文本框中
            $("#<%=HiddenAreaTreeSelID.ClientID%>").val(SeleValue);
            var townCityCode = SeleValue.toString().substr(0, 6);//將選中項的值寫到隱藏域

            HideAreaTree();
        }

        //顯示地區選擇樹
        function ShowAreaTree() {
            //定義下拉樹展示時位置
            $("#AreaTreeContent").slideDown("fast");//slideDown使用淡出效果來顯示被選元素
            $("body").bind("mousedown", onBodyDown);//bind() 方法為被選元素添加一個或多個事件處理程序，並規定事件發生時運行的函數。鼠標按下時執行onBodyDown
        }
        function HideAreaTree() {
            $("#AreaTreeContent").fadeOut("fast");//fadeOut使用淡出效果來隱藏被選元素
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!(event.target.id == "AreaTreeContent" || $(event.target).parents("#AreaTreeContent").length > 0)) {
                HideAreaTree();
            }
        }

OK，到這里，整個樹形控件就構築完了，代碼自己慢慢研究吧，看一下效果