AUI可排序DataTable单元格无法正常选中问题求助

我太懂这种两难的处境了！你遇到的是AUI DataTable默认行为里的典型冲突——排序功能会监听列的点击/拖拽事件，直接阻止了原生的文本选中操作。下面给你几个实操性强的解决办法，亲测有效：

方法1：限制排序触发仅在表头单元格 #

默认情况下，AUI的排序插件可能把事件绑定到了整个列（包括数据单元格），导致你点击单元格的时候优先触发排序逻辑，而不是文本选中。我们可以手动指定排序的触发元素为表头单元格，这样数据单元格就不会被排序事件干扰了：

var table = new A.DataTable({
    columns: columns, // 你定义的列配置
    data: yourDataset, // 你的表格数据
    plugins: [
        // 自定义排序插件配置，指定仅表头触发排序
        {
            cfg: {
                sortable: true,
                trigger: 'th.aui-datatable-header-cell'
            },
            fn: A.Plugin.DataTableSort
        },
        // 保留你原有的其他插件
        { cfg: { type: "rows" }, fn: A.Plugin.DataTableHighlight },
        { cfg: { selectRow: true, selectColumn: true }, fn: A.Plugin.DataTableSelection }
    ]
}).render('#your-table-container');

方法2：强制开启单元格的文本选中样式 #

有时候AUI的默认CSS会禁用文本选择，我们可以用CSS强制开启，确保样式层面支持：

.aui-datatable-cell {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

方法3：修复单元格的事件阻止逻辑 #

如果上面两种方法还不行，大概率是DataTable的事件监听器阻止了原生的鼠标事件。我们可以给数据单元格添加一个事件监听，重置默认行为的阻止：

// 表格渲染完成后添加委托事件
table.delegate('mousedown', function(e) {
    // 取消对默认文本选中行为的阻止
    e.preventDefault = function() {};
}, '.aui-datatable-cell');

这三个方法搭配起来，基本就能同时实现可排序和原生文本选中的需求了。原理就是把排序的触发范围限制在表头，同时确保数据单元格的原生鼠标事件和样式不受干扰。

内容的提问来源于stack exchange，提问作者geco17