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();
}
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();
}
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>
用于立即初始化树的 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 "";
}
代码完毕。