当在使用.net服务器控件DataGrid显示数据时,有时会用到在DataGrid加一个模板显示checkbox控件为全选或全取消的功能,在运用过程中做了个人小结,如果还有好方法,多多学习:
![](https://www.cnblogs.com/images/cnblogs_com/conquer/checkbox.gif) |
<Columns>
<asp:TemplateColumn HeaderText="<input type=checkbox id=CheckAll onclick='javascript:SelAll()' title='全选/全取消'>">
<ItemTemplate>
<asp:CheckBox ID="chkExport" Runat="server"></asp:CheckBox>
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="chkExportON" Runat="server"></asp:CheckBox>
</EditItemTemplate>
</asp:TemplateColumn>
</Columns>
|
1:点击按钮全选/全消,用javascript脚本控制
<script language="javascript">
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function selectAll()
{
var len=document.Index.elements.length;
var i;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (i=0;i<len;i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (document.Index.elements[i].type=="checkbox")
{
document.Index.elements[i].checked=true;
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function unSelectAll()
{
var len=document.Index.elements.length;
var i;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (i=0;i<len;i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (document.Index.elements[i].type=="checkbox")
{
document.Index.elements[i].checked=false;
}
}
}
</script>
2:点击按钮可用服务器端代码控制:
private void btnSelectAll_Click(object sender, System.EventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
System.Web.UI.WebControls.CheckBox chkExport;
if(btnSelectAll.Text == "全选")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//循环设置DataGrid中的项
foreach(DataGridItem oDataGridItem in this.DataGrid1.Items)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
chkExport.Checked = true;
}
btnSelectAll.Text="全消";
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
foreach(DataGridItem oDataGridItem in this.DataGrid1.Items)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
chkExport.Checked = false;
}
btnSelectAll.Text = "全选";
}
}
3:点击DataGrid标头上的checkbox进行选择,也可用脚本控制:
<script language="javascript">
function SelAll()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
var RowCnt=<%=RowCount%>;
var IsChk;
IsChk = document.all.CheckAll.checked;
for(j= 0;j<RowCnt+1;j ++ )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(typeof(document.all.DataGrid1.rows(j).cells(0).children(0)) == "object")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.all.DataGrid1.rows(j).cells(0).children(0).checked = IsChk;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
</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;
这是个人在运用过程中使用的三种方法,有更好的方法可多多学习!!