javascript - slickGrid中的分页

标签 javascript jquery paging slickgrid pager

我能够在 slickGrid 中使用分页,但是我是 jquery 和 slickGrid 的新手,无法在页面之间移动。谁能帮我这个?任何帮助是极大的赞赏。谢谢!

$(document).ready(function() {var columns = [
{id:"counter", name:"#",field:"counter"},
{id:"data1", name:"Data 1",field:"data1"},
{id:"data2", name:"Data 2",field:"data2"},
{id:"data3", name:"Data 3",field:"data3"},
{id:"data4", name:"Data 4",field:"data4"}];

var options = { enableCellNavigation: false,
enableColumnReorder: false};

var FB_C_grid;
var FB_C_data;
var selectedRowIds = [];
var dataView;

$(function() {
FB_C_data = []; 
FB_C_data[0]={"id":"0",
"data1":"test1",
"data2":"test1",
"data3":"test1",
"data4":"test1,
"counter":"1"
}; 

for (var i=1; i<50000; i++) {
    var d = (FB_C_data[i] = {});enter code here

    d["id"] = "id_" + i;
    d["data1"] = "data1_" + i;
    d["data2"] = "data2_" + i;
    d["data3"] = "data3_" + i;
    d["data4"] = "data4_" + i;
                d["counter"] = i;
   }


    dataView = new Slick.Data.DataView();
    dataView.setItems(FB_C_data);
    dataView.setPagingOptions({pageSize:20});
    FB_C_grid= new Slick.Grid($("#FB_C_sheet"),dataView.rows, columns,options);
    var pager = new Slick.Controls.Pager(dataView, FB_C_grid, $("#pagerTest"));

    dataView.onRowsChanged.subscribe(function(rows) {
 FB_C_grid.removeRows(rows);
 FB_C_grid.render();

         if (selectedRowIds.length > 0)
    {
     // since how the original data maps onto rows has changed,
     // the selected rows in the grid need to be updated
     var selRows = [];
     for (var i = 0; i < selectedRowIds.length; i++)
     {
      var idx = dataView.getRowById(selectedRowIds[i]);
      if (idx != undefined)
       selRows.push(idx);
     }

      FB_C_grid.setSelectedRows(selRows);
    }
   });

   dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
    var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
                var enableAddRow = isLastPage || pagingInfo.pageSize==0;
                var options = FB_C_grid.getOptions();

                if (options.enableAddRow != enableAddRow)
         FB_C_grid.setOptions({enableAddRow:enableAddRow});
   });

               dataView.onRowCountChanged.subscribe(function(args) {
    FB_C_grid.updateRowCount();
                FB_C_grid.render();
   });

})

  });

最佳答案

当您尝试将 jQuery 对象传递到 SlickGrid 而 SlickGrid 已经在后面的代码中使用 jQuery 时,我看到了您的一些错误。当你创建你的 SlickGrid 对象时,你只需要传递你的网格的名称,所以在你的代码中,你必须替换这个没有 jQuery 包装器的 $("#pagerTest") 变成这个 “#pagerTest”

我看到你在 2 个不同的地方调用它相同,所以用这个替换你的 2 行:

FB_C_grid= new Slick.Grid("#FB_C_sheet",dataView.rows, columns,options);
var pager = new Slick.Controls.Pager(dataView, FB_C_grid, "#pagerTest");

希望能帮助您实现它...

关于javascript - slickGrid中的分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4846415/

相关文章:

PHP undefined variable 和 Javascript

javascript - 检测键盘箭头键按下了多长时间?

jquery - JQuery 中的动态高度

javascript - 输出数组变量javascript

c# - Repeater、Custom Paging、PagedDataSource,可能吗?

javascript - SVG 元素上 jQuery .append 的替代方案

javascript - 我将如何在 jquery 中检测触摸屏并隐藏一个 div

javascript - 在命名空间内使用 jQuery 的 filter() 时,是什么导致了这些 JavaScript 错误?

linux - 什么逻辑 CPU 适用于生成正确的 PageNumber 和 PageOffset?

process - 具体来说,将进程分成页面是什么意思?