jqGrid: как изменить заполнение ячейки

Question

Я использую jqGrid3.6.5 на размещенных в Google jQueryUI1.8.2 и jQuery1.4.2

Я хочу изменить заполнение ячеек 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 {...}, я получил его, как и ожидалось.

Answer 3

По словам разработчика jqGrid , опция cellLayout является предпочтительным способом.К сожалению, документация немного загадочна:

Этот параметр определяет заполнение + ширину границы ячейки.Обычно это не следует изменять, но если пользовательские изменения в элементе td вносятся в файл grid css, это нужно будет изменить.Начальное значение 5 означает paddingLef⇒2 + paddingRight⇒2 + borderLeft⇒1 = 5

Answer 4

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

Это создаст заполнение ячеек для ячеек заголовка и содержимого.

Answer 5

Я решил аналогичный случай, поместив содержимое в каждую ячейку в 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 6

Я наконец-то понял, как правильно установить отступы в jqGrid-ом и td. Это мое решение:

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