asp.net 中GridView控件实现全选及反选的功能
大家都知道郵箱里面有全部刪除郵件的復選按鈕,其實還是比較簡單哈!
廢話嘛!就不說那么多了,我先給大家講哈功能的實現。
首先,拖一個GridView控件和SqlDataSource控件,配置數據源。
然后,進行GridView控件的配置,點擊‘編輯模板’添加2個CheckBox控件,分別放在ItemTemplate里面和HeaderTemplate,
下面再添加 javascript腳本代碼
<script language="javascript" type="text/javascript">
??????? function myclick(checkAll) {
??????????? var item = document.getElementsByName("checkUsers");
??????????? for (var i = 0; i < item.length; i++) {
??????????????? item[i].checked = checkAll.checked;
??????????? }
??????? }
??????? function myclick1() {
??????????? var item = document.getElementsByName("checkUsers");
??????????? var ischeck = true;
??????????? for (var i = 0; i < item.length; i++) {
??????????????? if (item[i].checked == false) {
??????????????????? ischeck = false;
??????????????????? break;
??????????????? }
??????????? }
??????????? var mycheck = document.getElementById("checkAll");
??????????? if (ischeck) {????????????????
??????????????? mycheck.checked = true;
??????????? } else {
??????????????? mycheck.checked = false;
??????????? }
????????????
??????? }
??? </script>
?
這是GridView控件中的列
<asp:GridView ID="GridView1" runat="server"?
??????????? AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966"?
??????????? BorderStyle="None" BorderWidth="1px" CellPadding="4" Height="137px"?
??????????? PageSize="3" Width="100%" style="margin-bottom: 0px"?
??????????? onrowcommand="GridView1_RowCommand"?
??????????? onrowdatabound="GridView1_RowDataBound">
??????????? <Columns>
??????????????? <asp:TemplateField ItemStyle-HorizontalAlign="Center">
???????????????????? <HeaderTemplate>
??????????????????????? 全選<br /><input type="checkbox" id="cboAll" οnclick="myclick(this)" />
???????????????????? </HeaderTemplate>
???????????????????? <ItemTemplate>
??????????????????????? <input type="checkbox"? id="checkUsers" οnclick="myclick1()" />
???????????????????? </ItemTemplate>
?????????? </Cloumns>
</asp:GridView>
?
好了,功能實現!點擊全選,所有復選框選中,如果把所有項目的復選框選中,全選的也會自動選中,否則反之
總結
以上是生活随笔為你收集整理的asp.net 中GridView控件实现全选及反选的功能的全部內容,希望文章能夠幫你解決所遇到的問題。

- 上一篇: 主流报表制作工具之王者争夺战:功能大PK
- 下一篇: 在GridView中针对鼠标单击的某一独