позиционирование таблицы с в div

Я использую следующий фрагмент кода для отображения данных в таблице html с увеличением времени загрузки с большими данными.позиционирование таблицы с в div

Код сниппета:

<body onload="load();"> 
     <div id="Grid" style="overflow:scroll; width:600px;height:300px; onscroll="handleScroll();"></div> 
     <script type="text/javascript">   



    var orderArray = [100]; 
    var viewportH = 300; 
    var prevScrollTop = 0; 
    var scrollTop = 0; 
    var vScrollDir = 1; 
    var rows = []; 
    var top=0; 
    var temp=0; 
    var m = 0; 
    var prevRenderedRange = {}, prevVisibleRange = {}; 
    var renderedrange, visiblerange; 
     var rows = []; 
     var extend; 
     var tbody = document.createElement('tbody'); 
     for (var i = 0; i < 100; i++) { 
      orderArray[i] = { "CustomerID": i, "CustomerName": "Name" + i, "City": "City" + i } 
     } 
     function load() { 
      var panel = document.createElement('div'); 
      var h = orderArray.length * 20; 
      panel.style.height = h + "px"; 
      var table = document.createElement('table'); 
      table.cellSpacing = 0; 
      //table.style.position = "absolute"; 
      table.className = "table1"; 
      table.appendChild(tbody); 
      panel.appendChild(table); 
      var element = document.getElementById("Grid"); 
      element.appendChild(panel); 
      this.render(); 
     } 

     function handleScroll() { 
      var contentdiv = $("#Grid"); 
      scrollTop = contentdiv.scrollTop();   

      var vScrollDist = Math.abs(scrollTop - prevScrollTop); 
      if (vScrollDist) { 
       vScrollDir = prevScrollTop < scrollTop ? 1 : -1; 
       this.render(); 
       prevScrollTop = scrollTop; 
      } 
     } 

     function render() {    
       renderedrange = this._getRenderedRowRange();   

      var datarange = orderArray.slice(renderedrange.top, renderedrange.bottom); 
       var margin = ((renderedrange.top - visiblerange.top)*20) + 
        (renderedrange.top * 20) + 
        -temp + 
        "px"; 
      console.log("VisibleRange: " + visiblerange.top + " " + visiblerange.bottom); 
      console.log("RenderedRowRange: " + renderedrange.top + " " + renderedrange.bottom); 
      console.log(margin); 
      $(".table1").css({ "top": margin }); 
      this._render(renderedrange);       
     } 

     function _render(range) { 

      if (!range) 
       return; 

      console.log("Top: " + range.top + "Bottom: " + range.bottom); 
      for (var i = range.top; i <= range.bottom; i++) { 

       if (i > orderArray.length - 1) { 
        return; 
       } 
       if (rows[i] != null) 
        continue; 

       var vals = orderArray[i]; 
       var tr = document.createElement('tr'); 
       tr.className = "rowcell"; 
       tr.style.height = "20px"; 
       tr.height = "20px" 
       var cell1 = document.createElement("td"); 
       cell1.style.border = "0px solid black"; 
       cell1.textContent = vals["CustomerID"]; 
       cell1.style.height = "20px"; 
       tr.appendChild(cell1); 

       var cell2 = document.createElement("td"); 
       cell2.style.border = "0px solid black"; 
       cell2.textContent = vals["CustomerName"]; 
       cell2.style.height = "20px"; 
       tr.appendChild(cell2); 
       tbody.appendChild(tr); 
       rows[i] = i; 
      } 




     }  

     function _getRenderedRowRange() { 
      visiblerange = this._getVisibleRowRange(); 
      var range = {}; 
      var topIndex = visiblerange.top; 
      var bottomIndex = visiblerange.bottom; 
      extend = Math.round(300/20); 
      var minExtend = 3; 
      if (vScrollDir == 1) { 
       topIndex -= minExtend; 
       bottomIndex += extend; 
      } else { 
       topIndex -= (extend - minExtend); 
       bottomIndex += minExtend; 
      } 
      topIndex = Math.max(0, topIndex); 
      bottomIndex = Math.min(orderArray.length, bottomIndex); 
      range = { top: topIndex, bottom: bottomIndex };    
      return range; 
     } 

     function _getVisibleRowRange() { 
      var coeff = scrollTop/(20 * orderArray.length); 
      top = (coeff * orderArray.length); 
      temp = (top % 1) * 20; 
      var topIndex = Math.floor(top); 
      var bottomIndex = Math.ceil(this._getrowposition(scrollTop + 300)); 
      topIndex = Math.max(0, topIndex); 
      bottomIndex = Math.min(orderArray.length, bottomIndex); 
      var rang = { top: topIndex, bottom: bottomIndex }; 
      return rang; 
     } 

     function _getrowposition (y) { 
      return Math.floor((y)/20); 
     } 


    </script> 
</body>

В этом случае я обновить верхний край стола, чтобы поместить таблицу в DIV. Но это неправильно.

Примечания: это простой пример для виртуализации таблицы в моем случае я должен заменить таблицу в DIV

источник

2013-11-11 Raja

Вашего вопроса не ясно, в конце концов. В любом случае, если вы хотите расположить таблицу внутри div, сделайте значение позиции таблицы относительно родительского div;

style="position:relative;"

таким образом ваша таблица будет иметь относительное положение

источник

2013-11-11 11:51:23

Спасибо за ваш ответ, если решение работает для меня. В этом же, у меня есть некоторые проблемы при прокрутке, мы не можем добиться гладкой прокрутки при определении позиции с верхним краем, я попытался создать скрипт JS, чтобы объяснить эту проблему. Но я не могу создать скрипт JS. Есть ли способ добиться плавной прокрутки, в этом случае таблица будет дрожать при выполнении прокрутки (из-за изменения края верхней части) – Raja

Я думаю, что эта проблема исходит из вашего кода javascript, попробуйте вернуть false после завершения прокрутки код, может быть, это поможет. –

Благодарим вас за ответ, я попытался с помощью sugessted code return false with в событии On Scroll, но все же у меня такая же проблема. Есть ли другой способ вместо обновления верхнего края таблицы для достижения requiremnt? – Raja

позиционирование таблицы с в div

ответ

Смежные вопросы