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);
        )
        {
            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>