快捷導(dǎo)航

GridView中加上CheckBox 的全選功能的代碼

更新時(shí)間：2013年03月11日 21:24:41 作者：

GridView中加上CheckBox 的全選功能的代碼，需要的朋友可以參考一下

首先我們當(dāng)然是要先做出一個(gè)有資料的GridView
GridView做好後，我們?cè)卺岱叫略鲆粋€(gè)樣板欄位(TemplateField)
請(qǐng)?jiān)谛略龅臉影鍣谖恢械腍eaderTemplate加入一個(gè)CheckBox作為全選用，然後在ItemTemplate也加入一個(gè)CheckBox

復(fù)制代碼代碼如下:

<asp:TemplateField>      
                    <HeaderTemplate>      
                        <asp:CheckBox ID="CheckAll" runat="server" onclick= "SelectAllCheckboxes(this);"  Text="全選/取消" ToolTip="按一次全選，再按一次取消全選" />      
                    </HeaderTemplate>      
                    <ItemTemplate>      
                        <asp:CheckBox ID="CheckBox2" runat="server" Text="全選"/>      
                    </ItemTemplate>      
</asp:TemplateField>

接著請(qǐng)?jiān)谠擁?yè)面的最底部加上以下的Java Script

復(fù)制代碼代碼如下:

<script type="text/javascript">      
function SelectAllCheckboxes(spanChk)      
{      
    elm=document.forms[0];      

    for(i=0;i<elm.length;i++)      
        {      
            if(elm[i].type=="checkbox" && elm[i].id!=spanChk.id)      
            {      
                if(elm.elements[i].checked!=spanChk.checked)      
                 elm.elements[i].click();                      
            }      
    }      
}      
</script>

如果您的頁(yè)面有套用MasterPage請(qǐng)將上方JS放在</asp:Content>標(biāo)籤上面,到這裡就已經(jīng)完成了全選和取消全選的功能了，您可以自行測(cè)試看看，再來(lái)我們要製作修改的部份(你總不會(huì)做出全選/取消的功能只是讓使用者按好玩的吧), 接著在頁(yè)面上放置一個(gè)按鈕(Button)，對(duì)按鈕點(diǎn)兩下，切換到程式部份, 切換到程式部份後我們利用以下code去抓出哪些列(ROW)有被打勾

復(fù)制代碼代碼如下:

int i;      
for (i = 0; i < this.GridView1.Rows.Count; i++)      
{      
    if (((CheckBox)GridView1.Rows[i].FindControl("CheckBox2")).Checked)      
    {      
    Response.Write(GridView1.DataKeys[i].Value.ToString());      
    //GridView1.DataKeys[i].Value.ToString()可以抓到該列的DataKeys的值，我設(shè)定的是pk值      
    }      
} 

如果您的GridVie沒有設(shè)定 DataKeyNames="資料欄位"那上方的code就列不出pk值唷

利用以上方式您就可以準(zhǔn)確的抓出哪些列有被使用者打勾，來(lái)作其他您要執(zhí)行的程式了

您可能感興趣的文章: