kendoui：網格 - 在網格的頂部和底部設置傳呼機

Question

有種簡單的情況找不到解決方案。 Kendo-UI只在底部實現網格分頁。我試圖讓它顯示頁面頂部，但它變得無法點擊。 我認爲我的克隆部分是錯誤的，但不知道如何解決它。先謝謝你們。

這裏是腳本，JSP的一部分......

<kendo:grid name="grid" pageable="true" dataBound="onBound"> 
    <kendo:dataSource serverPaging="true" serverSorting="true"> 
     <kendo:dataSource-transport> 
      <kendo:dataSource-transport-read url="api/items" /> 
     </kendo:dataSource-transport> 
     <kendo:dataSource-schema data="data" total="total" /> 
    </kendo:dataSource> 
    <kendo:grid-columns> 
     <kendo:grid-column title="id" field="itemId"></kendo:grid-column> 
    </kendo:grid-columns> 
</kendo:grid> 



<script type="text/javascript"> 
    function onBound() { 
     var grid = $("#grid"); 
     grid.find(".k-grid-pager") 
      .clone() 
      .insertBefore(grid.find(".k-grid-header")) 
      .addClass("pagerTop").css("border-width", "0 0 1px 0"); 
    } 
</script> 

Answer 1

試試這個，我希望它能幫助。

function BindTopPager(e) { 

    var gridView = $('#grid').data('kendoGrid'), 
     pager = $('#div .k-pager-wrap'), 
     id = pager.attr('id') + '_top', 
     $grid = $('#grid'), 
     topPager; 

    if (gridView.topPager === null) { 
     // create top pager div 
     topPager = $('<div/>', { 
      'id': id, 
      'class': 'k-pager-wrap pagerTop' 
     }).insertBefore($grid.find('.k-grid-header')); 

     // copy options for bottom pager to top pager 
     gridView.topPager = new kendo.ui.Pager(topPager, $.extend({}, gridView.options.pageable, { dataSource: gridView.dataSource })); 

     // cloning the pageable options will use the id from the bottom pager 
     gridView.options.pagerId = id; 

     // DataSource change event is not fired, so call this manually 
     gridView.topPager.refresh(); 
    } 
} 

var grid = $("#grid").data("kendoGrid"); 
grid.bind("dataBound", BindTopPager); 
grid.dataSource.fetch(); 

DEMO

Answer 2

我用上面的代碼，並做了一些調整，使其工作。我把它變成了JS方法。

function moveNavigationToTopOnGrid(gridSelector) { 
    var grid = $(gridSelector).data("kendoGrid"), 
     pager = $(gridSelector + ' .k-pager-wrap'), 
     id = pager.prop('id') + '_top', 
     $grid = $(gridSelector); 

    if (!grid.topPager) { 
     // create top pager div 
     topPager = $('<div/>', { 
      'id': id, 
      'class': 'k-pager-wrap pagerTop' 
     }).insertBefore($grid); 

     // copy options for bottom pager to top pager 
     grid.topPager = new kendo.ui.Pager(topPager, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource })); 

     // cloning the pageable options will use the id from the bottom pager 
     grid.options.pagerId = id; 

     // DataSource change event is not fired, so call this manually 
     grid.topPager.refresh(); 
    } 
}