GridView对行进行全选或单选

现在似乎没有人在web forms(asp.net)开发了吧？ 
asp.net + 控件，属正是面向对象开发。

下面例子，算是强化Insus.NET博客中的一个功能，就是对GridView数据件数据行的CheckBox选择。

<asp:TemplateField>
    <HeaderStyle BorderColor="#c0c0c0" BorderWidth="1" Width="10px" />
    <ItemStyle BorderColor="#c0c0c0" BorderWidth="1" Width="10px" />
    <HeaderTemplate>
        <asp:CheckBox ID="CheckBoxSelectedAll" runat="server" CssClass="headerCheckBox" ToolTip="Select All" onclick="checkboxSelectedAll(this);" />
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="CheckBoxSelectedSingle" runat="server" CssClass="itemCheckBox" ToolTip="Select Single" onclick="checkboxSelectedSingle(this);" />
    </ItemTemplate>
</asp:TemplateField>     

 

在HeaderTemplate拉了一个CheckBox，全选GridView所有数据行。
而在ItemTemple亦拉了一个CheckBox，此能对当前行进行选中与否。

大概环境，有Masterpage(母版)，

ajaxToolkit:ToolkitScriptManager，asp:ScriptManagerProxy，asp:UpdatePanel

javascript程序，首选找到你的GridView控件，

 <script type="text/javascript">
     function getGridView() {
         return document.getElementById('<%=GridView1.ClientID %>');
     }
 </script>

 

找到GridView控件中<HeaderTemplate>的CheckBox,

 <script type="text/javascript">
function getHeaderCheckBox() {
    var grid = getGridView();
    return grid ? grid.getElementsByTagName("input")[0] : null;
}
 </script>

 

全选的CheckBox有一个onclick事件onclick="checkboxSelectedAll(this); ，下面代码中
  var inputs = grid.rows[r].cells[1].getElementsByTagName("input");
有个注意点，就是cells[1]。索引为1，因为本例中GridView数据行的单选CheckBox是位于第2例。如果位于第1列，其索引改为0。视你实际情况而定。

 <script type="text/javascript">
     // 全选/全不选
function checkboxSelectedAll(checkbox) {
    var grid = getGridView();
    if (!grid) return;
    var selected = checkbox.checked ? true : false;
    for (var r = 1; r < grid.rows.length; r++) {
        var inputs = grid.rows[r].cells[1].getElementsByTagName("input");
        if (inputs[0].type === "checkbox") {
            inputs[0].checked = selected;
        }
    }
}
 </script>

 

下面代码，是ItemTemplate中的CheckBox的onclick事件

onclick="checkboxSelectedSingle(this);，可以参考下面javascript。

// 单选
<script type="text/javascript">
function checkboxSelectedSingle(checkbox) {
    var grid = getGridView();
    if (!grid) return;
    var header = getHeaderCheckBox();
    if (!header) return;

    if (checkbox.checked) {
        header.checked = true;
        for (var r = 1; r < grid.rows.length; r++) {
            var inputs = grid.rows[r].cells[1].getElementsByTagName("input");
            if (inputs.length > 0 && inputs[0].type === "checkbox" && inputs[0].checked === false) {
                header.disabled = true;
                break;
            }
            else {
                header.disabled = false;
            }
        }
    }
    else {
        for (var r = 1; r < grid.rows.length; r++) {
            var inputs = grid.rows[r].cells[1].getElementsByTagName("input");
            if (inputs.length > 0 && inputs[0].type === "checkbox" && inputs[0].checked) {
                header.checked = true;
                header.disabled = true;
                break;

            }
            else {
                header.checked = false;
                header.disabled = false;
            }
        }
    }
}
</script>

 

单选事件中，它有操作自己本身，还与全选Checkbox交互。
即是所有行没有选时，全选是可以选的。
所有数据行未全选，只是选中其中一些行时，全选CheckBox是禁用操作，但它是选中状态。
只有所有数据行被选时，全选的CheckBox是选中状态，它又可以操作。

功能算是实现。但是由于在asp:UpdatePanel环境中。程序有遇上IsPostBack时，它会有出现意外状态，如删除记录行，更新，甚至有数据行添加和页面重新加载时。
解决这些问题，可以添加下面代码来处理，

 

 

不完整小演示，