如何在AlloyUI DataTable中展示HTML DOM元素？元素不显示求助

看起来你遇到的核心问题是：AlloyUI DataTable的allowHTML属性只支持解析字符串形式的HTML内容，而不能直接渲染你通过document.createElement创建的DOM元素对象。你现在把DOM节点直接存在recordset的字段里，DataTable无法识别这种对象类型，所以才会显示异常。

下面给你两种可行的解决方案，推荐第一种（更符合DataTable的设计逻辑，性能也更好）：

方案一：使用HTML字符串 + 事件委托 #

这种方式不需要在tableData里存储DOM对象，只需要保留需要展示的文本数据，然后通过列的formatter生成HTML字符串，再用事件委托绑定点击事件（避免给每个元素单独绑定事件的性能问题）。

修改后的完整代码：

var tableData = [];
this._popupContent.innerHTML = "";
// 简化数据生成，只保留需要的字段
for(var key in this._info){
    tableData.push({ name: key });
}

YUI().use(
    'aui-datatable',
    function(Y) {
        var columns = [
            { key: 'name', allowHTML: true },
            { 
                key: 'dom', 
                // 用formatter生成带标识的HTML字符串
                formatter: function(o) {
                    return `<a class="table-link" data-key="${o.data.name}">${o.data.name}</a>`;
                },
                allowHTML: true
            }
        ];

        var dataTable = new Y.DataTable({
            columnset: columns,
            recordset: tableData
        }).render('#popupContent');

        // 通过事件委托绑定所有链接的点击事件
        dataTable.on('click', '.table-link', function(e) {
            var targetKey = e.currentTarget.getAttribute('data-key');
            console.log(targetKey);
            // 这里写你的点击逻辑
        });
    }
);

方案二：手动插入DOM元素（适合特殊场景） #

如果你一定要保留预先创建好的DOM元素，可以在DataTable渲染完成后，手动把DOM元素插入到对应的单元格中：

修改后的代码：

var tableData = [];
this._popupContent.innerHTML = "";
for(var key in this._info){
    (function(k) {
        var item = {};
        item.name = k;
        item.dom = document.createElement('a');
        item.dom.innerHTML = k;
        item.dom.addEventListener("click", function(){
            console.log(k);
            // 你的点击逻辑
        });
        tableData.push(item);
    })(key)
}

YUI().use(
    'aui-datatable',
    function(Y) {
        var columns = [
            { key: 'name', allowHTML: true },
            { key: 'dom', allowHTML: false } // 关闭HTML解析，避免干扰
        ];

        var dataTable = new Y.DataTable({
            columnset: columns,
            recordset: tableData
        }).render('#popupContent');

        // 渲染完成后，遍历单元格插入DOM元素
        dataTable.get('boundingBox').all('.yui3-datatable-col-dom').each(function(cell, index) {
            var domElement = tableData[index].dom;
            cell.empty(); // 清空默认生成的内容
            cell.appendChild(domElement);
        });
    }
);

为什么原代码不行？ #

AlloyUI DataTable在渲染列数据时，会把字段值当作字符串处理（即使你传入DOM对象，它也会调用toString()方法，得到[object HTMLAnchorElement]这样的无效内容）。allowHTML的作用只是告诉DataTable：如果这个字段的内容是HTML字符串，就解析成DOM元素，而不是直接接受DOM对象。

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