Gridviewヘッダーフリーズがマスターページで機能しない

Question

スクロール中にグリッドビューヘッダーがフリーズする必要があります。だから私は通常のページで動作するスクリプトを得た。しかし、マスターページを使用している間はスクロールを持つ通常のグリッドのように機能します。マスターページでスクリプトを変更するにはどうすればよいですか？

<script type="text/javascript" language="javascript"> 

      var GridId = "<%= GridView1.ClientID %>"; 
      var ScrollHeight = 300; 
      window.onload = function() { 
       var grid = document.getElementById(GridId); 
       var gridWidth = grid.offsetWidth; 
       var gridHeight = grid.offsetHeight; 
       var headerCellWidths = new Array(); 
       for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
       } 
       grid.parentNode.appendChild(document.createElement("div")); 
       var parentDiv = grid.parentNode; 

       var table = document.createElement("table"); 
       for (i = 0; i < grid.attributes.length; i++) { 
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
         table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
        } 
       } 
       table.style.cssText = grid.style.cssText; 
       table.style.width = gridWidth + "px"; 
       table.appendChild(document.createElement("tbody")); 
       table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
       var cells = table.getElementsByTagName("TH"); 

       var gridRow = grid.getElementsByTagName("TR")[0]; 
       for (var i = 0; i < cells.length; i++) { 
        var width; 
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
         width = headerCellWidths[i]; 
        } 
        else { 
         width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
        } 
        cells[i].style.width = parseInt(width - 3) + "px"; 
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
       } 
       parentDiv.removeChild(grid); 

       var dummyHeader = document.createElement("div"); 
       dummyHeader.appendChild(table); 
       parentDiv.appendChild(dummyHeader); 
       var scrollableDiv = document.createElement("div"); 
       if (parseInt(gridHeight) > ScrollHeight) { 
        gridWidth = parseInt(gridWidth) + 17; 
       } 
       scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px"; 
       scrollableDiv.appendChild(grid); 
       parentDiv.appendChild(scrollableDiv); 
      } 

    </script> 


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" > 
      <Columns 
       <asp:BoundField DataField="ContactName" HeaderText="Contact Name" /> 
       <asp:BoundField DataField="City" HeaderText="City" /> 
       <asp:BoundField DataField="Country" HeaderText="Country" /> 
      </Columns> 
     </asp:GridView> 

Answer 1

これはJQueryを使用して実現できます。上記のスクリプトで少し変更が加えられました。出力を得た。

//ページにこのコードの小片を追加// .jsファイルに

(function ($) { 
     $.fn.Scrollable = function (options) { 
      var defaults = { 
       ScrollHeight: 300, 
       Width: 0 
      }; 
      var options = $.extend(defaults, options); 
      return this.each(function() { 
       var grid = $(this).get(0); 
       var gridWidth = grid.offsetWidth; 
       var headerCellWidths = new Array(); 
       for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
       } 
       grid.parentNode.appendChild(document.createElement("div")); 
       var parentDiv = grid.parentNode; 

       var table = document.createElement("table"); 
       for (i = 0; i < grid.attributes.length; i++) { 
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
         table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
        } 
       } 
       table.style.cssText = grid.style.cssText; 
       table.style.width = gridWidth + "px"; 
       table.appendChild(document.createElement("tbody")); 
       table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
       var cells = table.getElementsByTagName("TH"); 

       var gridRow = grid.getElementsByTagName("TR")[0]; 
       for (var i = 0; i < cells.length; i++) { 
        var width; 
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
         width = headerCellWidths[i]; 
        } 
        else { 
         width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
        } 
        cells[i].style.width = parseInt(width - 3) + "px"; 
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
       } 
       parentDiv.removeChild(grid); 

       var dummyHeader = document.createElement("div"); 
       dummyHeader.appendChild(table); 
       parentDiv.appendChild(dummyHeader); 
       if (options.Width > 0) { 
        gridWidth = options.Width; 
       } 
       var scrollableDiv = document.createElement("div"); 
       gridWidth = parseInt(gridWidth) + 17; 
       scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";    
       scrollableDiv.appendChild(grid); 
       parentDiv.appendChild(scrollableDiv); 
      }); 
     }; 
    })(jQuery); 

を以下のコードを入れてください。

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $('#<%=this.grdDisplay.ClientID %>').Scrollable(); 
     } 
      ) 
    </script> 

Answer 2

私は複数のgridviewsサポートのための上記のコードを変更しました。

(function ($) { 
$.fn.Scrollable = function (options) { 
    var defaults = { 
     ScrollHeight: 300, 
     Width: 0 
    }; 
    var options = $.extend(defaults, options); 

    return this.each(function (index) { 
     var grid = $(this).get(index); 
     var gridWidth = grid.offsetWidth; 
     var gridHeight = grid.offsetHeight; 
     var headerCellWidths = new Array(); 
     for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
      headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
     } 
     grid.parentNode.appendChild(document.createElement("div")); 
     var parentDiv = grid.parentNode; 

     var table = document.createElement("table"); 
     for (i = 0; i < grid.attributes.length; i++) { 
      if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
       table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
      } 
     } 
     table.style.cssText = grid.style.cssText; 
     table.style.width = gridWidth + "px"; 
     table.appendChild(document.createElement("tbody")); 
     table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
     var cells = table.getElementsByTagName("TH"); 

     var gridRow = grid.getElementsByTagName("TR")[0]; 
     for (var i = 0; i < cells.length; i++) { 
      var width; 
      if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
       width = headerCellWidths[i]; 
      } 
      else { 
       width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
      } 
      cells[i].style.width = parseInt(width - 3) + "px"; 
      gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
     } 
     parentDiv.removeChild(grid); 

     var dummyHeader = document.createElement("div"); 
     dummyHeader.appendChild(table); 
     parentDiv.appendChild(dummyHeader); 
     if (options.Width > 0) { 
      gridWidth = options.Width; 
     } 
     var scrollableDiv = document.createElement("div"); 
     if (parseInt(gridHeight) > options.ScrollHeight) { 
      gridWidth = parseInt(gridWidth) + 17; 
     } 
     scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px"; 
     scrollableDiv.appendChild(grid); 
     parentDiv.appendChild(scrollableDiv); 
    }); 
}; 
})(jQuery); 

このコードをページに追加します。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%=GridView1.ClientID %>, #<%=GridView2.ClientID %>, #<%=GridView3.ClientID %>').Scrollable({ 
      ScrollHeight: 200 
     }); 
    }); 
</script>