让GridView中CheckBox列支持FireFox

在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>
                        
&nbsp;<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



微信扫描下方的二维码阅读本文

那年今日

2020-07-08 微信小程序开放「分享到朋友圈」功能 (7 个评论)

2009-07-08 web developer tips (19):设置默认视图为设计视图 (1 个评论)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注