Question

我有一个w2ui网格，它显示来自远程服务器的数据（json数据）。我正在管理'onload'事件，以动态方式遍历记录并将颜色应用于某些单元格。

这个想法是：搜索每个记录的值，如果某些单元格中有确定的文本，则应用某种样式。

为此，我管理onLoad事件，完成后，我将调用一个遍历行并应用单元格样式的javascript函数。这个过程没有问题，一切正常。

问题是当我单击某些列标题并对数据进行排序时。样式丢失。好吧，我尝试管理onRefresh，onSort事件并调用“格式”函数。该函数被调用，但是最后单元格失去了我在该函数中应用的样式。

w2ui['grid'].on('load', function (event) {
console.log("grid instanciado");

        //Se lanza cuando ya tiene records
        event.done(function () {
            console.log("datos cargados en el grid");
            format();//works great here
        });
    });//end load

    w2ui.grid.on('sort', function (event) {
        console.log("ordenado");
        event.done(function () {
            console.log("ordenado DONE");
            //format();//I've tried in different events, nothing works
        });
    });//end sort

    w2ui.grid.on('refresh', function (event) {
        console.log("refrescado");
        format();//I've tried in different events, nothing works
    });//end refresh

    w2ui.grid.on('render', function (event) {
        console.log("renderizado");

        event.onComplete = function () {
            console.log("renderizado COMPLETADO");
        }
        //format();  //I've tried in different events, nothing works
    });//end render


//apply style to a cell
function format() {

    console.log("aplicando formato");

    var i = 0;
    for (i = 0; i < w2ui['grid'].total; i++) {
        //get cell                       
        var nombreCelda = "#grid_grid_data_";
        nombreCelda = nombreCelda.concat(String(i));
        nombreCelda = nombreCelda.concat("_4");//pos columna

        if ($(nombreCelda) != undefined) {
            if ($(nombreCelda).text() === 'Closed') {  //regla 1
                console.log("... aplicando color Closed a " + nombreCelda);
                $(nombreCelda).css('background-color', '#eb766d');
            }
            else if ($(nombreCelda).text() === 'Open') { //regla 2
                console.log("... aplicando color Open a " + nombreCelda);
                $(nombreCelda).css('background-color', '#c5f4e2');
            }
        }
    }
}

加载时，代码可以正常工作。排序时会调用该函数，而不会应用样式。

排序时的调用堆栈为： on.sort-> on.sort.done-> on.refresh

Answer 1

我试图在onLoad.done事件上修改json记录：

w2ui['grid'].on('load', function (event) {
        console.log("grid instanciado");

        //Se lanza cuando ya tiene records
        event.done(function () {
            console.log("datos cargados en el grid");
            //format();
            format2(w2ui['grid'].records);
        });
    });


function format2(records) {

    if (typeof records === 'undefined') {
        return;
    }

    console.log("aplicando formato 2");
    console.log("total records: " + records.length);

    var i = 0;
    for (i = 0; i < records.length; i++)  {

        var record = records[i];

        var estado = record['estado'];

        if (typeof estado === 'undefined') {
            return
        }


        //style: {3: 'background-color: red; color: white;'}
        if (estado == 'Closed') {
            var estilo = { "4": 'background-color: red; color: white;' };
            record["style"] = estilo;
        }
        //style: {3: 'background-color: green; color: black;'}
        else if (estado == 'Open') {
            var estilo = { "4": 'background-color: green; color: black;' };
            record["style"] = estilo;
        }

        console.log("aplicado estilo al registro " + String(i));
    }
}

单元格颜色未更改。 JavaScript控制台说json元素包含以下样式：

Answer 2

解决了！

w2ui.grid.on('refresh', function (event) {
        console.log("refrescado");
        format2(w2ui['grid'].records);
    });


function format2(records) {

    if (typeof records === 'undefined') {
        return;
    }

    console.log("aplicando formato 2");
    console.log("total records: " + records.length);

    var i = 0;
    for (i = 0; i < records.length; i++)  {

        var record = records[i];

        var estado = record['estado'];

        if (typeof estado === 'undefined') {
            return
        }

        if (estado == 'Closed') {

            //apply to column 'estado' the style
            var estilo2 = { estado: 'background-color: red; color: white;' };
            record["w2ui"] = {
                style: estilo2
            };

            //Not necesary
            //w2ui['grid'].refreshCell(record["recid"], "estado");
        }
        //style: {3: 'background-color: green; color: black;'}
        else if (estado == 'Open') {

            var estilo2 = { estado: 'background-color: green; color: black;' };
            record["w2ui"] = {
                style: estilo2
            };

            //Not necesary
            //w2ui['grid'].refreshCell(record["recid"], "estado");
        }

        console.log("aplicado estilo al registro " + String(i));
    }
}

使用动态数据在w2ui网格上格式化单个单元格（无固定行）

2 个答案: