在Alloy UI數據表中嵌入進度條

Question

我正在嘗試在AUI數據表的列中嵌入進度條。 我試圖使用像這樣的格式化程序功能，但是它在狀態列上顯示為空白。 我還需要調用initialize函數以使進度條正常工作。 您對此有什么想法嗎？

YUI().use(
    'datatable','datatable-scroll','datatable-sort',
    function(Y) {
        var cols = [
            {
                label:'Name',
                key:'name',
                sortable: true
            },
            {
                label:'Status',
                key:'status',
                formatter: function(statusCell) {
                    statusCell.innerHTML = '<div id="progress" style="height:15px; width:0px; background-color:#8CC657;"/></div>';
                }
            }
        ];

        new Y.DataTable(
            {
                columnset: cols,
                recordset: fileInfo,
                scrollable: "y",
                height: "200px",
                width:  "400px"
            }
        ).render('#myDatatable');
    }
);

var prg_width = 200;
var progress_run_id = null;

function progress() {
    var node = document.getElementById('progress');
    var w = node.style.width.match(/\d+/);

    if (w == prg_width) {
        clearInterval(progress_run_id);
        w = 0;
    } else {
        w = parseInt(w) + 5 + 'px';
    }

    node.style.width = w;
}

function initialize() {
    progress_run_id = setInterval(progress, 30);
}

Answer 1

經過幾次嘗試設法解決了問題:)

{
    label:'Status',
    key:'status',
    allowHTML: true,
    formatter: function (o) {
        o.innerHTML = 'required HTML for displaying progress bar';
        initialize();
        return o.innerHTML;
    }
}