Javascript jqGrid：如何更改单元格填充

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

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

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

使用CSS添加填充。例如，

#网格id td，#网格id th{padding:10px；}

将

cellLayout

选项设置为21（paddingleft+paddingright+borderleft）

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

有人知道如何解决这个问题，或者知道改变单元格填充的替代方法吗？

根据，首选方法是

单元格布局

选项。不幸的是，这个问题有点神秘：

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

---

我已经找到了解决办法，我有点惭愧没有早点找到它：p

显然，网格头是th，但与网格本身不在同一个表中。

---

因此，通过将

#grid th{…}

更改为

body.ui jqgrid.ui jqgrid htable th{…}

我让它按预期工作。

我终于找到了如何正确设置jqgrid th和

td的填充。这是我的解决方案：

1.重写
.ui jqgrid.ui jqgrid htable th div
css类

.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;
}

我解决了一个类似的问题，用一个div包装每个单元格中的内容，然后依次填充。它将为您提供正确的行为，因为带有的列将固定到jqgrid配置

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

向需要设置样式的列添加新CSS类：

$（“#数据表”）.jqGrid({
...
colModel：[
{name:“name”，index:“name”，width:600，align:“left”，class:“grid col”}，
{name:“price”，index:“price”，width:100，align:“right”，class:“grid col”}
],
...
});

注意
classes:“grid col”
在这段代码中

然后使用
使用CSS设置列的样式！重要信息
为这些规则赋予最高优先级：

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

它在jqGrid 4.5.4中适用，没有列大小调整问题

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

这将为标题和内容单元格创建单元格填充
 这就是我的问题的基础。（而我不能像预期的那样工作）嗯。。。如果这是Tony（开发者）推荐的，那么我不知道还能告诉你什么。您可能需要修改jqGrid文件才能正常工作。感谢您指出cellLayout。它解决了我遇到的一个类似问题。在某些情况下，仅更改th样式是不够的，例如，对于单词换行，还必须在.ui jqgrid.ui jqgrid htable th div.上应用相同的样式规则换行。干杯
 tr.jqgrow td { padding: 0px 2px 0px !important; }