TreeView 控件树节点 TreeNode 的异步加载及对节点 CHECKBOX 的多选控制
代码目标：以树型表达组织单位和下属用户的层次结构关系，并允许通过CHECKBOX多选组织和/或用户
其他需求：组织单位总数约三千个，用户总数约四万人。
环境：.NET Framework 1.1
IDE：Visual Studio.NET 2003
1. OrgXMLCreator.aspx 是一个空白的 Web 窗体
OrgXMLCreator.aspx.cs 目的是生成组织节点，内容片段如下：
private
void
Page_Load(
object
sender, System.EventArgs e)
{
string orgID = Request.QueryString[ " oid " ].ToString().Trim();
Response.ContentEncoding = System.Text.UTF8Encoding.UTF8;
if (orgID.Length > 0 )
{
Response.Write (CreateXml(orgID));
}
Response.End();
}
public string CreateXml( string orgID)
{
StringBuilder sb = new StringBuilder();
// sb.Append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\r\n");
sb.Append( " <TREENODES>\r\n " );
if (orgID != " 0 " )
{
// ======== inner node ================
// set attribute NodeData to userid
sb.Append( " <TreeNode NodeData=\ "" );
sb.Append( " 0 " );
// set attribute Text to zhname
sb.Append( " \ " Text = \ "" );
sb.Append( " 直属用户 " );
sb.Append( " \ " " );
// set other attributes
sb.Append( " Checkbox=\ " false \ " Type=\ " None\ " Expanded=\ " true \ " " );
sb.Append( " TreeNodeSrc=\ " UserXMLCreator.aspx ? oid = " ); // 直属用户的立即异步加载
sb.Append(orgID);
sb.Append( " \ " " );
sb.Append( " >\r\n " );
sb.Append( " </TreeNode> " );
// ====================================
}
DataTable dt = new DataTable();
dt = DataProvider.Instance.GetChildOrg(orgID).Tables[ 0 ];
sb.Append(CreateList(dt));
sb.Append( " </TREENODES> " );
return sb.ToString();
}
protected string CreateList(DataTable dt)
{
StringBuilder sb = new StringBuilder();
try
{
DataRow[] drs = dt.Select( " 1=1 " , " Showorder " );
foreach (DataRow dr in drs)
{
sb.Append(CreateElement(dr));
}
return sb.ToString();
}
catch
{
return "" ;
}
}
protected string CreateElement(DataRow dr)
{
StringBuilder sb = new StringBuilder();
string id = dr[ " id " ].ToString();
// set attribute NodeData to userid
sb.Append( " <TreeNode NodeData=\ "" );
sb.Append(id);
// set attribute Text to zhname
sb.Append( " \ " Text = \ "" );
sb.Append(dr[ " name " ].ToString());
sb.Append( " \ " " );
// set other attributes
if (dr[ " hasPermission " ].ToString().Equals( " 1 " ))
{
sb.Append( " Checkbox=\ " true \ " Type=\ " OU\ " Expanded=\ " false \ " " );
}
else
{
sb.Append( " Checkbox=\ " false \ " Type=\ " OU\ " Expanded=\ " false \ " " );
}
sb.Append( " TreeNodeSrc=\ " OrgXMLCreator.aspx ? oid = " ); // 子组织的延迟异步加载
sb.Append(id);
sb.Append( " \ " " );
sb.Append( " >\r\n " );
sb.Append( " </TreeNode> " );
return sb.ToString();
}
{
string orgID = Request.QueryString[ " oid " ].ToString().Trim();
Response.ContentEncoding = System.Text.UTF8Encoding.UTF8;
if (orgID.Length > 0 )
{
Response.Write (CreateXml(orgID));
}
Response.End();
}
public string CreateXml( string orgID)
{
StringBuilder sb = new StringBuilder();
// sb.Append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\r\n");
sb.Append( " <TREENODES>\r\n " );
if (orgID != " 0 " )
{
// ======== inner node ================
// set attribute NodeData to userid
sb.Append( " <TreeNode NodeData=\ "" );
sb.Append( " 0 " );
// set attribute Text to zhname
sb.Append( " \ " Text = \ "" );
sb.Append( " 直属用户 " );
sb.Append( " \ " " );
// set other attributes
sb.Append( " Checkbox=\ " false \ " Type=\ " None\ " Expanded=\ " true \ " " );
sb.Append( " TreeNodeSrc=\ " UserXMLCreator.aspx ? oid = " ); // 直属用户的立即异步加载
sb.Append(orgID);
sb.Append( " \ " " );
sb.Append( " >\r\n " );
sb.Append( " </TreeNode> " );
// ====================================
}
DataTable dt = new DataTable();
dt = DataProvider.Instance.GetChildOrg(orgID).Tables[ 0 ];
sb.Append(CreateList(dt));
sb.Append( " </TREENODES> " );
return sb.ToString();
}
protected string CreateList(DataTable dt)
{
StringBuilder sb = new StringBuilder();
try
{
DataRow[] drs = dt.Select( " 1=1 " , " Showorder " );
foreach (DataRow dr in drs)
{
sb.Append(CreateElement(dr));
}
return sb.ToString();
}
catch
{
return "" ;
}
}
protected string CreateElement(DataRow dr)
{
StringBuilder sb = new StringBuilder();
string id = dr[ " id " ].ToString();
// set attribute NodeData to userid
sb.Append( " <TreeNode NodeData=\ "" );
sb.Append(id);
// set attribute Text to zhname
sb.Append( " \ " Text = \ "" );
sb.Append(dr[ " name " ].ToString());
sb.Append( " \ " " );
// set other attributes
if (dr[ " hasPermission " ].ToString().Equals( " 1 " ))
{
sb.Append( " Checkbox=\ " true \ " Type=\ " OU\ " Expanded=\ " false \ " " );
}
else
{
sb.Append( " Checkbox=\ " false \ " Type=\ " OU\ " Expanded=\ " false \ " " );
}
sb.Append( " TreeNodeSrc=\ " OrgXMLCreator.aspx ? oid = " ); // 子组织的延迟异步加载
sb.Append(id);
sb.Append( " \ " " );
sb.Append( " >\r\n " );
sb.Append( " </TreeNode> " );
return sb.ToString();
}
2. UserXMLCreator.aspx 是一个空白的 Web 窗体
UserXMLCreator.aspx.cs 目的是生成用户节点，内容片段如下：
private
void
Page_Load(
object
sender, System.EventArgs e)
{
string orgID = Request.QueryString[ " oid " ].ToString().Trim();
Response.ContentEncoding = System.Text.UTF8Encoding.UTF8;
if (orgID.Length > 0 )
{
Response.Write (CreateXml(orgID));
}
Response.End();
}
public string CreateXml( string orgID)
{
StringBuilder sb = new StringBuilder();
// sb.Append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\r\n");
sb.Append( " <TREENODES>\r\n " );
DataTable dt = new DataTable();
dt = DataProvider.Instance.GetUsersInOrganization(orgID).Tables[ 0 ];
sb.Append(CreateList(dt));
sb.Append( " </TREENODES> " );
return sb.ToString();
}
protected string CreateList(DataTable dt)
{
StringBuilder sb = new StringBuilder();
try
{
DataRow[] drs = dt.Select();
foreach (DataRow dr in drs)
{
sb.Append(CreateElement(dr));
}
return sb.ToString();
}
catch
{
return "" ;
}
}
protected string CreateElement(DataRow dr)
{
StringBuilder sb = new StringBuilder();
string id = dr[ " id " ].ToString();
// set attribute NodeData to userid
sb.Append( " <TreeNode NodeData=\ "" );
sb.Append(id);
// set attribute Text to zhname
sb.Append( " \ " Text = \ "" );
sb.Append(dr[ " zhname " ].ToString());
sb.Append( " \ " " );
// set other attributes
sb.Append( " Checkbox=\ " true \ " Type=\ " user\ " Expanded=\ " false \ " " );
sb.Append( " >\r\n " );
sb.Append( " </TreeNode> " );
return sb.ToString();
}
{
string orgID = Request.QueryString[ " oid " ].ToString().Trim();
Response.ContentEncoding = System.Text.UTF8Encoding.UTF8;
if (orgID.Length > 0 )
{
Response.Write (CreateXml(orgID));
}
Response.End();
}
public string CreateXml( string orgID)
{
StringBuilder sb = new StringBuilder();
// sb.Append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\r\n");
sb.Append( " <TREENODES>\r\n " );
DataTable dt = new DataTable();
dt = DataProvider.Instance.GetUsersInOrganization(orgID).Tables[ 0 ];
sb.Append(CreateList(dt));
sb.Append( " </TREENODES> " );
return sb.ToString();
}
protected string CreateList(DataTable dt)
{
StringBuilder sb = new StringBuilder();
try
{
DataRow[] drs = dt.Select();
foreach (DataRow dr in drs)
{
sb.Append(CreateElement(dr));
}
return sb.ToString();
}
catch
{
return "" ;
}
}
protected string CreateElement(DataRow dr)
{
StringBuilder sb = new StringBuilder();
string id = dr[ " id " ].ToString();
// set attribute NodeData to userid
sb.Append( " <TreeNode NodeData=\ "" );
sb.Append(id);
// set attribute Text to zhname
sb.Append( " \ " Text = \ "" );
sb.Append(dr[ " zhname " ].ToString());
sb.Append( " \ " " );
// set other attributes
sb.Append( " Checkbox=\ " true \ " Type=\ " user\ " Expanded=\ " false \ " " );
sb.Append( " >\r\n " );
sb.Append( " </TreeNode> " );
return sb.ToString();
}
3. TreeCreator.aspx 负责产生整棵树，并为用户提供对树节点的操作界面
1）用于产生树的代码片段
在 aspx 页面头部声明使用 Microsoft.Web.UI.WebControls 控件集合：
<%
@ Register TagPrefix
=
"
iewc
"
Namespace
=
"
Microsoft.Web.UI.WebControls
"
Assembly
=
"
Microsoft.Web.UI.WebControls
"
%>
在 aspx 页面中声明使用微软的 TreeView 控件：
<
iewc:treeview
id
="TreeView1"
runat
="server"
ExpandedImageUrl
="images/folderopen.gif"
SystemImagesPath
="/webctrl_client/1_0/treeimages/"
ImageUrl
="images/folder.gif"
EnableViewState
="False"
></
iewc:treeview
>
用于初始化树的 JS 代码：
<
script language
=
"
javascript
"
>
function InitTree()
{
TreeView1.treeNodeSrc = " OrgXMLCreator.aspx?oid=0 " ; // 根节点，延迟异步加载其下属节点
TreeView1.databind();
}
</ script >
function InitTree()
{
TreeView1.treeNodeSrc = " OrgXMLCreator.aspx?oid=0 " ; // 根节点，延迟异步加载其下属节点
TreeView1.databind();
}
</ script >
用于立即初始化树的 HTML 代码：
<
body
onload
="javascript:InitTree();"
>
2）控制树节点 CHECKBOX 多选操作的通用 JS 代码
var
ids
=
""
;
var uids = "" ;
var orgName = "" ;
function tree_oncheck(tree) // 鼠标选中时激发的事件
{
var selectNode = tree.getTreeNode(tree.clickedNodeIndex)
CheckChildren(tree,selectNode.getChildren(),selectNode.getAttribute( " checked " ));
CheckParent(tree,selectNode.getParent(),selectNode.getAttribute( " checked " ));
orgName = "" ;
ids = "" ;
uids = "" ;
GetSelectIDs(tree);
}
function GetChildren(Node) // 获取某个节点的下级节点
{
var NodeArray = new Array();
NodeArray = Node.getChildren();
if (NodeArray.length == 0 )
{
return ;
}
for ( var i = 0 ;i < NodeArray.length;i ++ )
{
var cNode = NodeArray[i];
if (cNode.getAttribute( " Checked " ))
{
orgName += " [ " + getFullPath(cNode) + cNode.getAttribute('Text') + " ] " ;
if (cNode.getAttribute( " Type " ) == " ou " )
{
if (ids != "" ){
ids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
ids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
else if (cNode.getAttribute( " Type " ) == " user " )
{
if (uids != "" ){
uids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
uids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
}
else
{
GetChildren(cNode);
}
}
}
function GetSelectIDs(tree) // 获取整棵树有哪些节点被选中了
{
var NodeArray = new Array();
NodeArray = tree.getChildren();
for ( var i = 0 ;i < NodeArray.length;i ++ )
{
var cNode = NodeArray[i];
if (cNode.getAttribute( " Checked " ))
{
orgName += " [ " + getFullPath(cNode) + cNode.getAttribute('Text') + " ] " ;
if (cNode.getAttribute( " Type " ) == " ou " )
{
if (ids != "" ){
ids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
ids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
else if (cNode.getAttribute( " Type " ) == " user " )
{
if (uids != "" ){
uids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
uids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
}
else
{
GetChildren(cNode);
}
}
document.getElementById( " hiddenOrgName " ).innerText = orgName;
document.getElementById( " hiddenOrgID " ).innerText = ids;
document.getElementById( " hiddenUsrID " ).innerText = uids;
}
function CheckChildren(tree,Nodes,TF) // 自动选中下属节点
{
var dft = 0 ;
if (parseInt(Nodes.length) == 0 )
{
return ;
}
else
{
for ( var i = 0 ;i < parseInt(Nodes.length);i ++ )
{
Nodes[i].setAttribute( " Checked " ,TF);
CheckChildren(tree,Nodes[i].getChildren(),TF);
}
}
}
function CheckParent(tree,Node,TF) // 自动选中父级、爷爷级、太公级的节点
{
if (Node == null )
{
return ;
}
else
{
if (TF)
{
}
else
{
Node.setAttribute( " Checked " , false );
CheckParent(tree,Node.getParent(), false );
}
}
}
function tree_onclick(tree) // 点击节点文字激发的事件
{
// alert(tree.getTreeNode(tree.clickedNodeIndex).getAttribute("Text"));
try
{
var selectNode = tree.getTreeNode(tree.clickedNodeIndex)
// alert(document.getElementById("lblNewOrgName").innerText);
if (selectNode.getAttribute('NodeData') == null )
{
// alert("您不是该组织的管理员！移动到该组织");
}
else
{
document.getElementById( " hiddenOrgID " ).innerText += selectNode.getAttribute('NodeData') + ' | ';
var txt = getFullPath(selectNode) + selectNode.getAttribute('Text');
document.getElementById( " lblNewOrgName " ).innerHTML += " [ " + txt + " ] " ;
}
if (selectNode.getAttribute('Expanded'))
{
selectNode.setAttribute('Expanded','False');
}
else
{
selectNode.setAttribute('Expanded','True');
}
}
catch (e)
{
throw e;
}
}
function getFullPath(node) // 取得节点的完整路径，获得路径中各级节点的文字并用“－”分隔开。
{
var baseNode = node.getParent();
if (baseNode != null )
{
var txt = baseNode.getAttribute('Text');
// alert(txt);
return getFullPath(baseNode) + txt + " -- " ;
}
return "" ;
}
var uids = "" ;
var orgName = "" ;
function tree_oncheck(tree) // 鼠标选中时激发的事件
{
var selectNode = tree.getTreeNode(tree.clickedNodeIndex)
CheckChildren(tree,selectNode.getChildren(),selectNode.getAttribute( " checked " ));
CheckParent(tree,selectNode.getParent(),selectNode.getAttribute( " checked " ));
orgName = "" ;
ids = "" ;
uids = "" ;
GetSelectIDs(tree);
}
function GetChildren(Node) // 获取某个节点的下级节点
{
var NodeArray = new Array();
NodeArray = Node.getChildren();
if (NodeArray.length == 0 )
{
return ;
}
for ( var i = 0 ;i < NodeArray.length;i ++ )
{
var cNode = NodeArray[i];
if (cNode.getAttribute( " Checked " ))
{
orgName += " [ " + getFullPath(cNode) + cNode.getAttribute('Text') + " ] " ;
if (cNode.getAttribute( " Type " ) == " ou " )
{
if (ids != "" ){
ids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
ids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
else if (cNode.getAttribute( " Type " ) == " user " )
{
if (uids != "" ){
uids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
uids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
}
else
{
GetChildren(cNode);
}
}
}
function GetSelectIDs(tree) // 获取整棵树有哪些节点被选中了
{
var NodeArray = new Array();
NodeArray = tree.getChildren();
for ( var i = 0 ;i < NodeArray.length;i ++ )
{
var cNode = NodeArray[i];
if (cNode.getAttribute( " Checked " ))
{
orgName += " [ " + getFullPath(cNode) + cNode.getAttribute('Text') + " ] " ;
if (cNode.getAttribute( " Type " ) == " ou " )
{
if (ids != "" ){
ids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
ids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
else if (cNode.getAttribute( " Type " ) == " user " )
{
if (uids != "" ){
uids += " , " + " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
else {
uids += " \' " + cNode.getAttribute( " NodeData " ) + " \' " ;
}
}
}
else
{
GetChildren(cNode);
}
}
document.getElementById( " hiddenOrgName " ).innerText = orgName;
document.getElementById( " hiddenOrgID " ).innerText = ids;
document.getElementById( " hiddenUsrID " ).innerText = uids;
}
function CheckChildren(tree,Nodes,TF) // 自动选中下属节点
{
var dft = 0 ;
if (parseInt(Nodes.length) == 0 )
{
return ;
}
else
{
for ( var i = 0 ;i < parseInt(Nodes.length);i ++ )
{
Nodes[i].setAttribute( " Checked " ,TF);
CheckChildren(tree,Nodes[i].getChildren(),TF);
}
}
}
function CheckParent(tree,Node,TF) // 自动选中父级、爷爷级、太公级的节点
{
if (Node == null )
{
return ;
}
else
{
if (TF)
{
}
else
{
Node.setAttribute( " Checked " , false );
CheckParent(tree,Node.getParent(), false );
}
}
}
function tree_onclick(tree) // 点击节点文字激发的事件
{
// alert(tree.getTreeNode(tree.clickedNodeIndex).getAttribute("Text"));
try
{
var selectNode = tree.getTreeNode(tree.clickedNodeIndex)
// alert(document.getElementById("lblNewOrgName").innerText);
if (selectNode.getAttribute('NodeData') == null )
{
// alert("您不是该组织的管理员！移动到该组织");
}
else
{
document.getElementById( " hiddenOrgID " ).innerText += selectNode.getAttribute('NodeData') + ' | ';
var txt = getFullPath(selectNode) + selectNode.getAttribute('Text');
document.getElementById( " lblNewOrgName " ).innerHTML += " [ " + txt + " ] " ;
}
if (selectNode.getAttribute('Expanded'))
{
selectNode.setAttribute('Expanded','False');
}
else
{
selectNode.setAttribute('Expanded','True');
}
}
catch (e)
{
throw e;
}
}
function getFullPath(node) // 取得节点的完整路径，获得路径中各级节点的文字并用“－”分隔开。
{
var baseNode = node.getParent();
if (baseNode != null )
{
var txt = baseNode.getAttribute('Text');
// alert(txt);
return getFullPath(baseNode) + txt + " -- " ;
}
return "" ;
}
代码完毕。