全選DataGrid里的復選框
2024-07-21 02:15:48
供稿：網友
我們經常會在datagrid里選擇一組數據,然后批量操作,如果要全部操作的話需要一個全選的功能,如果你用這個全選按鈕的服務器端事件來讓datagrid里復選框的全選的話,會多一次向服務器的回傳,我們可以寫一個js函數來簡化這一步驟.
其實datagrid在客戶端會生成一個html表格,表格的id屬性就是datagrid的id,這個id可以用clientid獲取,然后你的全選按鈕也可以在后臺編碼里添加一個onclick屬性來讓他執行你寫好的js代碼,比如你聲明了一個datagrid1的datagrid,然后里面在一個模板列里放了一個復選框,然后又在外面聲明了一個checkbox1來全選datagrid1里面的復選框,語法如下.
checkbox1.attributes.add("onclick","chk(this,'"+dg1.clientid+"')");
下面是我用html代碼做了個演示.
<html>
<head>
<title></title>
<meta name="generator" content="editplus">
<meta name="author" content="蛙蛙王子">
<meta name="keywords" content="">
<script language="javascript">
<!--
function chk(chk,id){
var oevent = document.all(id);
var chks = oevent.getelementsbytagname("input");
for(var i=0; i<chks.length; i++)
{
if(chks[i].type=="checkbox")
chks[i].checked=chk.checked;
}
}
//-->
</script>
</head>
<body>
<input id="checkbox1" type="checkbox" name="checkbox1" language="javascript" />
<table id="datagrid1">
<tr>
<td><input type="checkbox" name="chk1"></td>
<td><input type="checkbox" name="chk2"></td>
<td><input type="checkbox" name="chk3"></td>
</tr>
<tr>
<td><input type="checkbox" name="chk4"></td>
<td><input type="checkbox" name="chk5"></td>
<td><input type="checkbox" name="chk6"></td>
</tr>
<tr>
<td><input type="checkbox" name="chk7"></td>
<td><input type="checkbox" name="chk8"></td>
<td><input type="checkbox" name="chk9"></td>
</tr>
</table>
</body>
</html>
