asp.net 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了，除非做門戶網站