关于Repeater中嵌套GridView以及GridView中checkbox的全选功能的实例

时间:2021-08-05 03:42:00


 具体的思路为:首先生成一个Repeater,然后根据在Repeater绑定的ID生成GridView,具体实现界面及代码如下所示:

前台代码:

<asp:Panel ID="pnlmain" runat="server">
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<table class="small" width="100%">
<tr width="100%" class="TableHeader" align="left" >
<td width="20px">
<input id="Checkbox1" name='<%#DataBinder.Eval(Container.DataItem, "GroupId")%>' onClick="grcheckalll('<%#DataBinder.Eval(Container.DataItem, "GroupNo")%>',this.checked);" type="checkbox" /><!--Repeater中的CheckBox,全选操作-->
</td>
<td width="780px" title="点击隐藏/显示" onclick="clickMenu('tr+<%#DataBinder.Eval(Container.DataItem, "GroupId")%>')"> <%#DataBinder.Eval(Container.DataItem, "GroupName")%><!--此处为设置某个点击某组标题可以隐藏或显示-->
</td>
</tr>
<tr id="tr+<%#DataBinder.Eval(Container.DataItem, "GroupId")%>" class="TableLine2" width="100%"><td align="center" valign="middle" nowrap colspan="2">
<asp:Label ID="lbl_Id" Visible=false Text='<%# DataBinder.Eval(Container.DataItem,"GroupId").ToString() %>' Runat=server />
<asp:GridView ID="GridView1" CssClass="small" runat="server" BorderStyle="Inset" AutoGenerateColumns="False" Width="100%" DataKeyNames="AddressId" OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" HorizontalAlign="Center">
<Columns >
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<asp:CheckBox ID="chkIsCheck" runat="server" />
</ItemTemplate>
<ControlStyle Width="40px" />
</asp:TemplateField>
<asp:CommandField HeaderText="管理" ShowDeleteButton="True" ShowEditButton="True" ShowHeader="True" CausesValidation="False" >
<ControlStyle Width="30px" />
</asp:CommandField>
<asp:TemplateField HeaderText="姓名">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" CssClass="SmallInput" Width="80px" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="120px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="职务">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" CssClass="SmallInput" Width="80px" runat="server" Text='<%# Bind("Ministration") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Ministration") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="120px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="单位">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" CssClass="SmallInput" Width="80px" runat="server" Text='<%# Bind("DeptName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("DeptName") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="120px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="手机号">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" CssClass="SmallInput" Width="100px" runat="server" Text='<%# Bind("Mobile") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Mobile") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="300px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</td></tr>
</table>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>

前台代码中,加红色的AutoGenerateColumns="False" ,只有设置为False时,GridView的更新操作才能被执行,需要注意。

后台代码:

 #region 数据绑定
//绑定Repeater
protected void LoadDataRep()
{
pnlmain.Visible = true;
DBConnect db = new DBConnect();
DataTable dt = db.ExecuteDataTable("select * from Address_Group where GroupId in(select GroupId from [Address] group by(GroupId)) and GroupId in(select GroupId from Address_Group where UserId='" + Utilities.CookieUtil.UserID + "')");//
if (dt == null)
{
pnlmain.Visible = false;
litMessage.Text = "<table class=\"MessageBox\" width=\"180\" align=\"center\"><tr><td class=\"msg blank\"><div class=\"content\" style=\"font-size:12pt\">没有定义记录</div></td></tr></table>";
}
dt.Columns.Add("GroupNo", typeof(string));
for (int i = 0; i < dt.Rows.Count; i++)
{
dt.Rows[i]["GroupNo"] = i.ToString("00");
}
Repeater1.DataSource = dt;
Repeater1.DataBind();
}

//绑定GridView
protected void BindData(GridView gv, string GroupId)
{
pnlmain.Visible = true;
DBConnect db = new DBConnect();
DataTable dtnow = db.ExecuteDataTable("select [GroupId],[AddressId],[Name],[DeptName],[Mobile],[Ministration] from Address where GroupId=" + GroupId);
gv.DataSource = dtnow;
gv.DataBind();
db.Close();
}

//Repeater绑定数据时,将GroupId绑定到Label上,并根据GroupId绑定对应的gridview
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
Label lblid = null;
if (e.Item.ItemIndex >= 0)
{
lblid = (Label)e.Item.FindControl("lbl_Id");
}
string GroupId = lblid.Text;
GridView gv = e.Item.FindControl("GridView1") as GridView;
BindData(gv, GroupId);
}

#endregion
#region GridView操作命令
//数据删除
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
GridView gv = (GridView)sender;
string AddressId = gv.DataKeys[e.RowIndex].Value.ToString();
DBConnect db = new DBConnect();
string GroupId = db.ExecuteScalarString("select GroupId from [Address] where AddressId=" + AddressId);
int i = DelAddress(AddressId);
if (i >= 1)
{
Utilities.Logger.alert(this, "操作成功");
}
else
{
Utilities.Logger.alert(this, "操作失败,请重试" + db.LastError.ToString());
}
gv.EditIndex = -1;
BindData(gv, GroupId);
db.Close();
}

//数据编辑
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView gv = (GridView)sender;
gv.EditIndex = e.NewEditIndex;
DBConnect db = new DBConnect();
string AddressId = gv.DataKeys[e.NewEditIndex].Value.ToString();
if (!string.IsNullOrEmpty(AddressId))
{
string GroupId = db.ExecuteScalarString("select GroupId from [Address] where AddressId=" + AddressId);
BindData(gv, GroupId);
}
}

//更新数据
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
DBConnect db = new DBConnect();
string[] str = new string[5];
GridView gv = (GridView)sender;
str[0] = ((TextBox)gv.Rows[e.RowIndex].Cells[2].Controls[1]).Text;//姓名
str[1] = ((TextBox)gv.Rows[e.RowIndex].Cells[3].Controls[1]).Text;//职务
str[2] = ((TextBox)gv.Rows[e.RowIndex].Cells[4].Controls[1]).Text;//单位
str[3] = ((TextBox)gv.Rows[e.RowIndex].Cells[5].Controls[1]).Text;//手机号
str[4] = gv.DataKeys[e.RowIndex].Value.ToString();
string GroupId = db.ExecuteScalarString("select GroupId from [Address] where AddressId=" + str[4]);
UpdateAddress(str);
gv.EditIndex = -1;
BindData(gv, GroupId);
db.Close();
}

//数据加载时添加删除确认对话框
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton links = new LinkButton();
links = ((LinkButton)e.Row.Cells[1].Controls[2]);
if (links.Text == "删除")
{
links.Attributes.Add("onclick", string.Concat(string.Concat("javascript:return confirm('你确认要删除联系人 ", e.Row.Cells[2].Text), " 吗')"));
}
}
}

//取消编辑
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
DBConnect db = new DBConnect();
GridView gv = (GridView)sender;
gv.EditIndex = -1;
string AddressId = gv.DataKeys[e.RowIndex].Value.ToString();
if (!string.IsNullOrEmpty(AddressId))
{
string GroupId = db.ExecuteScalarString("select GroupId from [Address] where AddressId=" + AddressId);
BindData(gv, GroupId);
}
db.Close();
}

//删除对应记录
protected int DelAddress(string AddressId)
{
string sql = string.Format("delete from [Address] where [AddressId]={0} ", AddressId);
DBConnect db = new DBConnect();
return db.ExecuteNonQueryTransaction(sql);
}

//更新对应记录
protected int UpdateAddress(string[] AddressStr)
{
string sql = string.Format("update [Address] set [Name]='{0}',[Ministration]='{1}',[DeptName]='{2}',[Mobile]='{3}' where [AddressId]={4}",
AddressStr[0], AddressStr[1], AddressStr[2], AddressStr[3], Convert.ToInt32(AddressStr[4]));
DBConnect db = new DBConnect();
return db.ExecuteNonQueryTransaction(sql);
}
#endregion

全选、隐藏/显示的JS代码:

隐藏/显示的JS代码

function clickMenu(ID)
{
targetelement=document.all(ID);
if (targetelement.style.display=="none")
targetelement.style.display='';
else
targetelement.style.display="none";
}

全选的JS代码:

function grcheckalll(name,obj) 
{
var gridname="Repeater1_ctl"+name+"_GridView1";
var rowcount=document.getElementById(gridname).rows.length;
for(var a=2;a<=rowcount+1;a++)
{
if(a>=10)
{var ckid=gridname+"_ctl&_chkIsCheck";
}
else
{var ckid=gridname+"_ctl0&_chkIsCheck";}
var aa=ckid.replace("&",a);
var bb=document.getElementById(aa);
if(bb!=null)
{
bb.checked=obj;
}
}
}

由于GridView中的控件的ID名字是自动生成的,但是也是有规律的,只需要在浏览器中查看下生成的页面源文件中的name,然后找出规律就可以了。

整体功能也是比较简单,不过对于初次接触这些的还有一些参考的价值的。