Question

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

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

我在谷歌搜索时遇到的唯一选择如下：

使用CSS添加填充。例如。 #grid-id td, #grid-id th { padding:10px; }
将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"。

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

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

它适用于jqGrid 4.5.4 ，没有列调整大小的问题。

Answer 2

根据jqGrid developer，cellLayout选项是首选方式。不幸的是documentation有点神秘：

此选项确定单元格的填充+边框宽度。通常这不应该更改，但如果在网格css文件中对td元素进行自定义更改，则需要更改。初始值5表示paddingLef⇒2+paddingRight⇒2+borderLeft⇒1= 5

Answer 3

我找到了解决方案并且对于没有尽快找到它感到有点惭愧：P

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

Answer 4

我通过用div填充每个单元格中的内容来解决类似的情况。它将为您提供正确的行为，因为保持固定到您的jqgrid配置的列。

$("tr.jqgrow td").each(function(){
  $(this).wrapInner("<div class=\"cell\"/>")
})

并像这样设计div.cell（.sass）。

table td .cell
  padding-left: 8px
  padding-right: 8px

Answer 5

 tr.jqgrow td { padding: 0px 2px 0px !important; }

这将为标题和内容单元格创建单元格填充。

Answer 6

我终于弄明白了如何正确地将填充设置为jqGrid和td。这是我的解决方案：

1.Override .ui-jqgrid .ui-jqgrid-htable th div css class

.ui-jqgrid .ui-jqgrid-htable th div { padding: 10px; }

不要在.ui-jqgrid .ui-jqgrid-htable th类中添加填充。

2.完成上述操作后，可以在jqgrid数据行中添加填充。

.ui-jqgrid tr.jqgrow td{
     height: auto;
     white-space: normal;
     padding: 10px;
}

jqGrid：如何更改单元格填充

6 个答案: