Webform之Repeater中的单选和多选的应用以及前段JS的实现

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>

时间: 2024-11-13 09:13:19

Webform之Repeater中的单选和多选的应用以及前段JS的实现的相关文章

Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                         Default.aspx 网页界面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.

关于在repeater中的checkbox实行多选和全选

今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: string getuserid = ""; for (int i = 0; i < Repeater1.Items.Count; i++) { CheckBox cb = (CheckBox)Repeater1.Items[i].FindControl("ckBoxly&

gridview中添加单选和多选

1.前台js <script type="text/javascript">        function SetAll(obj) {            var chk = document.getElementById("<%=this.GridView1.ClientID%>").getElementsByTagName("input");            for (var i = 0; i < ch

关于Html5中的单选与多选

1.下拉列表样式: <select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option>

vue2.0中实现单选,全选,购物车加减计算等效果

<!doctype html><html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> &l

android中的单选和多选框

先展示一下效果图 大致代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_pa

WebForm 【Repeater】【简单控件】

一.Webform 数据展示 界面层  : HTLM 业务逻辑层 :只能用 C#  Repeater   重复器  能够用来循环展示数据 具有5种模板  HeaderTemplate : 对页眉进行格式设置 ,在加载开始执行一遍,(不论放置什么位置都会首先执行)  FooterTemplate : 对页脚进行格式设置,在加载最后执行一遍  ItemTemplate : 对每一个数据项进行格式设置 (有多少数据就执行多少次) AlternatingItemTemplate : 对交替数据项进行格式

单击行,自动选中当前行中的单选框按钮

需求:单击行,自动选中当前行中的单选框按钮. aspx页面: <asp:Repeater ID="rptRecordList" runat="server"> <HeaderTemplate> <table style="width: 100%;" id="tbList"> </HeaderTemplate> <ItemTemplate> <tr class=&

Jquery 上传插件 FineUploader 在 webform 和 mvc 中的使用;

  多文件上传组件FineUploader使用心得 FineUploader 结合 一般处理程序 [上传示例] 参考:http://www.cnblogs.com/dudu/archive/2012/11/27/fine_uploader_mvc_ajax.html  asp.net mvc示例 参考 :http://www.cnblogs.com/chenkai/archive/2013/01/04/2844702.html  http://www.cnblogs.com/guero/p/38