环境：vs2010，sqlserver2008，jquery 1.6
实现效果：
数据库结构：
if exists (select * from sysobjects where id = OBJECT_ID('[DJ_Qxmoban]') and OBJECTPROPERTY(id, 'IsUserTable') = 1) DROP TABLE [DJ_Qxmoban]
CREATE TABLE [DJ_Qxmoban] ( [PID] [int] IDENTITY (1, 1) NOT NULL , [ProjectName] [nvarchar] (50) NOT NULL , [ProjectNameE] [nvarchar] (50) NULL , [ProjectType] [int] NOT NULL , [ProjectOrder] [int] NOT NULL )
ALTER TABLE [DJ_Qxmoban] WITH NOCHECK ADD CONSTRAINT [DF_DJ_Qxmoban_ProjectType] DEFAULT ((0)) FOR [ProjectType],CONSTRAINT [DF_DJ_Qxmoban_ProjectOrder] DEFAULT ((0)) FOR [ProjectOrder],CONSTRAINT [PK_DJ_Qxmoban] PRIMARY KEY NONCLUSTERED ( [PID] )
SET IDENTITY_INSERT [DJ_Qxmoban] ON
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 1 , '文章管理' , 'W' , 0 , 0 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 2 , '文章添加' , 'W' , 1 , 1 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 3 , '文章修改' , 'W' , 1 , 2 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 4 , '文章删除' , 'W' , 1 , 3 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 5 , '评论管理' , 'P' , 0 , 1 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 6 , '评论添加' , 'P' , 5 , 1 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 7 , '评论回复' , 'P' , 5 , 2 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 8 , '评论删除' , 'P' , 5 , 3 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 9 , '用户管理' , 'Y' , 0 , 2 )
INSERT [DJ_Qxmoban] ( [PID] , [ProjectName] , [ProjectNameE] , [ProjectType] , [ProjectOrder] ) VALUES ( 10 , '用户添加' , 'Y' , 9 , 1 )
SET IDENTITY_INSERT [DJ_Qxmoban] OFF
PID为自动增长字段
ProjectName为项目名称
ProjectNameE为项目标识，同样字母或是单词，表示为同一个项目
ProjectType为项目辨别字段，0为总项目，0以外的为总项PID，为多少，就是表示这项为PID=数值的二组分项
ProjectOrder为排序字段，分总项排序和分项排序
test1.aspx前台
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="website.test1" EnableViewState="False" %>
<!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="js/jquery-1.6.min.js" type="text/javascript"></script>
<style type="text/css">
.title
{
clear: left;
width: 100%;
background-color: #d3eaef;
text-align: left;
line-height: 25px;
text-indent: 1em;
}
.title1
{
clear: left;
width: 100%;
background-color: #FFF;
}
.xtitle
{
float: left;
width: 150px;
line-height: 25px;
text-indent: 1em;
}
#<%=qxname.ClientID%>
{
width:657px;
}
label.error {
<span style="white-space:pre"> </span>color: red;
<span style="white-space:pre"> </span>font-style: normal;
<span style="white-space:pre"> </span>display: none;
<span style="white-space:pre"> </span>text-indent: 1em;
<span style="white-space:pre"> </span>}
</style>
<script type="text/javascript" language="javascript">
$(function () {
// //点击全选后全选
// $("input[name^='All']").click(function () {
// //alert(this.name.length);
// var title = this.name;
// var re = /SelectAll/g;
// var newtitle = title.replace(re, "");
// //alert(newtitle);
// //以上为获得主项的值。
// //以下为确定选择是否全选主项相关值
// if (this.checked) {
// $("input[name^='" + newtitle + "']").each(function () { this.checked = true; });
// //$("#btn1").attr("value", "反选");
// } else {
// $("input[name^='" + newtitle + "']").each(function () { this.checked = false; });
// //$("#btn1").attr("value", "全选");
// }
// });
//以下为给复选框增加点击后的代码
$('input:checkbox').click(function () {
var title = this.name;
//var re = /[^a-zA-Z]+/ig; //获得所有字母的正则
// var newtitle = title.replace(re, ""); //获得所有字母
var re = /[a-zA-Z]+/ig; //获取配匹字母一次，配合exec匹配字母一次，从第一个有字母的开始，碰到不匹配的就停止
var newtitle = re.exec(title); //获取配匹字母一次，主要用于判断分项目的项目标识
var i = title.indexOf("SelectAll"); //判断SelectAll的位置，如果存在，则为0，不存在则为-1
if (i == 0) { //如果找到SelectAll，则表明点击的是全选，因为SelectAll是在前面，所以得出的值是0
var re = /SelectAll/g; //替换SelectAll字符的正则
var newtitle = title.replace(re, ""); //替换掉全选按钮的标识SelectAll，获得项目标识，然后在判断是否选中，如果选中，则选中所有，如果是未选中，则全取消
if (this.checked) {
$("input[name^='" + newtitle + "']").each(function () { this.checked = true; }); //全选分项
} else {
$("input[name^='" + newtitle + "']").each(function () { this.checked = false; }); //非全选分项
}
}
else { //否则，不是全选
var ii = $("input[name^='" + newtitle + "']").size(); //获取符合项目标识的项目个数
var iii = 0;
$("input[name^='" + newtitle + "']").each(function () { //查找所有以项目标识为开头的复选框
if (this.checked) { //如果项目被选中，则加1，直到所有的项目查完。
iii = iii + 1;
}
if (iii == ii) { //如果所有的项目被选中的数等于项目个数，则选中全选，否则取消全选
$("input[name^='SelectAll" + newtitle + "']").attr("checked", 'true'); //选中总项全选
}
else {
$("input[name^='SelectAll" + newtitle + "']").removeAttr("checked"); //取消总项全选
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="30">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="24" bgcolor="#353c44">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" height="19" valign="bottom">
<div align="center">
<asp:Image ID="Image1" runat="server" Width="14" Height="14" ImageUrl="~/images/tb.gif" /></div>
</td>
<td width="94%" valign="bottom">
项目名称
</td>
</tr>
</table>
</td>
<td>
添加 删除 编辑
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
<tr>
<td width="15%" height="20" bgcolor="d3eaef" class="STYLE6" align="center">
权限名称
</td>
<td height="20" bgcolor="d3eaef" class="STYLE6">
<asp:TextBox ID="qxname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="20" bgcolor="#FFFFFF" class="STYLE6" align="center">
权限说明
</td>
<td height="20" bgcolor="#FFFFFF" class="STYLE6">
<asp:TextBox ID="Sm" runat="server" Rows="4" Columns="80" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td width="15%" height="20" bgcolor="d3eaef" class="STYLE6" align="center">
权限选择<asp:HiddenField ID="qxfn" runat="server" /><span style="white-space:pre"> </span><%--权限分栏隐藏项，用于获取所有的权限标识，提交时获得数据--%>
</td>
<td height="20" bgcolor="d3eaef" class="STYLE6">
<asp:Repeater ID="rpt1" runat="server" OnItemDataBound="rpt1_ItemDataBound"><span style="white-space:pre"> </span><%--第一层repeater--%>
<ItemTemplate>
<div class="title" runat="server" id="tdid" hid='<%#Eval("PID") %>' hn='<%#Eval("ProjectName") %>' hne='<%#Eval("ProjectNameE") %>'><span style="white-space:pre"> </span><%--将总项的ID，总项的名称，总项的标识赋到div上，使得后台可以读出生成复选框--%>
<%--要生成总项全选复选框的位置--%>
</div>
<asp:Repeater ID="rpt2" runat="server" OnItemDataBound="rpt2_ItemDataBound"><span style="white-space:pre"> </span><%--第二层repeater--%>
<HeaderTemplate>
<div class="title1">
</HeaderTemplate>
<ItemTemplate>
<div class="xtitle" runat="server" id="rpt2id" sid='<%#Eval("PID") %>' sn='<%#Eval("ProjectName")%>' sne='<%#Eval("ProjectNameE") %>'><span style="white-space:pre"> </span><%--将分项的ID,分项的名称，分项的标识赋到DIV上，使得后台可以读出生成复选框--%>
</div>
</ItemTemplate>
<FooterTemplate>
</div></FooterTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
<tr>
<td height="20" bgcolor="#FFFFFF" class="STYLE6" align="center" colspan="2">
<asp:Button ID="btn1" runat="server" Text="提交" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30">
底部
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
aspx.cs文件
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 BLL;
using Model;
using System.Web.UI.HtmlControls;
namespace website
{
public partial class test1 : System.Web.UI.Page
{
private DJ_QxMobanManager DqxBll = null;<span style="white-space:pre"> </span>//定义业务类
private DJ_QxMoban DqxModel = null;<span style="white-space:pre"> </span>//定义实体类
public test1()
{
DqxBll = new DJ_QxMobanManager();<span style="white-space:pre"> </span>//重构方法生成业务类
DqxModel = new DJ_QxMoban();<span style="white-space:pre"> </span>//重构方法生成实体类
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();<span style="white-space:pre"> </span>//绑定第一个repeater
}
}
private void BindData()
{
DqxModel.ProjectType = 0;<span style="white-space:pre"> </span>//因为显示的方法需要参数，所以给实体类赋个值，此值用来判定总项
rpt1.DataSource = DqxBll.QxMoban_Show(DqxModel);<span style="white-space:pre"> </span>//给第一层repeater赋查出的总项数据
rpt1.DataBind();<span style="white-space:pre"> </span>//绑定
}
protected void rpt1_ItemDataBound(object sender, RepeaterItemEventArgs e)<span style="white-space:pre"> </span>//当第一个repeater进行数据绑定时，做如下操作
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)<span style="white-space:pre"> </span>//判断数据所在的位置
{
HtmlGenericControl tdid = (HtmlGenericControl)e.Item.FindControl("tdid");<span style="white-space:pre"> </span>//查找第一层repeater里的一个div
Repeater rpt2 = (Repeater)e.Item.FindControl("rpt2");//找到Repeater2
int fid = Convert.ToInt32(tdid.Attributes["hid"]);<span style="white-space:pre"> </span>//接收总项的ID值
string fn = Convert.ToString(tdid.Attributes["hn"]);<span style="white-space:pre"> </span>//总项的名称
string fne = Convert.ToString(tdid.Attributes["hne"]);<span style="white-space:pre"> </span>//总项的英文标识
DqxModel.ProjectType = fid; //将总项ID赋于实体类，判断类型然后进行显示，得出第二层repeaer所需要的数据
tdid.InnerHtml = "<input name='SelectAll" + fne + "' type='checkbox' id='SelectAll" + fne + "' value='" + fid + "' /><label for='SelectAll" + fne + "'>" + fn + "</label>";<span style="white-space:pre"> </span>//在第一层repeater里的div里输出全选复选框，它以SelectAll为开始，加上英文标识来辨别是哪一类
DataTable dta = DqxBll.QxMoban_Show(DqxModel); //生成第二类的表
rpt2.DataSource = dta;<span style="white-space:pre"> </span>//进行第二层repeater数据绑定
rpt2.DataBind();
qxfn.Value = qxfn.Value + fne + "||";<span style="white-space:pre"> </span>//将项目标识赋于前台，用于接收数据
tdid.Attributes["hid"] = "";<span style="white-space:pre"> </span>//清除给div所赋的数据
tdid.Attributes["hn"] = "";
tdid.Attributes["hne"] = "";
}
}
protected void rpt2_ItemDataBound(object sender, RepeaterItemEventArgs e)<span style="white-space:pre"> </span>//进行第二层repeater数据绑定时
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)<span style="white-space:pre"> </span>//判断数据所在位置
{
HtmlGenericControl rpt2id = (HtmlGenericControl)e.Item.FindControl("rpt2id");<span style="white-space:pre"> </span>//获取第二层repeater里要显示复选框的div
int sid = Convert.ToInt32(rpt2id.Attributes["sid"]);<span style="white-space:pre"> </span>//获得分项的ID值
string sn = Convert.ToString(rpt2id.Attributes["sn"]);<span style="white-space:pre"> </span>//获得分项的名称
string sne = Convert.ToString(rpt2id.Attributes["sne"]);<span style="white-space:pre"> </span>//获得分项的英文标识，此标识和总项的标识一样，用来判断是否属于相应的总项
rpt2id.InnerHtml = "<input name='" + sne + sid + "' type='checkbox' id='" + sne + sid + "' value='" + sid + "' /><label for='" + sne + sid + "'>" + sn + "</label>";<span style="white-space:pre"> </span>//在第二层repeater里的div里输出分项复选框，它以英文标识为开始，加上分项ID来辨别是哪一类
rpt2id.Attributes["sid"] = "";
rpt2id.Attributes["sn"] = "";
rpt2id.Attributes["sne"] = "";
}
}
}
}
总体的思想就是：
1、先生成主复选框，用SelectAll来判断是否是全选框，这框也做为总项名称的位置。并将总项相关的信息放置在此div层中，供后台调用，同时将PID用于生成第二个repeater查找分项目的依据。
2、第二个repeater生成复选框，用css定位。
3、用jquery判断checkbox的name，看name是否是以SelectAll开头，如果是就是全选，此时获取SelectAll后的项目标识，同时全选此标识的的分项。不是则判断分项是否全选，如果是全选就给总项全选加上勾，否则不动。
CIO之家 www.ciozj.com 公众号:imciow