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;
    }
}

在合金UI数据表中嵌入进度条

1 个答案: