标签：
HTML中的代码
<asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table> <thead> <tr> <th> <input id="Checkbox1" type="checkbox" name="ckall" /></th>//全选框 <th>ID号</th> <th>编号</th> <th>名称</th> <th>系列</th> <th>油耗</th> <th>价格</th> </tr> </thead> </HeaderTemplate> <ItemTemplate> <tbody> <tr>
//重点-----不能用服务器端控件，会自动改变id和name的值,记得写value值，在后台要用到
//HTML控件通过value来传递主键信息
<td><input id="ck_<%#Eval("ids") %>" type="checkbox" name="ck" value="<%#Eval("ids") %>" /></td>
<td><%#Eval("ids") %></td> <td><%#Eval("code") %></td> <td><%#Eval("name") %></td> <td><%#Eval("brand") %></td> <td><%#Eval("oil") %></td> <td><%#Eval("price") %></td> </tr> </tbody> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>
后端代码
private MyDBDataContext _Context = new MyDBDataContext();
protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = this._Context.car.ToList();
Repeater1.DataBind();
}
//点击删除
protected void Button1_Click(object sender, EventArgs e)
{
if (Request["ck"] != null)//没选的情况下点击删除会报错，在这里判断
{
string s = Request["ck"];//前段如果选了多个，在后端请求过来的格式如：1，2，3（用逗号隔开了）
string[] ids = s.Split(‘,‘);//分割字符串
foreach (string id in ids)//循环删除
{
Delete(id);//删除的方法
}
}
Response.Redirect("Default.aspx");
}
public void Delete(string id)
{
//找对象
var query = this._Context.car.Where(r => r.ids.ToString() == id);
if (query.Count() > 0)
{
car data = query.First();
//告诉上下文
this._Context.car.DeleteOnSubmit(data);
//提交删除
this._Context.SubmitChanges();
}
}
前段JS代码，实现了全选，全选状态的自动改变，以及删除时的人机交互
<script type="text/javascript">
window.onload = function ()//给全选框加的事件
{
var aCK = document.getElementsByName("ck");
var oCK = document.getElementsByName("ckall")[0];
oCK.onclick = function ()
{
for (var i = 0; i < aCK.length; i++)
{
aCK[i].checked = oCK.checked;//最主要的一句话
}
}
ChangeableCKAll();//可变的多选框。将每个选框都点上对号后，全选框自动进入选中状态；反之自动取消
}
function ChangeableCKAll()
{
var aCK = document.getElementsByName("ck");
var oCK = document.getElementsByName("ckall")[0];
var flag = 0;//标记
for (var i = 0; i < aCK.length; i++)
{
aCK[i].onclick = function ()
{
//思路：每个多选框加点击事件，没点击一次记得让‘标记’归零。循环所有选框，如果有一个没选，
//全选框就不应该选中，跳出循环；如果选框被选中了，‘标记’累加，最后‘标记’的数量跟选框集合相等
//说明全选了，这时候全选框应该为选中状态
flag = 0;
for (var j = 0; j < aCK.length; j++)
{
if (aCK[j].checked==false)
{
oCK.checked = false;
break;
}
else {
flag++;
}
}
if (flag==aCK.length) {
oCK.checked = true;
}
}
}
//删除互动
var oBtn = document.getElementById("Button1");
var aCK = document.getElementsByName("ck");
var isOK = false;
oBtn.onclick = function ()
{
for (var i = 0; i < aCK.length; i++)
{
if (aCK[i].checked) {
isOK = true;
break;
}
}
if (isOK) {
return confirm("确定要删除选中信息吗？");
}
else {
alert("请选择");
return false;
}
}
}
</script>
<asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table> <thead> <tr> <th> <input id="Checkbox1" type="checkbox" name="ckall" /></th> <th>ID号</th> <th>编号</th> <th>名称</th> <th>系列</th> <th>油耗</th> <th>价格</th> </tr> </thead> </HeaderTemplate> <ItemTemplate> <tbody> <tr> <td><input id="Checkbox1" type="checkbox" name="ck" value="<%#Eval("ids") %>" /></td> <td><%#Eval("ids") %></td> <td><%#Eval("code") %></td> <td><%#Eval("name") %></td> <td><%#Eval("brand") %></td> <td><%#Eval("oil") %></td> <td><%#Eval("price") %></td> </tr> </tbody> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>
Webform之Repeater中的单选和多选的应用以及前段JS的实现
标签：
原文地址：http://www.cnblogs.com/gchlcc/p/4826313.html
