この投稿のコードを採用して、このフィドルを作成しました。最初の行をクリックしてから、Shiftキーを押しながら最後の行をクリックしてみてください。このコードが非常にうまく機能していることに気付いた場合は、最後の行、クリックした行が選択されないことを除いて。私はこれに頭を悩ませてきました。マルチセレクトが最後の行も選択するようにコードを変更するのを手伝ってくれる人はいますか?
ありがとう!
これを置き換えてみてください:if ((shouldSelectRow = id == startID || shouldSelectRow)) {
これで:
if ((shouldSelectRow = id == startID || shouldSelectRow) && (id != rowid)){
idが。に等しい行を選択してはならないというMichaelGendinに同意します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のソリューションは、すべての選択モード(上/下)で機能しているわけではありません。部分的な解決策をくれた彼に感謝します。
私はこれをこのコードで修正します:
現在の開始行IDと終了行IDを保存するには、2つの変数が必要です。そしてもう1つは選択範囲の側面を保存します。
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;
},