Gridview Üstbilgisi Ana Sayfalarda çalışmaz Freeze

Question

Kaydırma sırasında dondurulacak gridview başlığına ihtiyacım var. Bu yüzden normal sayfalarda çalışan bir senaryo var. Ancak, Master sayfalarını kullanırken, kaydırma içeren normal bir ızgara gibi davranır. ana sayfalarda çalışması için betikte ne değiştirmeliyim.

<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

Bu, JQuery kullanılarak elde edilebilir. Yukarıdaki komut dosyalarında biraz değişiklik yapıldı. çıktı aldım.

// sayfasında bu kod küçük bir parça ekle bir .js dosyası

(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); 

// aşağıda kod yerleştirin.

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

Answer 2

Birden çok kılavuz görünümü desteği için yukarıdaki kodu değiştirdim.

(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); 

Bu kodu sayfaya ekleyin.

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