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

时间:2018-12-12 14:37:57

标签: javascript jquery jqgrid free-jqgrid

我的目标是能够在单击时突出显示一个单元格,并在再次单击时删除突出显示。每行只能突出显示一个单元格。我试图使其工作,但是无论何时对网格进行排序,我的目标功能似乎都不再起作用。任何帮助或建议,将不胜感激。 这是演示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;
        }
    }
},

1 个答案:

答案 0 :(得分: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 } ]; 参数中的信息。您当前的实现保存具有以下属性的对象数组:mySelectionrowIdcellIdcolumnNamecellValue,其中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/