asp.net使用DataGridTree实现下拉树的方法

下面是详细讲解“asp.net使用DataGridTree实现下拉树的方法”的完整攻略。

一、DataGridTree控件简介

DataGridTree是一种扩展自DataGrid的控件，它支持将关联表数据以树形结构的方式展示在页面上，可以实现类似下拉树的功能。DataGridTree控件需要与ADO.NET连接使用。

二、DataGridTree控件使用步骤

1. 引入DataGridTree控件

将DataGridTree控件引入到工程中，可以使用nuget包管理或手动添加参考。

2. 绑定数据源

在使用DataGridTree控件之前，需要先绑定数据源。绑定数据源的方法有多种，这里只介绍其中一种常用的方式：使用SqlDataAdapter和DataSet。

SqlDataAdapter da = new SqlDataAdapter("select * from TreeTable", connectionString);
DataSet ds = new DataSet();
da.Fill(ds, "TreeTable");

dataGridTree.DataSource = ds.Tables["TreeTable"];
dataGridTree.DataBind();

3. 配置DataGridTree控件

DataGridTree控件需要进行一些配置才能正常显示树形结构。首先，需要设置Tree的数据列和显示列：

dataGridTree.DataKeyField = "ID";
dataGridTree.TextField = "TreeName";
dataGridTree.ParentField = "ParentID";

然后，需要设置展开时的图片和折叠时的图片：

dataGridTree.ExpandImageUrl = "images/expand.gif";
dataGridTree.CollapseImageUrl = "images/collapse.gif";

最后，需要设置树的样式：

dataGridTree.NodeStyle.CssClass = "treeNode";
dataGridTree.RootNodeStyle.CssClass = "treeRoot";
dataGridTree.ParentNodeStyle.CssClass = "treeParent";

4. 实现下拉树

为了实现下拉树，需要添加一个文本框和一个隐藏域，然后在客户端使用JavaScript来实现下拉效果。在文本框的onfocus事件中，显示DataGridTree控件。在DataGridTree控件的选中事件中，将选中的值设置到文本框中，并将选中的ID设置到隐藏域中。

<div>
    <input type="text" id="treeText" onfocus="showTree()" readonly>
    <input type="hidden" id="treeValue">
</div>
<asp:DataGridTree ID="dataGridTree" runat="server" OnNodeClick="dataGridTree_NodeClick"></asp:DataGridTree>

<script>
    function showTree() {
        var treeDiv = document.getElementById("<%= dataGridTree.ClientID %>");
        treeDiv.style.display = "block";
    }

    function hideTree() {
        var treeDiv = document.getElementById("<%= dataGridTree.ClientID %>");
        treeDiv.style.display = "none";
    }

    function dataGridTree_NodeClick(sender, args) {
        var treeText = document.getElementById("treeText");
        var treeValue = document.getElementById("treeValue");

        treeText.value = args.node.Text;
        treeValue.value = args.node.Value;

        hideTree();
    }
</script>

三、示例说明

1. 展示部门信息

假设有一个部门表，其中有部门ID、部门名称以及所属上级部门ID。我们可以使用DataGridTree控件将部门信息以树形结构展示在页面上，实现下拉部门选择功能。

create table Department(
    DepID int primary key,
    DepName varchar(50),
    ParentID int
)

insert into Department values(1, '总部', null)
insert into Department values(2, '营销部', 1)
insert into Department values(3, '研发部', 1)
insert into Department values(4, '销售部', 1)
insert into Department values(5, '财务部', 1)
insert into Department values(6, '技术部', 3)
insert into Department values(7, '测试部', 3)
insert into Department values(8, '客服部', null)

SqlDataAdapter da = new SqlDataAdapter("select * from Department", connectionString);
DataSet ds = new DataSet();
da.Fill(ds, "Department");

dataGridTree.DataKeyField = "DepID";
dataGridTree.TextField = "DepName";
dataGridTree.ParentField = "ParentID";
dataGridTree.NodeStyle.CssClass = "treeNode";
dataGridTree.RootNodeStyle.CssClass = "treeRoot";
dataGridTree.ParentNodeStyle.CssClass = "treeParent";
dataGridTree.ExpandImageUrl = "images/expand.gif";
dataGridTree.CollapseImageUrl = "images/collapse.gif";

dataGridTree.DataSource = ds.Tables["Department"];
dataGridTree.DataBind();

<div>
    <input type="text" id="deptText" onfocus="showTree()" readonly>
    <input type="hidden" id="deptValue">
</div>
<asp:DataGridTree ID="dataGridTree" runat="server" OnNodeClick="dataGridTree_NodeClick"></asp:DataGridTree>

<script>
    function showTree() {
        var deptDiv = document.getElementById("<%= dataGridTree.ClientID %>");
        deptDiv.style.display = "block";
    }

    function hideTree() {
        var deptDiv = document.getElementById("<%= dataGridTree.ClientID %>");
        deptDiv.style.display = "none";
    }

    function dataGridTree_NodeClick(sender, args) {
        var deptText = document.getElementById("deptText");
        var deptValue = document.getElementById("deptValue");

        deptText.value = args.node.Text;
        deptValue.value = args.node.Value;

        hideTree();
    }
</script>

2. 树形菜单导航

假设有一个菜单表，其中有菜单ID、菜单名称、父菜单ID以及连接URL。我们可以使用DataGridTree控件将菜单信息以树形结构展示在页面上，实现树形菜单导航的功能。

create table Menu(
    MenuID int primary key,
    MenuName varchar(50),
    ParentID int,
    URL varchar(100)
)

insert into Menu values(1, '主页', null, 'Default.aspx')
insert into Menu values(2, '新闻', null, 'NewsList.aspx')
insert into Menu values(3, '公司简介', null, 'AboutUs.aspx')
insert into Menu values(4, '行业新闻', 2, 'IndustryNews.aspx')
insert into Menu values(5, '公司新闻', 2, 'CompanyNews.aspx')
insert into Menu values(6, '联系我们', 3, 'ContactUs.aspx')
insert into Menu values(7, '招聘信息', 3, 'JobInfo.aspx')

SqlDataAdapter da = new SqlDataAdapter("select * from Menu", connectionString);
DataSet ds = new DataSet();
da.Fill(ds, "Menu");

dataGridTree.DataKeyField = "MenuID";
dataGridTree.TextField = "MenuName";
dataGridTree.ParentField = "ParentID";
dataGridTree.NodeStyle.CssClass = "treeNode";
dataGridTree.RootNodeStyle.CssClass = "treeRoot";
dataGridTree.ParentNodeStyle.CssClass = "treeParent";
dataGridTree.ExpandImageUrl = "images/expand.gif";
dataGridTree.CollapseImageUrl = "images/collapse.gif";
dataGridTree.DataBind();

// 实现树形菜单导航
string currentPage = Path.GetFileName(Request.Path);
DataGridTreeNode currentNode = dataGridTree.FindNodeByValue(currentPage);
while (currentNode != null) {
    currentNode.Expanded = true;
    currentNode = currentNode.Parent;
}

<div>
    <asp:DataGridTree ID="dataGridTree" runat="server" OnNodeClick="dataGridTree_NodeClick"></asp:DataGridTree>
</div>

<script>
    function dataGridTree_NodeClick(sender, args) {
        var url = args.node.Tag;
        location.href = url;
    }
</script>

以上就是使用DataGridTree控件实现下拉树的方法，以及两个示例的说明。