javascript - 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中的信息范围。您当前的实现保存具有以下属性的对象数组:rowId , cellId , columnName , cellValue和 selectedCell , 其中selectedCell是代表所选 <td> 的 DOM 元素元素。我觉得保存不好selectedCell因为网格的内容将在排序后重建并且selectedCell将指向从 HTML 页面移除的 DOM 元素。此外，你在 mySelection 中的灼热元素通过 rowid(参见 returnExistingRowSelectedCells 函数的代码)。如果您要修改保存在 mySelection 中的信息，代码可以减少到一行到 map :rowid 的列名。例如，如果您在网格中选择 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" 的值)。我建议将数组替换为对象

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

我使用列名而不是列索引来确保如果通过拖放列标题更改列的顺序则不需要更新数据(需要添加到演示 jquery-ui.min.js 的导致使选项 sortable: true 可用，您可以使用它)。

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

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

在这种情况下，您只需要保留 rowid 和列名，然后获取 $td有信息。然后您可以使用 $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/ .