aui 数据表可排序选择行答案

【问题标题】：aui datatable sortable select rowsaui 数据表可排序选择行
【发布时间】：2018-05-28 09:57:09
【问题描述】：

我正在使用 aui 库来制作可排序的数据表。我希望单元格是可选择的（通常是纯文本，没有 javascript 事件绑定）。

将columns定义为

var columns = [
    {
        key: "col1",
        label: "Column 1",
        sortable: true
    },
    {
        key: "col2",
        label: "Column 2",
        sortable: true
    },
    ...
];

如果我使用类似的东西

var myDatatable = new A.DataTable.Base({
    columnset : columns,
    recordset : data
});

我可以选择单个行，但没有排序。

如果我使用

var myDatatable = new A.DataTable({
    columnset : columns,
    recordset : data
});

表格是可排序的，但我无法通过普通的鼠标按下+拖动来选择数据。

我在这里缺少什么？

我已尝试添加以下插件

plugins: [{
    cfg: {
        type: "rows"
    },
    fn: A.Plugin.DataTableHighlight
},
{
    cfg: {
        selectRow: true,
        selectColumn: true
    },
    fn: A.Plugin.DataTableSelection
}]

但简单的选择就没有运气了。作为参考，aui 文档是here。请注意，基本示例执行我需要的减排序，而实际示例需要在单元格上双击（允许编辑）才能选择/复制内容。

请帮忙。谢谢！

【问题讨论】：

标签： javascript liferay-aui alloy-ui

【解决方案1】：

我在渲染表格后通过清除 mousedown 和 mouseup 事件并覆盖 getEditor 函数来解决它，并且排序仍然有效。

/* text is not selectable otherwise */
myDatatable.get("contentBox").purge(true, "mousedown");
myDatatable.get("contentBox").purge(true, "mouseup");
/* suppress getEditor */
A.DataTable.prototype.getEditor = function() {};

【讨论】：