单击“单击”jqgrid“多选缺少最后一行

SHift-click jqgrid multiselect missing last row

本文关键字:单击 一行 最后 jqgrid      更新时间:2023-09-26

我采用了这篇文章中的代码并制作了这个小提琴。 尝试单击第一行,然后按住 Shift 键单击最后一行。 如果您注意到此代码做得很好,除了最后一行,您单击的行不会被选中。 我一直在挠头。 谁能帮我更改代码,以便多选也选择最后一行?

谢谢!

尝试将以下内容替换为以下内容: if ((shouldSelectRow = id == startID || shouldSelectRow)) {

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

我同意迈克尔·根丁的观点,即您不应该选择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;
            },