qooxdoo - 是否有可以更改表列顺序的函数？

Question

我有固定列顺序的数据。但是，有时我想在不修改数据的情况下更改表中显示的列的顺序。谢谢你的帮助。

Answer 1

实际上有两种方法可以做到这一点。两者都是“表列模型”的方法。第一种方法是 setColumnsOrder，它接受一个数组，您可以在其中为每一列提供所需的列位置。第二个是 moveColumn，它将指定的列从一个可见位置移动到另一个可见位置。在下面的示例中，可以插入 playground , 该表最初是用四列构建的。最后的计时器会在一秒后使用 setColumnsOrder 对列重新排序，然后再过两秒后使用 moveColumn。

请注意，setColumnsOrder 是幂等的并且与当前顺序无关。使用指定的数组调用它将始终按照指定的顺序对列进行排序。另一方面，moveColumn 移动恰好位于指定的第一个参数位置的任何列，因此当可见列的顺序不同时调用相同的参数将产生不同的结果。

这是您可以插入 playground 的示例看到它在行动。相关的订单更改行在末尾的 setTimeout 调用中:

function createRandomRows(rowCount) {
  var rowData = [];
  var now = new Date().getTime();
  var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
  var nextId = 0;
  for (var row = 0; row < rowCount; row++) {
    var date = new Date(now + Math.random() * dateRange - dateRange / 2);
    rowData.push([ nextId++, Math.random() * 10000, date, (Math.random() > 0.5) ]);
  }
  return rowData;
}


// window
var win = new qx.ui.window.Window("Table").set({
  layout : new qx.ui.layout.Grow(),
  allowClose: false,
  allowMinimize: false,
  contentPadding: 0
});
this.getRoot().add(win);
win.moveTo(30, 40);
win.open();

// table model
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "A number", "A date", "Boolean" ]);
tableModel.setData(createRandomRows(1000));

// make second column editable
tableModel.setColumnEditable(1, true);

// table
var table = new qx.ui.table.Table(tableModel).set({
  decorator: null
});
win.add(table);

var tcm = table.getTableColumnModel();

// Display a checkbox in column 3
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());

// use a different header renderer
tcm.setHeaderCellRenderer(2, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date"));

setTimeout(
  () =>
  {
    let tcm = table.getTableColumnModel();
    tcm.setColumnsOrder([0, 2, 1, 3]);
  },
  1000);
  
setTimeout(
  () =>
  {
    let tcm = table.getTableColumnModel();
    tcm.moveColumn(2, 1);
  },
  3000);