如何在 header 中添加单独的列以在 jqgrid 中进行垂直滚动

Question

当 jqgrid 有超过 50 条记录时，行列未与 header 列正确对齐。

如何在 header 中添加额外的列以便在 jqgrid 中垂直滚动，如下图所示。

示例： Display Extra column for vertical scrolling in jqgrid.

在我的 jqgrid 中没有垂直滚动的单独列，当 header 超过 10 时，行和 header 列会发生变化。

下面是没有 header 垂直滚动列的 jqgrid 图像。

Answer 1

使用 jqGrid 版本 4.1.1，您可以向您的列添加额外的值：

colNames:['ID',
              'Etat',
              'Date',
              'Fournisseur<br/>Commande',
              'Contenu',''],

然后在空白列定义中添加：

  colModel:[
      {name:'ID',index:'ID',hidden:true,width:70,align:'center',sorttype: 'int'},
      {name:'ETAT',index:'ETAT',width:150,align:'center'},
      {name:'DATE',index:'DATE',width:150,align:'center',title: false},
      {name:'FOURNISSEUR_CMD',index:'FOURNISSEUR_CMD',width:200,align:'center',title: false},
      {name:'CONTENU',index:'CONTENU',width:200,align:'center',title: false},
 { name: "empty1", width: 10, sortable: false, hidedlg: true, search: false, resizable: false, fixed: true }     
    ],

然后你应该得到类似 this example

的输出

对于 jqGrid 版本 4.6.0，默认情况下您将拥有这样的列 Fiddle Demo

Answer 2

在 ui.jqgrid.css 文件中添加 padding-right: 20px; 后 css class .ui-jqgrid .ui-jqgrid-htable header随着垂直滚动显示空列。

.ui-jqgrid .ui-jqgrid-htable {table-layout:fixed;margin:0; padding-right: 20px;}

如何在 header 中添加单独的列以在 jqgrid 中进行垂直滚动

How to add separate column in header for vertical scrolling in jqgrid

html

css

jquery

jqgrid