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()");
}
}
}
浙公网安备 33010602011771号