控件(三)——TreeView控件以XmlDataSource控件为数据源实现简单的绑定

TreeView控件功能非常强大,今天,我们只是窥其一角。
我们实现的例子是:TreeView控件与XmlDataSource控件绑定,然后在网页显示选中项。

首先我们添加一个xml,取名为tv.xml。在其中写上如下代码:

<?xml version="1.0" encoding="utf-8"?>
<gen1 text="总目录">
  <zil text="第一个子目录" url="~/one/a.aspx">
    <sun1 text="叶目录A页" url="~/one/cone/a.aspx">
      <ye text="B页" url="~/one/cone/b.aspx"></ye>
    </sun1>
  </zil>
  <zi2 text="二的一个目录" url="~/two/a.aspx">
    <sun2 text="二个也目录A页" url="~/two/a.aspx"></sun2>
    <sun3 text="B页" url="~/two/b.aspx"></sun3>
  </zi2>
</gen1>

 

这时我们在default.aspx页面中添加一个TreeView控件,我们可以选定它的样式(大方美观即可),之后配置它的数据源。如下图:

控件(三)——TreeView控件以XmlDataSource控件为数据源实现简单的绑定_第1张图片

这是,界面自然后这样显示:

控件(三)——TreeView控件以XmlDataSource控件为数据源实现简单的绑定_第2张图片

我们添加后台代码:

        protected void Button1_Click(object sender, EventArgs e)
        {//将选中项的值打印出来
            if (TreeView1.CheckedNodes.Count>0)
            {//如果有项被选中
                foreach (TreeNode  tn in TreeView1.CheckedNodes )
                {//迭代所有被选中的节点
                    if (tn.ChildNodes.Count > 0)
                    {//如果被选中项下面还有子节点
                        foreach (TreeNode ctn in tn.ChildNodes)
                        {//迭代所有节点,把值读出来
                            Response.Write(ctn.Text + "<br>");
                        }
                    }
                    else
                    {//如果下面没有节点了,说明是页节点,直接读出选项的值
                        Response.Write(tn.Text +"<br>");
                    }
                }
            }
        }

        protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
        {
            Label1.Text = TreeView1.SelectedNode.Text;
        }

        protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
        {
            Label1.Text = "你折叠了" + e.Node.Text;
        }

        protected void TreeView1_TreeNodeExpanded(object sender, TreeNodeEventArgs e)
        {
            Label1.Text = "你展开了" + e.Node.Text;
        }

        protected void TreeView1_TreeNodeCollapsed(object sender, TreeNodeEventArgs e)
        {

        }

 

显示效果:

控件(三)——TreeView控件以XmlDataSource控件为数据源实现简单的绑定_第3张图片

你可能感兴趣的:(dataSource)