65.9K
CodeProject 正在变化。 阅读更多。
Home

DataGrid控件在客户端填充复选框

starIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIconemptyStarIcon

1.50/5 (2投票s)

2007年8月25日

viewsIcon

20797

这个概念用于,只需单击标题复选框,即可使用javascript在无需回发操作的情况下选中所有复选框。例如,在雅虎邮箱中,您只需单击标题复选框,所有网格复选框都将被选中。

// 这是javascript代码。只需将代码复制并粘贴到script标签内即可

function CheckAllDataGridCheckBoxes(aspCheckBoxID, checkVal)

{

re = new RegExp(':' + aspCheckBoxID + '$')

for(i = 0; i < Form1.elements.length; i++)

{

elm = document.forms[0].elements[i] if (elm.type == 'checkbox')

{

if (re.test(elm.name)) elm.checked = checkVal

}

}

}

// 这是datagrid的示例设计结构,仅显示复选框和名称

</headertemplate />

<asp:datagrid id="dgReciveApp" runat="server" AutoGenerateColumns="False" Width="100%" PageSize="15"
AllowPaging="True" DataKeyField="vc_UserName">
<Columns>
<asp:TemplateColumn HeaderText="全选">
<HeaderTemplate>
<input ID="chkAll" type="checkbox" onclick="CheckAllDataGridCheckBoxes('chkItem',this.checked)">
全选</HeaderTemplate>
<ItemTemplate>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="3%" BGCOLOR="#FFFFFF" height="100%">
<table width="100%" height="100%">
<tr valign="top" height="100%">
<td>
<asp:CheckBox ID="chkItem" Runat="server"></asp:CheckBox></td>
<tr valign="middle" height="100%">
<td valign="middle">

<%# DataBinde.Eval(Container.DataItem,"Name") %>
</td>
</tr>
</table>
</TD>

</tr>

</table>

</table>
</ItemTemplate> </asp:TemplateColumn> </Columns></asp:datagrid>

在这里,如果您单击标题复选框,所有datagrid itemtemplate复选框都将被选中

< /> <script language="javascript"></script>

© . All rights reserved.