[原創]FineUI秘密花園（二十四） — 樹控件之數據綁定

上一篇文章我們介紹了樹控件的基本用法，不過都是通過標簽來聲明樹控件的結構，本章我們會詳細講解如何在后台綁定樹控件。

 

綁定到XmlDocument

下面通過一個簡單的例子來看如何將XmlDocument和樹控件綁定，頁面的標簽結構：

<ext:Tree ID="Tree1" Width="500px" EnableArrows="false" EnableLines="false" ShowHeader="true"
    Title="樹控件（綁定到 XmlDocument）" runat="server">
</ext:Tree>

這里有兩個屬性需要注意：

• EnableArrows：是夠啟用箭頭折疊標示，否則是默認的加減折疊標示。
• EnableLines：是否啟用折疊標示之間的連接虛線。

 

來看下后台的初始化代碼：

private void LoadData()
{
    string xmlPath = Server.MapPath("~/tree/databind/website.xml");

    string xmlContent = String.Empty;
    using (StreamReader sr = new StreamReader(xmlPath))
    {
        xmlContent = sr.ReadToEnd();
    }

    XmlDocument xdoc = new XmlDocument();
    xdoc.LoadXml(xmlContent);

    Tree1.DataSource = xdoc;
    Tree1.DataBind();
}

這段代碼的邏輯很簡單：

1. 獲得需要讀取XML文件的服務器路徑；
2. 使用StreamReader來讀取文件的內容；
3. 創建XmlDocument實例，並加載XML文件內容；
4. 設置樹控件的DataSource為此實例，並調用DataBind執行數據綁定。

 

最后來看下XML文件的內容和最終的效果截圖：

<?xml version="1.0" encoding="utf-8" ?>
<Tree>
    <TreeNode Text="中國" Expanded="true" NodeId="China">
        <TreeNode Text="河南省" Expanded="true" NodeId="henan">
            <TreeNode Text="駐馬店市"  NodeId="zhumadian"  />
            <TreeNode Text="漯河市" NodeId="luohe"  />
        </TreeNode>
        // 省略其他節點...
    </TreeNode>
</Tree>

 

綁定到XmlDataSource

綁定到XmlDataSource簡化了上面的步驟，我們來看一下實現相同功能的示例：

<ext:Tree ID="Tree1" Width="500px" EnableArrows="true" EnableSingleExpand="true"
    ShowHeader="true" Title="樹控件（綁定到 XmlDataSource）" runat="server">
</ext:Tree>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/tree/databind/website.xml">
</asp:XmlDataSource>

 

在來看下后台初始化代碼和顯示效果：

private void LoadData()
{
    Tree1.DataSource = XmlDataSource1;
    Tree1.DataBind();
}

 

注意：在ASPX中設置了樹控件的EnableSingleExpand屬性，也就是說同一級目錄只能展開一個節點。

 

綁定到SiteMap

不知道你有沒有注意到，上面兩個例子XML文件中定義的節點屬性和樹節點的屬性一模一樣，如果不一樣怎么辦？

 

沒關系，可以為樹控件指定映射關系，用來將XML中定義的節點屬性名稱和樹節點的屬性進行對應，SiteMap就是一個典型例子。

來看一下SiteMap文件：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode title="中國" Expanded="true" NodeId="China">
    <siteMapNode title="河南省" description="河南省省會" Expanded="true" NodeId="henan">
      <siteMapNode title="駐馬店市" NodeId="zhumadian"  />
      <siteMapNode title="漯河市" NodeId="luohe"  />
    </siteMapNode>
    // 省略其他節點...
  </siteMapNode>
</siteMap>

其中title, description, url是SiteMap節點標准的屬性名稱，下面我們看下ASPX標簽的定義，看看如何將這些屬性名映射到樹節點的屬性：

<ext:Tree ID="Tree1" Width="500px" ShowHeader="true" Title="樹控件（綁定到 SiteMap）" runat="server">
    <Mappings>
        <ext:XmlAttributeMapping From="url" To="NavigateUrl" />
        <ext:XmlAttributeMapping From="title" To="Text" />
        <ext:XmlAttributeMapping From="description" To="ToolTip" />
    </Mappings>
</ext:Tree>
<asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/tree/databind/Web.sitemap">
</asp:XmlDataSource>

 

看下最終的顯示效果，特別注意“河南省”節點的Tooltip：

 

綁定到DataTable

在實際項目中，我們可能需要從一個數據表中讀出具有層次結構的數據，比如菜單表中通過ID和ParentID來定義這種結構。

 

下面我們通過一段代碼來生成類似的DataTable結構：

private DataTable CreateDataTable()
{
    DataTable table = new DataTable();
    DataColumn column1 = new DataColumn("Id", typeof(string));
    DataColumn column2 = new DataColumn("Text", typeof(String));
    DataColumn column3 = new DataColumn("ParentId", typeof(string));
    table.Columns.Add(column1);
    table.Columns.Add(column2);
    table.Columns.Add(column3);

    DataRow row = table.NewRow();
    row[0] = "china";
    row[1] = "中國";
    row[2] = DBNull.Value;
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = "henan";
    row[1] = "河南省";
    row[2] = "china";
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = "zhumadian";
    row[1] = "駐馬店市";
    row[2] = "henan";
    table.Rows.Add(row);

    row = table.NewRow();
    row[0] = "luohe";
    row[1] = "漯河市";
    row[2] = "henan";
    table.Rows.Add(row);

    // 省略其他節點...

    return table;
}

毫無疑問，這段代碼生成的層次結構如下所示：

當然，這也是我們最終要實現的效果，來看下樹控件的初始化代碼：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadData();
    }
}

private void LoadData()
{
    DataTable table = CreateDataTable();

    DataSet ds = new DataSet();
    ds.Tables.Add(table);
    ds.Relations.Add("TreeRelation", ds.Tables[0].Columns["Id"], ds.Tables[0].Columns["ParentId"]);

    foreach (DataRow row in ds.Tables[0].Rows)
    {
        if (row.IsNull("ParentId"))
        {
            TreeNode node = new TreeNode();
            node.Text = row["Text"].ToString();
            node.Expanded = true;
            Tree1.Nodes.Add(node);

            ResolveSubTree(row, node);
        }
    }
}

private void ResolveSubTree(DataRow dataRow, TreeNode treeNode)
{
    DataRow[] rows = dataRow.GetChildRows("TreeRelation");
    if (rows.Length > 0)
    {
        treeNode.Expanded = true;
        foreach (DataRow row in rows)
        {
            TreeNode node = new TreeNode();
            node.Text = row["Text"].ToString();
            treeNode.Nodes.Add(node);

            ResolveSubTree(row, node);
        }
    }
}

這段代碼有點復雜，我們逐步來分析：

1. 通過CreateDataTable函數拿到需要的數據源；
2. 創建一個DataSet數據集，並把剛拿到的數據表加入此數據集，通過還定義了數據之間的聯系（ds.Relations.Add）；
3. 遍歷數據表中的每一行，找到沒有定義ParentId的行，也即是樹的根節點；
4. 將這些根節點添加到樹控件中（Tree1.Nodes.Add）；
5. 遞歸這些根節點，並通過數據集中數據之間的關系，找到這些根節點的所有子節點，並添加到樹中。

 

小結

本章我們講解了如何將各種數據源綁定到樹控件，特別是將表格數據綁定到樹控件的做法非常耐人尋味，不過實際項目中最常用的還是將XML文件綁定到樹控件。

下一篇文章我們會講解手風琴控件，並將使用手風琴控件和樹控件組合來創建站點的菜單導航目錄。

 

注：《FineUI秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇