昨日在在做项目的时刻用DHTMLX Tree做了一个树形的实例。觉得还挺好用的。。今日觉得没什么事做。就想着用.NET自带的控件去做一下树。。
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
<script src="JavaScript/jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript" type="text/javascript">
//收集被选中的项
function CheckAllItems() {
var allcheckboxs = $("input[@type=checkbox][checked]");
var ids = "";
for (var i = 0; i < allcheckboxs.length; i++) {
var id = $(allcheckboxs[i]).val();
if (id != "all") {
ids = ids + id;
ids = ids + "|";
}
}
if (ids == "") {
alert("您还没有选择联系人,请重新选择")
}
else {
alert(ids.substr(0, ids.length - 1));
}
}
//全部选中与全部取消
function CheckAll(obj) {
$("input[@type=checkbox]").attr("checked", $(obj).attr("checked"));
}
//分组选中
function CheckGroup(obj, i) {
$("input[@type=checkbox][@name=CbLinkman" + i + "]").attr("checked", $(obj).attr("checked"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server"
ShowLines="True" ExpandDepth="1" >
</asp:TreeView>
<input id="aa" type="button" onclick="CheckAllItems();" value="确定"/>
</div>
</form>
</body>
</html>
后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
AddTreeView();
}
}
/// <summary>
/// 创建人:周昕
/// 创建时间:2009-7-18
/// 方法名称:GetGroup
/// 作用:返回所有的组名和组ID
/// </summary>
/// <param name="a">用户ID</param>
/// <returns>DataTable</returns>
public DataTable GetGroup(int a)
{
string StrConftr = ConfigurationManager.ConnectionStrings["constr"].ToString();
string sql = "select GroupID,GroupName from CardGroup where BelongToC='" + a + "'";
SqlConnection mycon=new SqlConnection();
mycon.ConnectionString=StrConftr;
mycon.Open();
SqlDataAdapter myda = new SqlDataAdapter(sql, mycon);
DataSet myset = new DataSet();
myda.Fill(myset);
DataTable dt = new DataTable();
dt = myset.Tables[0];
mycon.Close();
return dt;
}
/// <summary>
/// 创建人:周昕
///创建时间:2009-7-18
///方法名称GetCardGroup
/// </summary>返加组下面的电话号码和联系人名
/// <param name="a">用户ID</param>
/// <param name="b">组ID</param>
/// <returns>DataTable</returns>
public DataTable GetCardGroup(int a, int b)
{
string StrConftr = ConfigurationManager.ConnectionStrings["constr"].ToString();
string sql = "select FullName,Mobile from NameCard where CustomerID='" + a + "' and GroupID='"+b+"' ";
SqlConnection mycon = new SqlConnection();
mycon.ConnectionString = StrConftr;
mycon.Open();
SqlDataAdapter myda = new SqlDataAdapter(sql, mycon);
DataSet myset = new DataSet();
myda.Fill(myset);
DataTable dt = new DataTable();
dt = myset.Tables[0];
mycon.Close();
return dt;
}
/// <summary>
/// 创建人:周昕
/// 创建时间:2009-7-18
/// 方法名称:AddTreeView
/// 作用:生成树
/// </summary>
public void AddTreeView()
{
TreeNode aa = new TreeNode();
aa.Text = "<input name='Checkall' type='checkbox' onclick='CheckAll(this)' value='all'/>联系人";
DataTable dt = GetGroup(1);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
TreeNode bb = new TreeNode();
bb.Text = "<input name='checkgroup" + i + "' type='checkbox' onclick='CheckGroup(this," + i + ")' value='all'/>" + dt.Rows[i][1].ToString();
DataTable mydt = GetCardGroup(1, Convert.ToInt32(dt.Rows[i][0].ToString()));
if (mydt.Rows.Count > 0)
{
for (int j = 0; j < mydt.Rows.Count; j++)
{
TreeNode cc = new TreeNode();
cc.Text = "<input name='CbLinkman" + i + "' type=\"checkbox\" value=\"" + mydt.Rows[j][1].ToString() + "\" />" + mydt.Rows[j][0].ToString();
bb.ChildNodes.Add(cc);
}
}
aa.ChildNodes.Add(bb);
}
}
TreeView1.Nodes.Add(aa);
}
}
图片效果:
这个可以全选:分组选择。点确定按钮后可以得到你想要的值;这个是为了得到效果。代码的优化方面没有去考虑。不足之处还请大家提出