Javascript 结合示例4和示例9（向dataview添加行重新排序）

我试图找出如何结合Slickgrid的示例4和示例9。基本上是向dataview网格添加行重新排序。到目前为止，只要网格中只有一个页面，就可以进行行重新排序。对于多个页面，行重新排序仅在第一个页面和任何其他页面上有效，行可以上下拖动，但不会重新排序

例4：

例9：

有什么想法吗？非常感谢

以下是我在dataview网格上的行重新排序代码：

//Re-order rows on drag
var moveRowsPlugin = new Slick.RowMoveManager({});
moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, inboxData) {
for (var i = 0; i < inboxData.rows.length; i++) {
// no point in moving before or after itself
if (inboxData.rows[i] == inboxData.insertBefore || inboxData.rows[i] == inboxData.insertBefore - 1) {
    e.stopPropagation();
    return false;
  }

}
return true;
});

moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
var extractedRows = [], left, right;
var rows = args.rows;
var insertBefore = args.insertBefore;
left = inboxData.slice(0, insertBefore);
right = inboxData.slice(insertBefore, inboxData.length);

rows.sort(function(a,b) { return a-b; });

for (var i = 0; i < rows.length; i++) {
  extractedRows.push(inboxData[rows[i]]);
}

rows.reverse();

for (var i = 0; i < rows.length; i++) {
  var row = rows[i];
  if (row < insertBefore) {
    left.splice(row, 1);
  } else {
    right.splice(row - insertBefore, 1);
  }
}

inboxData = left.concat(extractedRows.concat(right));

var selectedRows = [];
for (var i = 0; i < rows.length; i++)
  selectedRows.push(left.length + i);

inboxGrid.resetActiveCell();
inboxDataView.setItems(inboxData);
inboxGrid.setSelectedRows(selectedRows);
inboxGrid.render();


 });

inboxGrid.registerPlugin(moveRowsPlugin);
//End re-order rows

//拖动时重新排序行
var moveRowsPlugin=new Slick.RowMoveManager（{}）；
moveRowsPlugin.onBeforeMoveRows.subscribe（函数（e，inboxData）{
对于（变量i=0；i

我不确定，但也许这些方法可以帮助您：

inboxGrid.invalidateAllRows(); //tells the grid that all the rows has been changed and it needs to rerender them.
inboxGrid.invalidateRows(rows); // tells the grid that the specified rows has been changed and it needs to rerender them.

更新数据视图时，还需要使用beginUpdate和endUpdate：

inboxDataView.beginUpdate();
inboxDataView.setItems(inboxData);
inboxDataView.endUpdate();

希望这些帮助。

FYI您不需要在数据视图上调用

beginUpdate（）

或

endUpdate（）

。例如，如果您在循环中调用

addItem（）

或

updateItem（）

，则

beginUpdate（）

方法只会停止DataView更新UI。这样，您就可以对数据进行一系列更新，而无需在每次修改后重新绘制UI。调用

endUpdate（）

将使行无效，并在UI中重新呈现网格。