如何前端grid通过shif或ctrl键控制多行选中和批量修改

pengjinhuisir

在BEX5 3.5版本中，针对表格grid如何实现通过shif或ctrl键控制多行选中和批量修改，即假如有10行数据，前面设置checkbox复选框，首先点击第一行，前面复选框选中，且第一行背景色突出显示(黑色或深色)，当按住shift键，并点击第10行时，则1-10行数据的复选框均选中，且背景色一致突出显示（黑色或深色），当按住ctrl键，通过鼠标单击选中1，2，3，5,7,8行时，则1，2，3，5,7,8被选中；
当选择好对应行后，针对某一行的数据进行修改，其他被选中的行同步修改处理。
请专家帮忙提此功能支持，静候佳音！

jishuang

自己在页面上监听键盘事件，然后在事件中判断grid行的选中状态，自己设置是否选中

pengjinhuisir1

jishuang 发表于 2017-3-13 09:17
自己在页面上监听键盘事件，然后在事件中判断grid行的选中状态，自己设置是否选中
...

如果我想做成平台支持（我们希望您提供思路，我们来具体实现），而不是每个页面去写，这样过于麻烦！特别是修改某行的值，其他选中的列批量修改；还有一个问题就是选中后，统一背景色，目前只支持当前行选中。这个属于项目上的需求，希望贵公司能够提供一定技术支持。

jishuang

可以参考jquery grid的实现，需要自己修改平台的组件
http://www.myexception.cn/web/1693002.html

修改的时候其他的也修改，可以在valueChanged中自己获取选中的行去处理

设置颜色可以通过多选给行上加样式，自己控制样式

pengjinhuisir1

jishuang 发表于 2017-3-13 11:20
可以参考jquery grid的实现，需要自己修改平台的组件
http://www.myexception.cn/web/1693002.html

平台组建封装过于复杂，能否提供具体的代码实现啊？

jishuang

需要自己实现，没有具体的显示代码
可以参考多选的实现

pengjinhuisir1

jishuang 发表于 2017-3-13 15:18
需要自己实现，没有具体的显示代码
可以参考多选的实现

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.id, false);
                }
            }
        }

        // clear text selection
        if(document.selection && document.selection.empty) {
            document.selection.empty();
        } else if(window.getSelection) {
            window.getSelection().removeAllRanges();
        }
    }
    return true;
}

您好，这是网上关于jqgrid多选实现方案，但是经过研究jggrid.src.js，不知道将此段代码嵌套在在jggrid.src.js的哪行代码处。请指点...

jishuang

1.首先要在平台的grid.js中处理去接管快捷的设置
2.beforeSelectRow可以在grid.js中处理
  或者到jggrid.src.js中到beforeSelectRow事件相关的处理代码