jqgrid 只允许每行选择一个单元格。执行排序后不工作

Question

我的目标是能够在单击时突出显示一个单元格，并在再次单击时取消突出显示。每行只能突出显示一个单元格。我试图让它工作，但每当对网格进行排序时，我的目标功能似乎不再起作用。任何帮助或建议将不胜感激。这是演示 JSFiddle 我相信问题出在这里...

loadComplete: function () {
    var gridParams = jQuery(this).jqGrid("getGridParam");
    var selectedCells = gridParams.mySelection;
    var rowId, columnName, cellValue;
    if (selectedCells.length > 0) {
        for (var i = 0; i < selectedCells.length; i++) {
            rowId = selectedCells[i].rowId;
            columnName = selectedCells[i].columnName;
            cellValue = selectedCells[i].cellValue;
            jQuery(this).setCell(rowId, columnName, cellValue, 'ui-state-highlight', '', true);
            jQuery(this).jqGrid('getLocalRow', rowId).columnName = cellValue;
        }
    }
},

Answer 1

您的问题（以及您的 issue）并不简单。因此，我延迟回答。

首先，您必须在数据中包含一些唯一的id值，以确保 rowid 保持不变排序数据后。作为值，您可以使用任何唯一值，例如 1、2、...、5 或 10、20、...50 或任何其他值。我将您的演示中的输入数据更改为以下内容：

var data = [
        { id: 10, win: 50, draw: 20, defeat: 30 },
        { id: 20, win: 40, draw: 10, defeat: 50 },
        { id: 30, win: 30, draw: 50, defeat: 20 },
        { id: 40, win: 20, draw: 60, defeat: 20 },
        { id: 50, win: 70, draw: 20, defeat: 10 }
    ];

下一个问题：保存在mySelection参数中的信息。您当前的实现使用以下属性保存 object 数组：rowId、cellId、columnName、cellValue 和 selectedCell，其中 selectedCell 是 DOM 元素，表示 selected <td> 元素。我发现保存 selectedCell 不好，因为网格的内容将在排序后 rebuild 并且 selectedCell 将指向 DOM 元素 从 HTML 页面中删除了。此外，您通过 rowid 搜索 mySelection 中的元素（参见 returnExistingRowSelectedCells 函数的代码）。如果将mySelection中保存的信息修改为map:column name by rowid，代码可以减少到一行。例如，如果您 select 网格中的 3 个单元格如下图

那么当前的实现将像

一样保持mySelection

[{
    "rowId": "20",
    "selectedCell": {...},
    "cellId": "20_draw",
    "columnName": "draw",
    "cellValue": 10
}, {
    "rowId": "40",
    "selectedCell": {...},
    "cellId": "40_win",
    "columnName": "win",
    "cellValue": 20
}, {
    "rowId": "30",
    "selectedCell": {...},
    "cellId": "30_defeat",
    "columnName": "defeat",
    "cellValue": 20
}]

（在您的原始演示中 rowId 是 "jqg4"、"jqg2" 和 "jqg3" 等值。我建议将数组替换为 object like

{
    "20": "draw",
    "40": "win",
    "30": "defeat"
}

我使用列名而不是列索引来确保如果列的顺序将通过拖放列更改，则不需要更新数据headers（需要添加到演示 jquery-ui.min.js 使选项 sortable: true 可行。

最后一点是关于按列名对单元格进行寻址。免费的 jqGrid 保留内部参数 iColByName，它允许通过列名 (gridParams.iColByName[colName]) 获取列索引。此外，方法 getGridRowById 可用于通过 rowid 获取 <tr>，然后一辆面包车使用 $.jgrid.getCell 通过列获取单元格 (<td>) 的 jQuery 包装器索引：

var tr = $(this).jqGrid("getGridRowById", rowid);
var $td = $jgrid.getCell.call(this, tr, iCol); // mostly $(tr.cells[iCol]);

在这种情况下，您只需要保存 rowid 和列名，然后获取 $td 信息。然后，您可以对 selection/deselection 单元格使用 $td.addClass("ui-state-highlight") 或 $td.removeClass("ui-state-highlight")。

修改后的代码可以像下面这样

mySelection: {},
loadComplete: function() {
  var $this = jQuery(this), gridParams = $this.jqGrid("getGridParam"),
      selectedCells = gridParams.mySelection,  rowId, tr, iCol, $td;

  for (rowId in selectedCells) {
      if (selectedCells.hasOwnProperty(rowId)) {
          tr = $this.jqGrid("getGridRowById", rowId);
          iCol = gridParams.iColByName[selectedCells[rowId]];
          $td = jQuery.jgrid.getCell.call(this, tr, iCol);
          $td.addClass("ui-state-highlight");
      }
  }
},
onCellSelect: function(rowId, iCol, cellContent, element) {
  var $this = jQuery(this),
      gridParams = $this.jqGrid("getGridParam"),
      selectedCells = gridParams.mySelection;
  if (selectedCells[rowId]) {
      // some sell is already selected in the row
      var tr = $this.jqGrid("getGridRowById", rowId),
          iColSelected = gridParams.iColByName[selectedCells[rowId]],
          $tdSelected = jQuery.jgrid.getCell.call(this, tr, iColSelected);
      $tdSelected.removeClass("ui-state-highlight");
      if (gridParams.iColByName[selectedCells[rowId]] === iCol) {
          // the current cell will be unselected
          delete selectedCells[rowId];
          return;
      }
  }
  // select the cell
  jQuery(element.target).closest("td").addClass("ui-state-highlight");
  // update column name in mySelection
  selectedCells[rowId] = gridParams.colModel[iCol].name;
},
beforeSelectRow: function(rowId, element) {
  return false;
},

查看修改后的演示 https://jsfiddle.net/OlegKi/hwondp71/37/。

jqgrid 只允许每行选择一个单元格。执行排序后不工作

jqgrid Allow only one cell per row to be selected. Not working after a sort is performed

javascript

jquery

jqgrid

free-jqgrid