我的目标是能够在单击时突出显示一个单元格,并在再次单击时删除突出显示。每行只能突出显示一个单元格。我试图使其工作,但是无论何时对网格进行排序,我的目标功能似乎都不再起作用。任何帮助或建议,将不胜感激。 这是演示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;
}
}
},
答案 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 }
];
参数中的信息。您当前的实现保存具有以下属性的对象数组: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/。