GridView中加上CheckBox 的全选功能的代码
程序员文章站
2024-03-02 22:51:28
首先我們當然是要先做出一個有資料的gridviewgridview做好後,我們在後方新增一個樣板欄位(templatefield)請在新增的樣板欄位中的headertemp...
首先我們當然是要先做出一個有資料的gridview
gridview做好後,我們在後方新增一個樣板欄位(templatefield)
請在新增的樣板欄位中的headertemplate加入一個checkbox作為全選用,然後在itemtemplate也加入一個checkbox
复制代码 代码如下:
<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>
接著請在該頁面的最底部加上以下的java script
复制代码 代码如下:
<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>
如果您的頁面有套用masterpage請將上方js放在</asp:content>標籤上面,到這裡就已經完成了全選和取消全選的功能了,您可以自行測試看看,再來我們要製作修改的部份(你總不會做出全選/取消的功能只是讓使用者按好玩的吧), 接著在頁面上放置一個按鈕(button),對按鈕點兩下,切換到程式部份, 切換到程式部份後我們利用以下code去抓出哪些列(row)有被打勾
复制代码 代码如下:
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的值,我設定的是pk值
}
}
如果您的gridvie沒有設定 datakeynames="資料欄位"那上方的code就列不出pk值唷
利用以上方式您就可以準確的抓出哪些列有被使用者打勾,來作其他您要執行的程式了
推荐阅读