jqGrid：如何更改单元格填充

我在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"此片段中的classes:"grid-col" 。

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

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

它在jqGrid 4.5.4中适用于我，没有列resize的问题 。

Answer 2

根据jqGrid开发人员的说法 ， cellLayout选项是首选方式。 不幸的是， 文档有点神秘：

此选项确定单元格的填充+边框宽度。 通常这不应该更改，但如果在网格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("
") }) 

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

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