飞哥的海

导航

vs2008 Treeview无刷新 级联选择checkbox

 

项目中需要,级联选择Treeview上的复选框,即,当父级别被选择其子数同时被选。在网络上搜寻多时,无收获,只能自己动手丰衣足食。

关键代码:

    <script type="text/javascript">
function SelectCheckBox()
{
var o = window.event.srcElement;
var inputobj ;
if (o.tagName == "INPUT" && o.type == "checkbox")
{
var parentobj = o.parentNode ;
inputobj = o ;
while(parentobj.tagName != "TABLE")
{
parentobj = parentobj.parentNode
}
var nextobj = parentobj.nextSibling
if (nextobj.tagName != "DIV")
return ;
         var x = nextobj.getElementsByTagName("INPUT");
var s = "" ;
for ( var i = 0 ; i < x.length;i ++ )
{
if (x[i].tagName == "INPUT" && x[i].type == "checkbox")
{
if(inputobj.checked)
x[i].checked = true
else
x[i].checked = false
           }   
}
}
}
</script>
 
此段代码移植到任何地方均可使用,
下面是完整的实例,在vs2008上测试通过,
    数据库是微软提供的Sqlserver示例库(如果没有,则在google中搜索SQL2000SampleDb.msi就可以了)。
    实例中的部分代码是摘自MSDN的Treeview章节(http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.treenode.populateondemand(VS.80).aspx)

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head id="Head1" runat="server">
    <title>TreeView PopulateNodesFromClient Example</title>
    
    <script type="text/javascript">
    function SelectCheckBox()
    {     
       var o = window.event.srcElement;
       var inputobj ;       
       if (o.tagName == "INPUT" && o.type == "checkbox")
       {
 
         var parentobj = o.parentNode ;
         inputobj = o ;
         while(parentobj.tagName != "TABLE")
         {
            parentobj = parentobj.parentNode
 
         }
         var nextobj = parentobj.nextSibling 
         if (nextobj.tagName != "DIV")
           return ;
 
         var x = nextobj.getElementsByTagName("INPUT");
         var s = "" ;
         for ( var  i = 0 ; i < x.length;i ++ )
         {
           if (x[i].tagName == "INPUT" && x[i].type == "checkbox")
           {
             if(inputobj.checked)
               x[i].checked = true 
             else 
               x[i].checked = false 
              
           }   
         } 
       } 
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <h3>
          <asp:Button ID="Button1" runat="server" Height="30px" onclick="Button1_Click" 
              Text="Button" />
          TreeView PopulateNodesFromClient Example</h3>
      <asp:TreeView ID="LinksTreeView"
        Font-Names= "Arial"  
        ForeColor="Blue"
        EnableClientScript="true"
        PopulateNodesFromClient="true"  
        OnTreeNodePopulate="PopulateNode"
        runat="server" ExpandDepth="1">
        <Nodes>
          <asp:TreeNode Text="Inventory" 
            SelectAction="None"
            PopulateOnDemand="true"/>
        </Nodes>
      </asp:TreeView>
      <br /><br />
      <asp:Label id="Message" runat="server"/>
    </form>
  </body>
</html>

 

 

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.SqlClient;
 
namespace WebApplication3
{
    public partial class _Default : System.Web.UI.Page
    {
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            this.Button1.Text = this.LinksTreeView.Nodes[0].ChildNodes[0].ChildNodes[0].Text + "   " +
                this.LinksTreeView.Nodes[0].ChildNodes[0].ChildNodes[0].Checked.ToString();
        }
 
 
        protected void PopulateNode(Object sender, TreeNodeEventArgs e)
        {            
            // Call the appropriate method to populate a node at a particular level.
            switch (e.Node.Depth)
            {
                case 0:
                    // Populate the first-level nodes.
                    PopulateCategories(e.Node);
                    break;
                case 1:
                    // Populate the second-level nodes.
                    PopulateProducts(e.Node);
                    break;
                default:
                    // Do nothing.
                    break;
            }
 
        }
 
        void PopulateCategories(TreeNode node)
        {
 
            // Query for the product categories. These are the values
            // for the second-level nodes.
            DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");
 
            // Create the second-level nodes.
            if (ResultSet.Tables.Count > 0)
            {
 
                // Iterate through and create a new node for each row in the query results.
                // Notice that the query results are stored in the table of the DataSet.
                foreach (DataRow row in ResultSet.Tables[0].Rows)
                {
 
                    // Create the new node. Notice that the CategoryId is stored in the Value property 
                    // of the node. This will make querying for items in a specific category easier when
                    // the third-level nodes are created. 
                    TreeNode newNode = new TreeNode();
                    newNode.Text = row["CategoryName"].ToString();
                    newNode.Value = row["CategoryID"].ToString();
 
                    // Set the PopulateOnDemand property to true so that the child nodes can be 
                    // dynamically populated.
// ShowCheckBox 必须放在PopulateOnDemand 前面,否则复选框无法出现在树中。
                    newNode.ShowCheckBox = true;
                    if (node.Checked)
                        newNode.Checked = true;
                    newNode.PopulateOnDemand = true;
                    // Set additional properties for the node.
                    newNode.SelectAction = TreeNodeSelectAction.None;
 
                    // Add the new node to the ChildNodes collection of the parent node.
                    node.ChildNodes.Add(newNode);
 
                }
 
            }
 
        }
 
        void PopulateProducts(TreeNode node)
        {
 
            // Query for the products of the current category. These are the values
            // for the third-level nodes.
            DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);
 
            // Create the third-level nodes.
            if (ResultSet.Tables.Count > 0)
            {
 
                // Iterate through and create a new node for each row in the query results.
                // Notice that the query results are stored in the table of the DataSet.
                foreach (DataRow row in ResultSet.Tables[0].Rows)
                {
 
                    // Create the new node.
                    TreeNode NewNode = new TreeNode(row["ProductName"].ToString());
 
                    // Set the PopulateOnDemand property to false, because these are leaf nodes and
                    // do not need to be populated.
                    NewNode.ShowCheckBox = true;
                    if (node.Checked)
                        NewNode.Checked = true;
 
 
                    NewNode.PopulateOnDemand = false;
 
                    // Set additional properties for the node.
                    NewNode.SelectAction = TreeNodeSelectAction.None;
 
                    // Add the new node to the ChildNodes collection of the parent node.
                    node.ChildNodes.Add(NewNode);
 
                }
 
            }
 
        }
 
        DataSet RunQuery(String QueryString)
        {
 
            // Declare the connection string. This example uses Microsoft SQL Server 
            // and connects to the Northwind sample database.
            String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI";
 
            SqlConnection DBConnection = new SqlConnection(ConnectionString);
            SqlDataAdapter DBAdapter;
            DataSet ResultsDataSet = new DataSet();
 
            try
            {
 
                // Run the query and create a DataSet.
                DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
                DBAdapter.Fill(ResultsDataSet);
 
                // Close the database connection.
                DBConnection.Close();
 
            }
            catch (Exception ex)
            {
 
                // Close the database connection if it is still open.
                if (DBConnection.State == ConnectionState.Open)
                {
                    DBConnection.Close();
                }
 
                Message.Text = "Unable to connect to the database.";
 
            }
 
            return ResultsDataSet;
 
        }
 
        protected void LinksTreeView_SelectedNodeChanged(object sender, EventArgs e)
        {
 
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            this.LinksTreeView.Attributes.Add("onclick", "SelectCheckBox()");
        }
 
 
    }
}
 

posted on 2010-01-05 17:55  飞哥的海  阅读(2514)  评论(1)    收藏  举报