当在使用.net服务器控件DataGrid显示数据时,有时会用到在DataGrid加一个模板显示checkbox控件为全选或全取消的功能,在运用过程中做了个人小结,如果还有好方法,多多学习:
1:点击按钮全选/全消,用javascript脚本控制
<script language="javascript">
function selectAll(){
var len=document.Index.elements.length;
var i;
for (i=0;i<len;i++){
if (document.Index.elements[i].type=="checkbox"){
document.Index.elements[i].checked=true;
}
}
}

function unSelectAll(){
var len=document.Index.elements.length;
var i;
for (i=0;i<len;i++){
if (document.Index.elements[i].type=="checkbox"){
document.Index.elements[i].checked=false;
}
}
}
</script>
2:点击按钮可用服务器端代码控制:
private void btnSelectAll_Click(object sender, System.EventArgs e)
{
System.Web.UI.WebControls.CheckBox chkExport;
if(btnSelectAll.Text == "全选")
{
//循环设置DataGrid中的项
foreach(DataGridItem oDataGridItem in this.DataGrid1.Items)
{
chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
chkExport.Checked = true;
}
btnSelectAll.Text="全消";
}
else
{
foreach(DataGridItem oDataGridItem in this.DataGrid1.Items)
{
chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
chkExport.Checked = false;
}
btnSelectAll.Text = "全选";
}
}
3:点击DataGrid标头上的checkbox进行选择,也可用脚本控制:
<script language="javascript">
function SelAll()
{
var RowCnt=<%=RowCount%>;
var IsChk;
IsChk = document.all.CheckAll.checked;
for(j= 0;j<RowCnt+1;j ++ )
{
if(typeof(document.all.DataGrid1.rows(j).cells(0).children(0)) == "object")
{
document.all.DataGrid1.rows(j).cells(0).children(0).checked = IsChk;
}
}

}
</script>
其中RowCount为服务器端DataGrid在绑定时的数据源表的总条数:
SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionSqlServer"].ToString());
SqlDataAdapter da = new SqlDataAdapter("select EmployeeID,LastName,FirstName,BirthDate,Extension,City,TitleOfCourtesy from Employees",conn);
DataSet ds = new DataSet();
da.Fill(ds,"dataTable");
DataView view = ds.Tables["dataTable"].DefaultView;
RowCount = ds.Tables["dataTable"].Rows.Count;
这是个人在运用过程中使用的三种方法,有更好的方法可多多学习!!
![]() |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
1:点击按钮全选/全消,用javascript脚本控制














































3:点击DataGrid标头上的checkbox进行选择,也可用脚本控制:






















