jqGrid как применять дополнительные классы к колонкам заголовков

Question

Я хотел бы применить дополнительный класс к конкретным столбцам, я знаю, что это возможно для строк, указав это в colModel. Но классы применяются только к столбцам в «строках результата», а не к заголовку.

То, что я пытаюсь достичь, состоит в том, чтобы скрыть конкретные столбцы для меньшего окна просмотра простым именем класса (для использования с Twitter Bootstrap).

Answer 1

Похоже, что единственным атрибутом атрибута класса для всего столбца (включая строку заголовка) является применение записей класса colModel для самих заголовков. Как вы уже упоминали, помещение значения в colModel уже применит его к строкам данных, но оставит заголовки без изменений.

К счастью, вы можете установить это, чтобы любые классы, которые вы применяете к спецификации colModel, автоматически применяются к соответствующим столбцам заголовка, используя один вызов функции.

Вот пример того, как это выглядит:

//Takes css classes assigned to each column in the jqGrid colModel 
    //and applies them to the associated header. 
    var applyClassesToHeaders = function (grid) { 
     // Use the passed in grid as context, 
     // in case we have more than one table on the page. 
     var trHead = jQuery("thead:first tr", grid.hdiv); 
     var colModel = grid.getGridParam("colModel"); 

     for (var iCol = 0; iCol < colModel.length; iCol++) { 
      var columnInfo = colModel[iCol]; 
      if (columnInfo.class) { 
       var headDiv = jQuery("th:eq(" + iCol + ") div", trHead); 
       headDiv.addClass(columnInfo.class); 
      } 
     } 
    }; 

    //Example grid configuration just to illustrate 
    var grid = jQuery('#list'); 
    grid.jqGrid({ 
     data: myData, 
     datatype: 'local', 
     caption: 'Order Details', 
     height: 'auto', 
     gridview: true, 
     rownumbers: true, 
     viewrecords: true, 
     pager: '#pager', 
     rownumbers: true, 
     colNames: ['Order ID', 'Order', 'Shipment', 'Details', 'Status'], 
     colModel: [ 
      { name: 'orderID', index: 'orderID', key:true, width: 50, 
sorttype: 'int', class: 'alwaysShow' }, 
      { name: 'orderDate', index: 'orderDate', width: 120, 
sorttype: 'date', formatter: 'date', class: 'alwaysShow' }, 
      { name: 'shipmentDate', index: 'shipmentDate', width: 120, 
sorttype: 'date', formatter: 'date', class: 'alwaysShow' }, 
      { name: 'productDetails', index: 'productDetails', width: 250, 
sorttype: 'string', formatter: 'string', class: 'sometimesShow' }, 
      { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true, 
class: 'neverShow' } 
     ] 
    }); 

    //Applies the classes to the headers once the grid configuration is complete. 
    applyClassesToHeaders(grid); 

Пожалуйста, обратите внимание, что этот метод применим атрибут класса к DIV, содержащегося внутри TH. Если вам нужно обратиться ко всему TH, используйте «th: eq (« + iCol + »)» вместо «th: eq (« + iCol + ») div».

Благодаря Олегу за удивительный предыдущий ответ, содержащий хороший метод для разбора заголовков таблицы jqGrid. Было здорово не притворяться, чтобы работать так хорошо. https://stackoverflow.com/a/3979490/2548115

Answer 2

Ответ сверху почти работает, но нуждается в некоторой настройке. columnInfo.class должен быть columnInfo.classes

//Takes css classes assigned to each column in the jqGrid colModel 
    //and applies them to the associated header. 
    var applyClassesToHeaders = function (grid) { 
     // Use the passed in grid as context, 
     // in case we have more than one table on the page. 
     var trHead = jQuery("thead:first tr", grid.hdiv); 
     var colModel = grid.getGridParam("colModel"); 

     for (var iCol = 0; iCol < colModel.length; iCol++) { 
      var columnInfo = colModel[iCol]; 
      if (columnInfo.classes) { 
       var headDiv = jQuery("th:eq(" + iCol + ")", trHead); 
       headDiv.addClass(columnInfo.classes); 
      } 
     } 
    }; 

    //Example grid configuration just to illustrate 
    var grid = jQuery('#list'); 
    grid.jqGrid({ 
     data: myData, 
     datatype: 'local', 
     caption: 'Order Details', 
     height: 'auto', 
     gridview: true, 
     rownumbers: true, 
     viewrecords: true, 
     pager: '#pager', 
     rownumbers: true, 
     colNames: ['Order ID', 'Order', 'Shipment', 'Details', 'Status'], 
     colModel: [ 
      { name: 'orderID', index: 'orderID', key:true, width: 50, 
sorttype: 'int', classes: 'hidden-xs' }, 
      { name: 'orderDate', index: 'orderDate', width: 120, 
sorttype: 'date', formatter: 'date' }, 
      { name: 'shipmentDate', index: 'shipmentDate', width: 120, 
sorttype: 'date', formatter: 'date' }, 
      { name: 'productDetails', index: 'productDetails', width: 250, 
sorttype: 'string', formatter: 'string', classes: 'hidden-xs' }, 
      { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true, 
classes: 'hidden-xs' } 
     ] 
    }); 

    //Applies the classes to the headers once the grid configuration is complete. 
    applyClassesToHeaders(grid); 

Answer 3

Вы можете добавить атрибут headercss в этой конкретной области или столбца, что вы используете

Например, в полях случае

fields: [ 
    { name: "age", type: "number", headercss: "assignment_role" }, 
    { type: "control" } 
], 

Так что теперь " assign_role "будет отображаться в заголовочном поле

Источник: JSGrid field documentation