让GridView中CheckBox列支持FireFox-优快云博客

本文介绍如何在ASP.NET的GridView中实现Checkbox列，并确保其在IE和Firefox浏览器下正常工作。通过调整JavaScript代码，使用兼容的方法获取表格元素，实现了跨浏览器的支持。

在Asp.net中，可以通过模板列，在Gridview中实现CheckBox列的实现，相关的代码并不复杂，你可以参考这里，我抽取的部分代码如下：

< script language ="javascript" type ="text/javascript" >     function selectAll(obj)
   {
        var theTable = obj.parentElement.parentElement.parentElement;
        var i;
        var j = obj.parentElement.cellIndex;
        for (i = 0 ;i < theTable.rows.length;i ++ )
       {
            var objCheckBox = theTable.rows[i].cells[j].firstChild;
            if (objCheckBox.checked != null )objCheckBox.checked =
    </ script >

< asp:GridView ID ="GridView1" runat ="server" AllowPaging ="True" AutoGenerateColumns ="False"
        DataKeyNames ="id" DataSourceID ="AccessDataSource1" AllowSorting ="True" OnDataBinding ="GridView1_DataBinding" OnRowDataBound ="GridView1_RowDataBound" >
           < Columns >
              < asp:TemplateField >
                   < ItemTemplate >
                       < asp:CheckBox ID ="CheckBox1" runat ="server" Checked ="True" Text ='<%#DataBinder.Eval(Container.DataItem,"id") % > ' />
                   </ ItemTemplate >
                    < HeaderTemplate >
                          < input id ="CheckAll" type ="checkbox" onclick ="selectAll(this);" /> 全选    </ HeaderTemplate >
< asp:BoundField DataField ="id" HeaderText ="id" InsertVisible ="False" ReadOnly ="True"      SortExpression ="id" />
                < asp:BoundField DataField ="name" HeaderText ="name" SortExpression ="name" />
                < asp:BoundField DataField ="sex" HeaderText ="sex" SortExpression ="sex" />
               < asp:BoundField DataField ="deptid" HeaderText ="deptid" SortExpression ="deptid" />
            </ Columns >
        </ asp:GridView >

js代码中的selectAll(obj)方法在IE中可以正常使用。昨天，一朋友做测试，发现在FireFox中不支持，让我帮着找找原因，估计是js的代码有不兼容Firefox的，查有关资料，原来在firefox不支持parentElement，但支持parentNode，于是把原来的js代码修改了一下，通过obj.parentNode.parentNode.parentNode 来获取表格对象（GridView编译后形成的表格），不过要找到CheckBox对象要麻烦点，因为没法通过obj.parentElement.cellIndex 来定位找到ChecKbox所在位置了，只能通过循环某一行的单元格来查找了。具体的代码如下：

function select_all(obj)

{

var theTable = obj.parentNode.parentNode.parentNode;

var j = obj.parentNode.cellIndex;

for ( var i = 0 ; i < theTable.rows.length; i ++ )

{

var objCheckBox = GetCheckBoxObj(theTable.rows[i].cells[j]);

if (objCheckBox.checked != null )

objCheckBox.checked

= obj.checked;

}

function GetCheckBoxObj(objCell)

{

for ( var i = 0 ; i < objCell.childNodes.length; i ++ )

{

if (objCell.childNodes[i].id)

{

return objCell.childNodes[i];

}

如此修改后，这个checkbox就可以兼容IE和FireFox了。

看来要是在web开发来要想兼容IE和Firefox，这个工作还是蛮艰巨的。有关firefox与ie 的javascript区别的你看看这里，总结非常详细。不但是js，css也有很多不一样的地方。嘿嘿，由此我有点怀念IE一统天下的年代了,不过我觉得一般企业级的应用还是不专门考虑FireFox了，除非做门户网站。
本文首发地址：http://www.watch-life.net/aspnet/gridview-checkbox-firefox.html
更多文章见：守望轩[http://www.watch-life.net/]

转载于:https://www.cnblogs.com/xjb/archive/2008/07/09/gridview-checkbox-firefox.html