用户控件
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs" Inherits="MultiDropdownSample.WebUserControl2" %>
<script language="javascript" type="text/javascript">
// window.onload = function (ctlId) {
// //CloseTree(ctlId);
// debugger;
// alert("aa");
// }
// function OpenTree(ctlId) {
// var obj = document.getElementById(ctlId + "TreeView1");
// obj.style.visibility = "hidden";
// obj.style.height = "0px";
// }
function OpenTree(ctlId) {
var Panel = document.getElementById(ctlId + "PanelTree");
Panel.style.height = "500px";
// alert("kai");
// var lstBox = document.getElementById(ctlId + "DDList");
// var div = document.getElementById("divTree");
// div.style.display = '';
var obj = document.getElementById(ctlId + "TreeView1");
if (obj.style.visibility == "visible") {
CloseTree(ctlId);
}
else {
obj.style.visibility = "visible";
obj.style.height = "100px";
}
}
function CloseTree(ctlId) {
//debugger;
var obj = document.getElementById(ctlId + "TreeView1");
obj.style.visibility = "hidden";
obj.style.height = "0px";
// if (obj.style.visibility == "visible") {
// CloseListBox(ctlId);
// }
// else {
// obj.style.visibility = "visible";
// obj.style.height = "100px";
// }
}
function CloseListBox(ctlId) {
var panel = document.getElementById(ctlId + "Panel2");
var tabl = document.getElementById(ctlId + "Table2");
// var lstBox = document.getElementById(ctlId + "DDList");
var lstBox = document.getElementById(ctlId + "PanelTree");
lstBox.style.visibility = "hidden";
lstBox.style.height = "0px";
panel.style.height = tabl.style.height;
}
function OnTreeNodeChecked(ctlId) {
var ele = event.srcElement;
if(ele.type=='checkbox')
{
var childrenDivID = ele.id.replace('CheckBox','Nodes');
var div = document.getElementById(childrenDivID);
if(div==null)return;
var checkBoxs = div.getElementsByTagName('INPUT');
for(var i=0;i<checkBoxs.length;i++)
{
if(checkBoxs[i].type=='checkbox')
checkBoxs[i].checked=ele.checked;
}
}
//点?击÷复′选?框ò时±触¥发¢事?件t
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
</script>
<script language="javascript" type="text/javascript">
//checkbox点?击÷事?件t
function OnCheckEvent(ctlID)
{
var objNode = event.srcElement;
if(objNode.tagName != "INPUT" || objNode.type != "checkbox")
return;
//获?得?当±前°树÷结á点?
var ck_ID = objNode.getAttribute("ID");
var node_ID = ck_ID.substring(0,ck_ID.indexOf("CheckBox")) + "Nodes";
var curTreeNode = document.getElementById(node_ID);
//级?联a选?择?
SetChildCheckBox(curTreeNode,objNode.checked);
SetParentCheckBox(objNode);
//点?击÷复′选?框ò时±触¥发¢事?件t
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
//子ó结á点?字?符?串?
var childIds = "";
//获?取?子ó结á点?ID数y组é
function GetChildIdArray(parentNode)
{
if (parentNode == null)
return;
var childNodes = parentNode.children;
var count = childNodes.length;
for(var i = 0;i < count;i ++)
{
var tmpNode = childNodes[i];
if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")
{
childIds = tmpNode.id + ":" + childIds;
}
GetChildIdArray(tmpNode);
}
}
//设è置?子ó结á点?的?checkbox
function SetChildCheckBox(parentNode,checked)
{
if(parentNode == null)
return;
var childNodes = parentNode.children;
var count = childNodes.length;
for(var i = 0;i < count;i ++)
{
var tmpNode = childNodes[i];
if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")
{
tmpNode.checked = checked;
}
SetChildCheckBox(tmpNode,checked);
}
}
//设è置?父?结á点?的?checkbox
function SetParentCheckBox(childNode)
{
if(childNode == null)
return;
var parent = childNode.parentNode;
if(parent == null || parent == "undefined")
return;
do
{
parent = parent.parentNode;
}
while (parent && parent.tagName != "DIV");
if(parent == "undefined" || parent == null)
return;
var parentId = parent.getAttribute("ID");
var objParent = document.getElementById(parentId);
childIds = "";
GetChildIdArray(objParent);
//判D断?子ó结á点?状′态?
childIds = childIds.substring(0,childIds.length - 1);
var aryChild = childIds.split(":");
var result = false;
//当±子ó结á点?的?checkbox状′态?有D一?个?为atrue,?其?父?结á点?checkbox状′态?即′为atrue,否?则ò为afalse
for(var i in aryChild)
{
var childCk = document.getElementById(aryChild[i]);
if(childCk.checked)
result = true;
}
parentId = parentId.replace("Nodes","CheckBox");
var parentCk = document.getElementById(parentId);
if(parentCk == null)
return;
if(result)
parentCk.checked = true;
else
parentCk.checked = false;
SetParentCheckBox(parentCk);
}
</script>
<%--<asp:panel id="Panel2" Height="1px" runat="server" Width="160px" BackColor="White">--%>
<TABLE id="Table2" style="TABLE-LAYOUT: fixed; HEIGHT: 24px" cellSpacing="0" borderColorDark="#cccccc"
cellPadding="0" width="100%" borderColorLight="#7eb3e3" border="1" runat="server">
<TR id="rowDD" style="HEIGHT: 15px" runat="server">
<TD noWrap>
<asp:Label id="DDLabel" style="CURSOR: default" runat="server" Width="100%" ToolTip="" Font-Size="Smaller"
Font-Names="Arial" BorderColor="Transparent" BorderStyle="None" height="15px"></asp:Label></TD>
<TD id="colDDImage" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #7eb3e3"
width="20" background="Image/DDImage.bmp" runat="server"></TD>
</TR>
</TABLE>
<asp:Panel ID="PanelTree" runat="server" Width="100%">
<div style="Z-INDEX: 9999; POSITION: absolute" >
<asp:TreeView ID="TreeView1" runat="server" Width="100%" ShowCheckBoxes="All">
</asp:TreeView>
</div>
</asp:Panel>
<%--</asp:panel> --%>
后台cs代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
namespace MultiDropdownSample
{
public partial class WebUserControl2 : System.Web.UI.UserControl
{
// protected System.Web.UI.WebControls.TreeView DDList;
private string _SelectedText;
#region Public properties
/// <summary>
/// Get and Set the width of the Dropdown
/// </summary>
//public double ListWidth
//{
// get { return Panel2.Width.Value; }
// set { Panel2.Width = (Unit)value; }
//}
/// <summary>
/// Gets arraylist of selected values
/// </summary>
public ArrayList SelectedValues
{
get
{
ArrayList selectedValues = new ArrayList();
//foreach (System.Web.UI.WebControls.ListItem li in TreeView1.CheckedNodes)
//{
// if (li.Selected)
// { selectedValues.Add(li.Value); }
//}
foreach (TreeNode item in TreeView1.CheckedNodes)
{
if (item.Checked)
{
selectedValues.Add(item.Value);
}
}
return selectedValues;
}
}
/// <summary>
/// Gets arraylist of selected texts
/// </summary>
public ArrayList SelectedTexts
{
get
{
ArrayList selectedTexts = new ArrayList();
//foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)
//{
// if (li.Selected)
// { selectedTexts.Add(li.Text); }
//}
foreach (TreeNode item in TreeView1.CheckedNodes)
{
if (item.Checked)
{
selectedTexts.Add(item.Text);
}
}
return selectedTexts;
}
}
/// <summary>
/// Gets the selected text , the items are separated by comma
/// </summary>
public string SelectedText
{
get
{
string selText = string.Empty;
//foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)
//{
// if (li.Selected)
// { selText += li.Text + ","; }
//}
foreach (TreeNode item in TreeView1.CheckedNodes)
{
if (item.Checked)
{
selText += item.Text + ",";
}
}
if (selText.Length > 0)
selText = selText.Length > 0 ? selText.Substring(0, selText.Length - 1) : selText;
return selText;
}
set
{
_SelectedText = value;
DDLabel.Text = _SelectedText;
DDLabel.ToolTip = _SelectedText;
}
}
/// <summary>
/// Gets the selected items of the list
/// </summary>
public ArrayList SelectedItems
{
get
{
ArrayList selectedItems = new ArrayList();
//foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)
//{
// if (li.Selected)
// { selectedItems.Add(li); }
//}
foreach (TreeNode item in TreeView1.CheckedNodes)
{
if (item.Checked)
{
selectedItems.Add(item);
}
}
return selectedItems;
}
set
{
ArrayList selectedItems = value;
string selText = string.Empty;
// Deselect all the selected items
//foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)
//{ li.Selected = false; }
foreach (TreeNode item in TreeView1.CheckedNodes)
{
item.Checked = false;
}
// Select the items from the list
//foreach (System.Web.UI.WebControls.ListItem selItem in selectedItems)
//{
// System.Web.UI.WebControls.ListItem li = DDList.Items.FindByText(selItem.Text);
// if (li != null)
// { li.Selected = true; selText += li.Text + ","; }
//}
foreach (TreeNode selItem in selectedItems)
{
TreeNode node = TreeView1.FindNode(Server.HtmlEncode(selItem.Text.Trim()));
if (node != null)
{
node.Checked = true;
selText += node.Text + ",";
}
//TreeNode item=this.TreeView1.Nodes.IndexOf(..FindNode(.CheckedNodes..Contains(selItem)
}
if (selText.Length > 0)
selText = selText.Length > 0 ? selText.Substring(0, selText.Length - 1) : selText;
SelectedText = selText;
}
}
/// <summary>
/// Gets the list
/// </summary>
public System.Web.UI.WebControls.TreeView TreeViewList
{
get { return this.TreeView1; }
set { TreeView1 = TreeViewList; }
}
#endregion
#region Public methods
/// <summary>
/// Remove all items in the list
/// </summary>
public void Clear()
{
this.TreeView1.Nodes.Clear();// DDList.Items.Clear();
}
#endregion
#region Private methods
/// <summary>
/// Set the attributes of the controls
/// </summary>
public void PageInit()
{
string ctlID = this.UniqueID + "_";
//TreeView1.Attributes.Add("onchange", "SelectedIndexChanged('" + ctlID + "');");
//TreeView1.Attributes.Add("onmouseout", "CloseListBox('" + ctlID + "');");
//PanelTree.Attributes.Add("onmouseout", "CloseListBox('" + ctlID + "');");
// DDLabel.Attributes.Add("onclick", "OpenListBox('" + ctlID + "');");
// colDDImage.Attributes.Add("onclick", "OpenListBox('" + ctlID + "');");
//SetTreeNodeAutoSelectParentNodeHandle
//TreeView1.Attributes.Add("onclick", "SetTreeNodeAutoSelectParentNodeHandle('" + ctlID + "');");
//TreeView1.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");
DDLabel.Attributes.Add("onclick", "OpenTree('" + ctlID + "');");
colDDImage.Attributes.Add("onclick", "OpenTree('" + ctlID + "');");
TreeView1.Attributes.Add("onmouseover", "OpenTree('" + ctlID + "');");
PanelTree.Attributes.Add("onmouseout", "CloseTree('" + ctlID + "');");
//TreeView1.Attributes.Add("OnClick", "OnTreeNodeChecked('" + ctlID + "');");
TreeView1.Attributes.Add("onclick", "OnCheckEvent('" + ctlID + "');");
// this.Attributes.Add("onload", "CloseTree('" + ctlID + "');");
if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "onloadjs"))
Page.ClientScript.RegisterStartupScript(this.GetType(), "onloadjs",
"window.onload = function() { CloseTree('" + ctlID + "');};", true);
}
/// <summary>
/// Page load event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
PageInit();
TreeView1.Height = 0;
if (TreeView1.Nodes.Count > 0)
DDLabel.Text = TreeView1.Nodes[0].Text;
else
DDLabel.Text = string.Empty;
}
else
{ // set the selected text and tooltip
DDLabel.Text = SelectedText;
DDLabel.ToolTip = SelectedText;
}
string ctlID = this.UniqueID + "_";
}
#endregion
}
}
调用示例
webForm.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="MultiDropdownSample.WebForm3" %>
<%@ Register TagPrefix="uc1" TagName="WebUserControl2" Src="WebUserControl2.ascx" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" >
<div height="55px">
<uc1:WebUserControl2 id="MultiSelectDropDown1" runat="server"></uc1:WebUserControl2>
</div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
</form>
</body>
</html>
pageload 事件
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
MultiSelectDropDown1.Clear();
//MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Apple", "1"));
//MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Grapes", "2"));
//MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Orange", "3"));
//MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Strawberry", "4"));
//MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Water Melon", "5"));
//MultiSelectDropDown1.TreeViewList.Nodes.Add(new TreeNode { Text = "1" });
TreeNode userTools = new TreeNode();
userTools.Text = "User Tools";
MultiSelectDropDown1.TreeViewList.Nodes.Add(userTools);
TreeNode userTool1 = new TreeNode();
userTool1.Text = "User Tool 1";
MultiSelectDropDown1.TreeViewList.Nodes[MultiSelectDropDown1.TreeViewList.Nodes.IndexOf(userTools)].ChildNodes.Add(userTool1);
// tree.Nodes[0].Nodes.Add(userTool1); // This also works
TreeNode userTool2 = new TreeNode();
userTool2.Text = "User Tool 2";
MultiSelectDropDown1.TreeViewList.Nodes[MultiSelectDropDown1.TreeViewList.Nodes.IndexOf(userTools)].ChildNodes[userTools.ChildNodes.IndexOf(userTool1)].ChildNodes.Add(userTool2);
// tree.Nodes[0].Nodes[0].Nodes.Add(userTool2); // This also works
}
}