SHift单击jqgrid multiselect缺少最后一行

我从这篇文章中采用了这个代码并制作了这个小提琴 。 尝试单击第一行,然后按住Shift键单击最后一行。 如果您注意到此代码执行得很好,除了最后一行,您单击的行不会被选中。 我一直在摸不着头脑。 任何人都可以帮我改变代码,以便多选也选择最后一行吗?

谢谢!

尝试替换这个: if ((shouldSelectRow = id == startID || shouldSelectRow)) { with this:

 if ((shouldSelectRow = id == startID || shouldSelectRow) && (id != rowid)){ 

我同意Michael Gendin你不应该选择id等于rowid 。 这是你的主要错误。 不过我会重写演示的大部分代码来使用行的DOM元素的rowIndex ,而不是枚举网格的所有行。 另外,在IE中选择文本在当前代码中是不舒服的,所以我建议删除它。 您在这里找到的修改过的演示我使用了以下的beforeSelectRow回调代码:

 beforeSelectRow: function (rowid, e) { var $this = $(this), rows = this.rows, // get id of the previous selected row startId = $this.jqGrid('getGridParam', 'selrow'), startRow, endRow, iStart, iEnd, i, rowidIndex; if (!e.ctrlKey && !e.shiftKey) { $this.jqGrid('resetSelection'); } else if (startId && e.shiftKey) { $this.jqGrid('resetSelection'); // get DOM elements of the previous selected and the currect selected rows startRow = rows.namedItem(startId); endRow = rows.namedItem(rowid); if (startRow && endRow) { // get min and max from the indexes of the previous selected // and the currect selected rows iStart = Math.min(startRow.rowIndex, endRow.rowIndex); rowidIndex = endRow.rowIndex; iEnd = Math.max(startRow.rowIndex, rowidIndex); for (i = iStart; i <= iEnd; i++) { // the row with rowid will be selected by jqGrid, so: if (i != rowidIndex) { $this.jqGrid('setSelection', rows[i].id, false); } } } // clear text selection if(document.selection && document.selection.empty) { document.selection.empty(); } else if(window.getSelection) { window.getSelection().removeAllRanges(); } } return true; } 

添加$('#grid').disableSelection(); 删除烦人的文本选择

正如Oleg的回答中所讨论的,这里是一个经过调整的beforeSelectRow,用于附加选择。

就我而言,我们的用户正在选择一堆行进行导出,因此额外的选择通常并不意味着他们想要开始新的选择。

  beforeSelectRow: function(rowid, e) { var $this = $(this), rows = this.rows, // get id of the previous selected row startId = $this.jqGrid('getGridParam', 'selrow'), startRow, endRow, iStart, iEnd, i, rowidIndex; if (!e.ctrlKey && !e.shiftKey) { //intentionally left here to show differences with //Oleg's solution. Just have normal behavior instead. //$this.jqGrid('resetSelection'); } else if (startId && e.shiftKey) { //Do not clear existing selections //$this.jqGrid('resetSelection'); // get DOM elements of the previous selected and // the currect selected rows startRow = rows.namedItem(startId); endRow = rows.namedItem(rowid); if (startRow && endRow) { // get min and max from the indexes of the previous selected // and the currect selected rows iStart = Math.min(startRow.rowIndex, endRow.rowIndex); rowidIndex = endRow.rowIndex; iEnd = Math.max(startRow.rowIndex, rowidIndex); // get the rowids of selected rows var selected = $this.jqGrid('getGridParam','selarrrow'); for (i = iStart; i <= iEnd; i++) { // if this row isn't selected, then toggle it. // jqgrid will select the clicked on row, so just ingore it. // note that we still go <= iEnd because we don't know which is start or end. if(selected.indexOf(rows[i].id) < 0 && i != rowidIndex) { // true is to trigger onSelectRow event, which you may not need $this.jqGrid('setSelection', rows[i].id, true); } } } // clear text selection (needed in IE) if(document.selection && document.selection.empty) { document.selection.empty(); } else if(window.getSelection) { window.getSelection().removeAllRanges(); } } return true; } 

Oleg的解决方案不适用于所有选择模式(上/下)。 感谢他的部分解决方案。

我用这段代码更正了这个:

您需要2个变量来存储当前起始行Id和结束行Id。 另一个存储选择的一面。

 var _currentStartSelectRow, _currentEndSelectRow, _isSideDown = null; 

beforeSelectRow回调的代码调用:

 beforeSelectRow: function (rowid, e) { var $this = $(this), rows = this.rows, // get id of the previous selected row previousId = $this.jqGrid('getGridParam', 'selrow'), previousRow, currentRow; if (!e.ctrlKey && !e.shiftKey) { _isSideDown = null; $this.jqGrid('resetSelection'); } else if (previousId && e.shiftKey) { $this.jqGrid('resetSelection'); // get DOM elements of the previous selected and the currect selected rows previousRow = rows.namedItem(previousId); currentRow = rows.namedItem(rowid); if (previousRow && currentRow) { //Increment if (previousRow.rowIndex < currentRow.rowIndex) { if (_isSideDown == false || _isSideDown == null) { _currentStartSelectRow = previousRow.rowIndex; _currentEndSelectRow = currentRow.rowIndex; } else { _currentEndSelectRow = currentRow.rowIndex; } _isSideDown = true; } //Decrement else { if (_isSideDown == null) { _currentStartSelectRow = currentRow.rowIndex; _currentEndSelectRow = previousRow.rowIndex; _isSideDown = false; } else if (_isSideDown == true) { if (currentRow.rowIndex < _currentStartSelectRow) { _currentStartSelectRow = currentRow.rowIndex; _isSideDown = false; } else { _currentEndSelectRow = currentRow.rowIndex; } } else { _currentStartSelectRow = currentRow.rowIndex; } } for (i = _currentStartSelectRow; i <= _currentEndSelectRow; i++) { // the row with rowid will be selected by jqGrid, so we don't need to select him: if (i != currentRow.rowIndex) { $this.jqGrid('setSelection', rows[i].id, false); } } } } return true; },