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);
        )
        {
            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的实现的更多相关文章

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

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

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

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

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

    今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...

  4. dev中ASPxListBox单选和多选的设置

    只需要设置SelectionMode,为Multiple时是单选,CheckColumn时是多选

  5. 关于Html5中的单选与多选

    1.下拉列表样式: <select> <option value ="volvo">Volvo</option> <option valu ...

  6. WebForm 【Repeater】展示数据

       在 Webform 数据展示中      界面层  : HTLM 业务逻辑层 :只能用 C#  Repeater    重复器  能够用来循环展示数据 具有5种模板  HeaderTemplat ...

  7. 单击行,自己主动选中当前行中的单选框button

    需求:单击行,自己主动选中当前行中的单选框button. aspx页面: <asp:Repeater ID="rptRecordList" runat="serve ...

  8. 在Repeater中嵌套使用Repeater

    在一般的网站中浏览类别的用户控件通常都位于大多数 ASP.NET 页的左边,它使用户能够按类别快速的查找产品.最近遇到一个客户,因为在他网站上展示的产品并不多,所以要求在原有类别浏览的基础上将产品也加 ...

  9. repeater中后台动态为控件添加属性

    在此贴出repeater中的ItemDataBound事件中的代码: private void ItemDataBound(object sender, RepeaterItemEventArgs e ...

随机推荐

  1. Java中的流

    一.Java中流的原理 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以“流”的方式进行.设备可以是文件,网络,内存等. 四种基本流InputStream,Ou ...

  2. docker containerd 中的create 容器操作

    containerd的create container的API如下所示: type CreateContainerRequest struct { Id string BundlePath strin ...

  3. 【MVC 4】2.使用 Razor

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> Razor 是微软 MVC3 引入的视图引擎的名称,并在MVC 4 中进行了修订.视图引擎处理 A ...

  4. Stanford机器学习笔记-1.线性回归

    Content: 1. Linear Regression 1.1 Linear Regression with one variable 1.1.1 Gradient descent algorit ...

  5. AC日记——搞笑世界杯 codevs 1060(dp)

    题目描述 Description 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰,让人心痛不已. 于是有 人组织了一场搞笑世界杯,将这些被淘汰的强队重新组织起来和世界杯一同比赛.你和你的朋 ...

  6. Linux压力测试工具Tsung安装、使用和图形报表生成

    简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...

  7. eclipse的使用-------Text File Encoding没有GBK选项的设置

    eclipse的使用-------Text File Encoding没有GBK选项的设置 2013-12-25 09:48:06 标签:java myeclipse使用 有一个项目是使用GBK编码的 ...

  8. SAP中主数据和单据的删除

    在SAP实际操作的过程中,有些主数据或者单据需要删除,但是删除的方法却不尽相同,所以笔者今天总结了下,供大家参考. 1,用T-Code去删除 例如我们要删除某个物料,我们可以用T-Code MM06 ...

  9. 承香墨影 Android--Matrix图片变换处理

    承香墨影 Android--Matrix图片变换处理 前言 本篇博客主要讲解一下如何处理对一个Bitmap对象进行处理,包括:缩放.旋转.位移.倾斜等.在最后将以一个简单的Demo来演示图片特效的变换 ...

  10. 用bower命令创建项目

    1,先安装bower,npm install -g bower 2,cd到项目文件夹下,安装项目所需要的依赖包,比如 npm install jquery;npm install bootstrap, ...