jqGrid:如何更改单元格填充

Question

我在google托管的jQueryUI1.8.2和jQuery1.4.2上使用jqGrid3.6.5

我想更改jqGrid的单元格填充.出于测试目的,我想在每个单元格周围将其设置为10px.

我在google搜索时遇到的唯一选择如下:

1. 用CSS添加填充.例如.#grid-id td, #grid-id th { padding:10px; }
2. 将cellLayout选项设置为21(paddingleft + paddingright + borderleft)

当我在colModel中的任何列上没有设置宽度时,这就像预期的那样工作.虽然当我调整其中一个标题,或在colModel中设置列宽时,标题和单元格不再对齐.

任何人都知道如何解决这个问题或知道改变细胞填充的替代方法？

Answer 1

将新CSS类添加到您需要设置样式的列:

$("#dataTable").jqGrid({

...

  colModel:[
    {name:"name",index:"name", width:600, align:"left", classes:"grid-col"},
    {name:"price",index:"price", width:100, align:"right", classes:"grid-col"}
  ],

...

});

请注意classes:"grid-col"此代码段.

然后使用CSS为列设置样式!important以使这些规则具有最高优先级:

.grid-col {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

它在jqGrid 4.5.4中适用于我,没有列调整大小的问题.

Answer 2

我已经找到了解决方案，但为没有早点找到它而感到有点羞愧：P

显然，网格标题是，但与网格本身不在同一个表中。因此，通过更改#grid-id th {...}为body .ui-jqgrid .ui-jqgrid-htable th {...}，我让它按预期工作。