jqgrid虚拟滚动（滚动加载）设置

我想对jqgrid中的数据使用滚动加载（虚拟滚动）功能

我一直在寻找很好的文档和示例，但我只找到了asp.net framework，这也不是很有帮助

我在服务器端使用JavaSpring框架

请为我的网格提供一些实现虚拟滚动功能的方法

我的网格设置是这样的

jQuery("#tree").jqGrid({
    url:'json/jsonSamplePots.json',
    datatype: "json",
    mtype:'GET',
    colNames: ["id", "no.", "name", "col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9", "col10", "col11", "col12", "col13", "col14", "col15", "col16"],
    colModel: [
        {name:'id',width: 30, editable:false, align:"right",sortable:false, hidden: true, key: true},
        {name:'no',width:80, editable:false, align:"left", sortable:true, sorttype:"int"},
        {name:'name', width:150, editable:true, sortable:true, sorttype:"text"},
        {name:'col1', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
        {name:'col2', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
        {name:'col3', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
        {name:'col4', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
        {name:'col5', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col6', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col7', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"int"},
        {name:'col8', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col9', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col10', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"int"},
        {name:'col11', width:120, editable:true, align:"left", sortable:true, sorttype:"text"},
        {name:'col12', width:80, editable:true, align:"left", sortable:true, sorttype:"text"},
        {name:'col13', width:80, editable:true, align:"right", sortable:true, hidden: true, sorttype:"text"},
        {name:'col14', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"text"},
        {name:'col15', width:300, editable:true, align:"left", sortable:true, sorttype:"int"},
        {name:'col16', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
    ],

    treeGridModel:'adjacency',
    treeGrid: true,
    cellEdit: true,
    ExpandColumn:'name',
    cellsubmit : 'clientArray',
    scroll : 1,
    loadonce : false,
    jsonReader : {
 root:"listTasks",
 cell:"",
 id: "id",
 repeatitems:false

}

}))

---

提前谢谢

没有内置的方法可以同时使用动态滚动和TreeGrid。使用TreeGrid时，所有寻呼机功能都将被禁用，并且在初始数据加载后，数据类型将自动设置为本地。您可以在TreeGrid文档的一节中阅读所有限制

更新

要使其在简单网格中工作，只需将scroll设置为true即可：

$('#grid').jqGrid({
  ...  
  //enable dynamic scrolling
  scroll: true,
  ...
});

jqGrid将禁用寻呼机控件，并在您滚动出当前页面时自动请求新页面。还有一种方法可以优化这种体验。您可以在prmNames选项中启用npage参数：

$('#grid').jqGrid({
  ...
  //enable dynamic scrolling
  scroll: true,
  //enable npage request parameter
  prmNames: { npage: 'npage' },
  ...
});

---

这将允许jqGrid通过向请求中添加npage参数一次请求多个页面（它将包含jqGrid请求的页面数，并且您应该返回正确的行数）。

没有内置方法将动态滚动和TreeGrid一起使用。使用TreeGrid时，所有寻呼机功能都将被禁用，并且在初始数据加载后，数据类型将自动设置为本地。您可以在TreeGrid文档的一节中阅读所有限制

更新

要使其在简单网格中工作，只需将scroll设置为true即可：

$('#grid').jqGrid({
  ...  
  //enable dynamic scrolling
  scroll: true,
  ...
});

jqGrid将禁用寻呼机控件，并在您滚动出当前页面时自动请求新页面。还有一种方法可以优化这种体验。您可以在prmNames选项中启用npage参数：

$('#grid').jqGrid({
  ...
  //enable dynamic scrolling
  scroll: true,
  //enable npage request parameter
  prmNames: { npage: 'npage' },
  ...
});

---

这将允许jqGrid通过向请求中添加npage参数一次请求多个页面（它将包含jqGrid请求的页面数，您应该返回正确的行数）。

感谢您的回复。是的，我通过了这些要点，有没有办法让它工作。另外，您能否告诉我们如何对简单网格（而不是treegrid）执行此操作。解决此问题需要重写大部分treegrid功能，因为动态加载子节点需要本地数据类型。我不知道有什么现成的解决方案。至于简单网格，请阅读update.tpeczek。。。非常感谢你。。我在想，让它在treegrid中工作，使用$（#grid”）.scroll（function（）{.ajax{}）；在这里，我将传递最后一个行号和页码，返回行，然后使用$（“#grid”）.append（rows）；你可以试试，你也可以看看+1的绝对正确答案@mayur：我建议您花更多时间了解jqGrid是如何工作的，并利用现有的可能性，而不是花时间扩展jqGrid的功能。如果您想更多地考虑如何计算页面大小，特别是对于一些已加载但已折叠的行，您将看到，在数据分页的情况下，仅定义树网格中应显示的内容并不容易。对于“简单”网格，我建议您更好地使用标准分页而不是虚拟分页。谢谢您的回复。是的，我通过了这些要点，有没有办法让它工作。另外，您能否告诉我们如何对简单网格（而不是treegrid）执行此操作。解决此问题需要重写大部分treegrid功能，因为动态加载子节点需要本地数据类型。我不知道有什么现成的解决方案。至于简单网格，请阅读update.tpeczek。。。非常感谢你。。我在想，让它在treegrid中工作，使用$（#grid”）.scroll（function（）{.ajax{}）；在这里，我将传递最后一个行号和页码，返回行，然后使用$（“#grid”）.append（rows）；你可以试试，你也可以看看+1的绝对正确答案@mayur：我建议您花更多时间了解jqGrid是如何工作的，并利用现有的可能性，而不是花时间扩展jqGrid的功能。如果您想更多地考虑如何计算页面大小，特别是对于一些已加载但已折叠的行，您将看到，在数据分页的情况下，仅定义树网格中应显示的内容并不容易。对于“简单”网格，我建议您更好地使用标准分页，而不是虚拟分页。