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）不容易。因此，我要延迟回答。

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

id

下一个问题：您保存在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是DOM代表所选selectedCell元素的元素。我发现保存<td>不好，因为排序后网格的内容将重建，并且selectedCell将指向HTML页面中的DOM元素已删除 。此外，您还可以通过rowid在selectedCell中搜索元素（请参见mySelection函数的代码）。如果将returnExistingRowSelectedCells中保存的信息修改为map：列名，按行号，则代码可以减少为一行。例如，如果您在网格中选择3个像下面的图片一样的单元格

然后当前的实现将像这样保存mySelection

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"

我使用列名代替列索引，以确保如果通过拖放列标题来更改列的顺序，则不需要更新数据（一个需要添加到演示{{1} }来使选项{ "20": "draw", "40": "win", "30": "defeat" } （您可以使用）生效。

最后一句话是关于按列名对单元格进行寻址。免费的jqGrid拥有内部参数jquery-ui.min.js，该参数允许按列名（sortable: true）获取列索引。另外，方法iColByName可用于通过rowid获取gridParams.iColByName[colName]，然后一个货车使用getGridRowById通过列索引将jQuery包装器获取到单元格（<tr>）：

$.jgrid.getCell

以这种方式，您只需要保存rowid和列名以及具有信息的get <td>。然后，您可以使用var tr = $(this).jqGrid("getGridRowById", rowid); var $td = $jgrid.getCell.call(this, tr, iCol); // mostly $(tr.cells[iCol]); 或$td来选择/取消选择该单元格。

修改后的代码可能如下所示

$td.addClass("ui-state-highlight")

请参阅修改后的演示https://jsfiddle.net/OlegKi/hwondp71/37/。