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

当用户点击某个单元格时，我想要读取该行的“列ID”单元格，但我不希望该单元格可见。如何隐藏“列ID”单元格，使其不会显示给用户，但可以通过onSelectRow事件访问？

假设您有一个员工数据库表。 jqGrid表如下所示：

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

我不想显示ID列，但我希望能够在用户单击行时访问它。即如果有人点击“Bill”，我希望能够访问onSelectRow中的Employee.id（103）。

感谢。

Answer 1

如果您查看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添加到ID列的colModel。

Answer 2

您应该将ID属性添加到TR-tag：

，而不是列ID

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

当用户点击某行时，您可以轻松获取ID

Answer 3

供将来参考。

在您的th：

中添加一个ID

<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

更改任意列数的列宽

在这种情况下，在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]);})
            }
    }

tableToGrid - 隐藏现有列

4 个答案: