做大批量的數(shù)據(jù)刪除時(shí)，如果有個(gè)全選按鈕把多個(gè)頁(yè)面上顯示的記錄全都選中刪除那比一條條的刪除要人性化得多，接下來(lái)說(shuō)一說(shuō)如何實(shí)現(xiàn)，其實(shí)網(wǎng)上一搜有好多文章都是說(shuō)如何進(jìn)行批量刪除的，大體上可以分為兩大類(lèi)1：利用JS腳本實(shí)現(xiàn)全選。2：在服務(wù)器端實(shí)現(xiàn)全選
首先來(lái)說(shuō)一說(shuō)如何利用JS實(shí)現(xiàn)全選
往頁(yè)面上拖一個(gè)GridView，設(shè)置好數(shù)據(jù)源，并為GridView添加一個(gè)模板列，往模板列里添加一個(gè)chekcbox，比如下面的代碼

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
            ReadOnly="True" SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
        <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chk_Del" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>接下來(lái)往頁(yè)面上添加一個(gè)checkbox控件
<asp:CheckBox ID="chk_JS" runat="server" Text="全選(JS)" onclick="selectAll(this)"/>
并為該控件編寫(xiě)JS腳本如下： <script type="text/javascript">
    //根據(jù)傳入的checkbox的選中狀態(tài)設(shè)置所有checkbox的選中狀態(tài)
    function selectAll(obj)
    {
        var allInput = document.getElementsByTagName("input");
        //alert(allInput.length);
        var loopTime = allInput.length;
        for(i = 0;i < loopTime;i++)
        {
            //alert(allInput[i].type);
            if(allInput[i].type == "checkbox")
            {
                allInput[i].checked = obj.checked;
            }
        }
    }
</script>基本效果就有了，接下來(lái)我們?cè)邳c(diǎn)綴一下。在網(wǎng)頁(yè)中添加一個(gè)button
<asp:Button ID="btn_DeleteRecords" runat="server" OnClientClick="return judgeSelect();" Text="刪除選中記錄" />
添加JS腳本
//判斷是否選中記錄，用戶確認(rèn)刪除
function judgeSelect()
{
    var result = false;
    var allInput = document.getElementsByTagName("input");
    var loopTime = allInput.length;
    for(i = 0;i < loopTime;i++)
    {
        if(allInput[i].checked)
        {
            result = true;
            break;
        }
    }
    if(!result)
    {
        alert("請(qǐng)先選則要?jiǎng)h除的記錄！");
        return result;
    }
    result = confirm("你確認(rèn)要?jiǎng)h除選定的記錄嗎？");
    return result;
}
2通過(guò)服務(wù)器端代碼實(shí)現(xiàn)全選
向頁(yè)面同添加一個(gè)CheckBox并將AutoPostBack屬性設(shè)置成true，并為它添加CheckedChanged事件
<asp:CheckBox ID="chk_Server" runat="server" OnCheckedChanged="chk_Server_CheckedChanged" Text="全選(Server)" AutoPostBack="True" />
事件代碼如下

int a = this.GridView1.Rows.Count;
for (int i = 0; i < a; i++)
{
    CheckBox chk = (CheckBox)this.GridView1.Rows[i].FindControl("chk_Del");
    chk.Checked = this.chk_Server.Checked;
}

最新評(píng)論