TreeView使用技巧
2007-01-25 18:02 澜心 阅读(443) 评论(0) 编辑 收藏 举报
哈哈,使用了好久的TreeView控件,今天才发现以前的有些用法是错误的。之所以系统没有出现什么问题,是凑巧的缘故吧!今天这个程序要分多层,而且数据很多,进入页面就默认全部展开的话,感觉挺难看的(以前系统的数据数据比较少,而且用户一般要求默认全部展开的,所以一直也没有发现自己的用法是错误的)。
今天的问题是这样发现的,一开始点击一个节点的checkbox的时候,只是展开了他的下一级,当取此节点的再下一级的时候老是报这个错误 node.subtree 找不到 ,查代码,怎么也找不到原因。用google搜索了一下,受一位老兄的启示,作了修改:点击checkbox的时候,把子节点全部展开,这个问题终于解决了。
但是系统还是不正确,如果选择一个父节点(当然子节点也被选中了),然后去掉两个子节点,在点击确定的时候,那两个取消掉的节点也被取上了,怀疑也是由上一个问题的原因引起的,修改代码,程序终于正常运转了。
程序代码如下:
后台代码
前台代码:
今天的问题是这样发现的,一开始点击一个节点的checkbox的时候,只是展开了他的下一级,当取此节点的再下一级的时候老是报这个错误 node.subtree 找不到 ,查代码,怎么也找不到原因。用google搜索了一下,受一位老兄的启示,作了修改:点击checkbox的时候,把子节点全部展开,这个问题终于解决了。
但是系统还是不正确,如果选择一个父节点(当然子节点也被选中了),然后去掉两个子节点,在点击确定的时候,那两个取消掉的节点也被取上了,怀疑也是由上一个问题的原因引起的,修改代码,程序终于正常运转了。
程序代码如下:
后台代码
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
namespace test1
{
/// <summary>
/// ModulesTree 的摘要说明。
/// </summary>
public class ModulesTree : System.Web.UI.Page
{
protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
protected THS.Tools.DataAccess da = new THS.Tools.DataAccess();
protected DataTable TabTable = null;
protected DataTable TabModTable = null;
private void Page_Load(object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
TabTable = GetTabs();
TabModTable = GetModuleTabs();
InitTopTabs();
}
TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");
}
/// <summary>
/// 取网站的全部频道
/// </summary>
/// <returns></returns>
public DataTable GetTabs()
{
string sql = "select * from tabs where PortalID = 0 ";
DataSet ds = da.GetDataSet(sql);
return ds.Tables[0];
}
/// <summary>
/// 取网站的全部模块,以及所属的频道
/// </summary>
/// <returns></returns>
public DataTable GetModuleTabs()
{
string sql = "Select Modules.ModuleTitle,Modules.ModuleID,(select top 1 tabid from tabmodules td where td.moduleid = Modules.ModuleID ) as tabid From DesktopModules ,ModuleDefinitions,Modules Where DesktopModules.FriendlyName = 'c_info' and DesktopModules.DesktopModuleID = ModuleDefinitions.DesktopModuleID and Modules.ModuleDefID = ModuleDefinitions.ModuleDefID order by Modules.ModuleTitle";
DataSet ds = da.GetDataSet(sql);
return ds.Tables[0];
}
/// <summary>
/// 初始化顶层频道
/// </summary>
public void InitTopTabs()
{
DataRow[] topTab = TabTable.Select(" level = 0 ");
this.TreeView1.Nodes.Clear();
foreach(DataRow row in topTab)
{
TreeNode tn = new TreeNode();
tn.Text = row["TabName"].ToString();
tn.NodeData = "#";
tn.ImageUrl = "treeimages/folder.gif";
tn.ExpandedImageUrl = "treeimages/folderopen.gif";
tn.CheckBox = true;
BindTab( row["tabid"].ToString(),tn);
BindModules(row["tabid"].ToString(),tn);
if (tn.Nodes.Count > 0)
TreeView1.Nodes.Add(tn);
}
}
/// <summary>
/// 初始化一个频道的子频道
/// </summary>
/// <param name="parentID"></param>
/// <param name="ttn"></param>
public void BindTab(string parentID,TreeNode ttn)
{
DataRow[] TabRow = TabTable.Select(string.Format("ParentID = {0}",parentID));
foreach(DataRow row in TabRow)
{
TreeNode tn = new TreeNode();
tn.Text = row["TabName"].ToString();
tn.NodeData = "#";
tn.CheckBox = true;
tn.ImageUrl = "treeimages/folder.gif";
tn.ExpandedImageUrl = "treeimages/folderopen.gif";
BindTab( row["tabid"].ToString(),tn);
BindModules(row["tabid"].ToString(),tn);
if (tn.Nodes.Count > 0)
ttn.Nodes.Add(tn);
}
}
/// <summary>
/// 绑定一个频道下面的所有模块
/// </summary>
/// <param name="ParentTabID">频道ID</param>
/// <param name="ttn"></param>
public void BindModules(string ParentTabID,TreeNode ttn)
{
DataRow[] moduleRow = TabModTable.Select(string.Format(" tabid = {0}",ParentTabID));
foreach(DataRow row in moduleRow )
{
TreeNode tn = new TreeNode();
tn.Text = row["ModuleTitle"].ToString();
tn.NodeData = row["ModuleID"].ToString();
tn.CheckBox = true;
ttn.Nodes.Add(tn);
}
}
Web 窗体设计器生成的代码
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
namespace test1
{
/// <summary>
/// ModulesTree 的摘要说明。
/// </summary>
public class ModulesTree : System.Web.UI.Page
{
protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
protected THS.Tools.DataAccess da = new THS.Tools.DataAccess();
protected DataTable TabTable = null;
protected DataTable TabModTable = null;
private void Page_Load(object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
TabTable = GetTabs();
TabModTable = GetModuleTabs();
InitTopTabs();
}
TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");
}
/// <summary>
/// 取网站的全部频道
/// </summary>
/// <returns></returns>
public DataTable GetTabs()
{
string sql = "select * from tabs where PortalID = 0 ";
DataSet ds = da.GetDataSet(sql);
return ds.Tables[0];
}
/// <summary>
/// 取网站的全部模块,以及所属的频道
/// </summary>
/// <returns></returns>
public DataTable GetModuleTabs()
{
string sql = "Select Modules.ModuleTitle,Modules.ModuleID,(select top 1 tabid from tabmodules td where td.moduleid = Modules.ModuleID ) as tabid From DesktopModules ,ModuleDefinitions,Modules Where DesktopModules.FriendlyName = 'c_info' and DesktopModules.DesktopModuleID = ModuleDefinitions.DesktopModuleID and Modules.ModuleDefID = ModuleDefinitions.ModuleDefID order by Modules.ModuleTitle";
DataSet ds = da.GetDataSet(sql);
return ds.Tables[0];
}
/// <summary>
/// 初始化顶层频道
/// </summary>
public void InitTopTabs()
{
DataRow[] topTab = TabTable.Select(" level = 0 ");
this.TreeView1.Nodes.Clear();
foreach(DataRow row in topTab)
{
TreeNode tn = new TreeNode();
tn.Text = row["TabName"].ToString();
tn.NodeData = "#";
tn.ImageUrl = "treeimages/folder.gif";
tn.ExpandedImageUrl = "treeimages/folderopen.gif";
tn.CheckBox = true;
BindTab( row["tabid"].ToString(),tn);
BindModules(row["tabid"].ToString(),tn);
if (tn.Nodes.Count > 0)
TreeView1.Nodes.Add(tn);
}
}
/// <summary>
/// 初始化一个频道的子频道
/// </summary>
/// <param name="parentID"></param>
/// <param name="ttn"></param>
public void BindTab(string parentID,TreeNode ttn)
{
DataRow[] TabRow = TabTable.Select(string.Format("ParentID = {0}",parentID));
foreach(DataRow row in TabRow)
{
TreeNode tn = new TreeNode();
tn.Text = row["TabName"].ToString();
tn.NodeData = "#";
tn.CheckBox = true;
tn.ImageUrl = "treeimages/folder.gif";
tn.ExpandedImageUrl = "treeimages/folderopen.gif";
BindTab( row["tabid"].ToString(),tn);
BindModules(row["tabid"].ToString(),tn);
if (tn.Nodes.Count > 0)
ttn.Nodes.Add(tn);
}
}
/// <summary>
/// 绑定一个频道下面的所有模块
/// </summary>
/// <param name="ParentTabID">频道ID</param>
/// <param name="ttn"></param>
public void BindModules(string ParentTabID,TreeNode ttn)
{
DataRow[] moduleRow = TabModTable.Select(string.Format(" tabid = {0}",ParentTabID));
foreach(DataRow row in moduleRow )
{
TreeNode tn = new TreeNode();
tn.Text = row["ModuleTitle"].ToString();
tn.NodeData = row["ModuleID"].ToString();
tn.CheckBox = true;
ttn.Nodes.Add(tn);
}
}
Web 窗体设计器生成的代码
}
}
前台代码:
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<%@ Page language="c#" Codebehind="ModulesTree.aspx.cs" AutoEventWireup="false" Inherits="test1.ModulesTree" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>选择分类</title>
<script>
var v = new Array;
window.returnValue = null;
function addData(node)
{
var name = node.getAttribute("Text");
var id = node.getAttribute("nodedata");
if (id != null && id != "#")
{
var o = new Object();
o.id = id;
o.name = name;
v[v.length] = o;
}
}
//当多选时触发oncheck事件
function tree_oncheck(tree)
{
var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");
var node=tree.getTreeNode(tree.clickedNodeIndex);
//子节点必须先展开,然后再设置选中状态
node.setAttribute("expanded",true);
setcheck(node,Pchecked);
//将node节点展开,并选中他的所有子节点
//FindCheckedFromNode(TreeView1);
}
//设置子节点选中
function setcheck(node,Pc)
{
var i;
var ChildNode=new Array();
ChildNode=node.getChildren();
if(parseInt(ChildNode.length)==0)
return;
else
{
for(i=0;i<ChildNode.length;i++)
{
var cNode;
cNode=ChildNode[i];
cNode.setAttribute("Checked",Pc);
if(parseInt(cNode.getChildren().length)!=0)
{
cNode.setAttribute("expanded",true);
setcheck(cNode,Pc);
}
}
}
}
function Getall()
{
v = new Array;
var o = document.all.TreeView1.getChildren();
SetItemExpand(o);
if (v.length > 0)
{
alert(v.length);
window.returnValue = v
window.close();
}
else
{
alert("请选择分类");
}
}
//设置所有节点选中状态
function SetItemExpand(oColl)
{
var oChild;
for (var i=0;i<oColl.length;i++)
{
oChild = oColl[i];
var parse = oChild.getAttribute("Checked");
if (parse)
{
alert("True"+oChild.getAttribute("Text"));
addData(oChild);
}
SetItemExpand(oChild.getChildren());
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table borderColor="#6799cc" width="100%" cellSpacing="0" cellpadding="0" borderColorDark="#ffffff"
bgColor="#fcfbf8" borderColorLight="#6799cc" border="1">
<tr>
<td>
<div style="OVERFLOW: auto;WIDTH: 100%;HEIGHT: 422px">
<iewc:TreeView id="TreeView1" runat="server"></iewc:TreeView>
</div>
</td>
<td style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center;width:50px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td><INPUT type="button" onclick="Getall();" value="确 定" class="LinkBtn"></td>
</tr>
<tr>
<td><INPUT type="button" onclick="window.returnValue=null;window.close();" value="关 闭" class="LinkBtn"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</HTML>
<%@ Page language="c#" Codebehind="ModulesTree.aspx.cs" AutoEventWireup="false" Inherits="test1.ModulesTree" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>选择分类</title>
<script>
var v = new Array;
window.returnValue = null;
function addData(node)
{
var name = node.getAttribute("Text");
var id = node.getAttribute("nodedata");
if (id != null && id != "#")
{
var o = new Object();
o.id = id;
o.name = name;
v[v.length] = o;
}
}
//当多选时触发oncheck事件
function tree_oncheck(tree)
{
var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");
var node=tree.getTreeNode(tree.clickedNodeIndex);
//子节点必须先展开,然后再设置选中状态
node.setAttribute("expanded",true);
setcheck(node,Pchecked);
//将node节点展开,并选中他的所有子节点
//FindCheckedFromNode(TreeView1);
}
//设置子节点选中
function setcheck(node,Pc)
{
var i;
var ChildNode=new Array();
ChildNode=node.getChildren();
if(parseInt(ChildNode.length)==0)
return;
else
{
for(i=0;i<ChildNode.length;i++)
{
var cNode;
cNode=ChildNode[i];
cNode.setAttribute("Checked",Pc);
if(parseInt(cNode.getChildren().length)!=0)
{
cNode.setAttribute("expanded",true);
setcheck(cNode,Pc);
}
}
}
}
function Getall()
{
v = new Array;
var o = document.all.TreeView1.getChildren();
SetItemExpand(o);
if (v.length > 0)
{
alert(v.length);
window.returnValue = v
window.close();
}
else
{
alert("请选择分类");
}
}
//设置所有节点选中状态
function SetItemExpand(oColl)
{
var oChild;
for (var i=0;i<oColl.length;i++)
{
oChild = oColl[i];
var parse = oChild.getAttribute("Checked");
if (parse)
{
alert("True"+oChild.getAttribute("Text"));
addData(oChild);
}
SetItemExpand(oChild.getChildren());
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table borderColor="#6799cc" width="100%" cellSpacing="0" cellpadding="0" borderColorDark="#ffffff"
bgColor="#fcfbf8" borderColorLight="#6799cc" border="1">
<tr>
<td>
<div style="OVERFLOW: auto;WIDTH: 100%;HEIGHT: 422px">
<iewc:TreeView id="TreeView1" runat="server"></iewc:TreeView>
</div>
</td>
<td style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center;width:50px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td><INPUT type="button" onclick="Getall();" value="确 定" class="LinkBtn"></td>
</tr>
<tr>
<td><INPUT type="button" onclick="window.returnValue=null;window.close();" value="关 闭" class="LinkBtn"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</HTML>