tableToGrid - скрытие существующих столбцов

Question

У меня есть существующая таблица - вот пример:

<table id="searchResultsTable">
<tr><th>Column ID</th><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>100</td><td>Test 1</td><td>Test 2</td><td>Test 3</td></tr>
</table>

Я называю tableToGrid:

tableToGrid($('#searchResultsTable'), {
    caption: "Search Results",
    sortable: true,
    width: 800,
    height: 400,
    multiselect: false,
    onSelectRow: function(id) {
    }
});

Когда пользователь нажимает на ячейку, я хочу прочитать ячейку «Идентификатор столбца» для этой строки, но не хочу, чтобы эта ячейка была видимой. Как я могу скрыть эту ячейку "Column ID", чтобы она не отображалась для пользователя, а была доступна через событие onSelectRow?

Допустим, у вас есть таблица базы данных сотрудников. Таблица jqGrid будет выглядеть так:

ID   First Name    Last Name
101  John          Doe
102  Jane          Smith
103  Bill          Tetly

Я не хочу показывать столбец идентификатора, но хочу иметь к нему доступ, когда пользователь щелкает строку. То есть если кто-то нажимает «Билл», я хочу получить доступ к Employee.id (103) в onSelectRow.

Спасибо.

Answer 1

Изменение ширины столбца для любого количества столбцов

В этом случае после получения сборки jqgrid вы можете просто перейти к генерируемой таблице и вручную изменить ширину всех столбцов заголовка столбца и соответствующие данные без правкикакой-то утомительный код.

var tabColWidths ='70px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px';

    function reDefineColWidth(){
            var widthsArr = tabColWidths.split('|');

        for(var j=0; j < widthsArr.length ; j++ ){
                $('.ui-jqgrid-labels > th:eq('+j+')').css('width',widthsArr[j]);
                $('#searchResultsTable tr').find('td:eq('+j+')').each(function(){$(this).css('width',widthsArr[j]);})
            }
    }

Answer 2

Вместо того, чтобы иметь идентификатор столбца, вы должны добавить атрибут ID к тегу TR:

<table id="searchResultsTable">
<tr><th>First Name</th><th>Last Name</th></tr>
<tr id="100"><td>John</td><td>Doe</td></tr>
</table>

Когда пользователь нажимает на строку, вы можете легко подобрать идентификатор

Answer 3

Для дальнейшего использования.

Добавьте идентификатор к своему th:

<table id="searchResultsTable">
   <tr>
      <th id="columnId">Column ID</th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
   </tr>
   <tr>
      <td>100</td>
      <td>Test 1</td>
      <td>Test 2</td>
      <td>Test 3</td>
   </tr>
</table>

Затем вы можете скрыть столбец, используя 'hideCol':

tableToGrid($('#searchResultsTable'), {
    caption: "Search Results",
    sortable: true,
    width: 800,
    height: 400,
    multiselect: false,
    loadComplete: function() {
      $('#searchResultsTable').hideCol("columnId");
    },
    onSelectRow: function(id) {
    }
});

Answer 4

Если вы посмотрите на источник для grid.tbltogrid.js , вы увидите, что он позволяет передавать параметры colNames и colModel как часть параметра options.Например:

tableToGrid($('#searchResultsTable'), {
 colNames: ... , 
 colModel: ... ,
 caption: "Search Results",
 sortable: true,
 width: 800,
 height: 400,
 multiselect: false,
 onSelectRow: function(id) {
 }
});

Итак, если вы можете выяснить, какую информацию передать этим объектам, вы можете указать их напрямую, а затем просто добавить hidden: true в colModel для столбца ID.