Форматирование отдельных ячеек в сетке w2ui с динамическими данными (без фиксированных строк)

Question

У меня есть сетка w2ui, которая показывает данные с удаленного сервера (данные json).Я управляю событием onload, чтобы динамически перебирать записи и применять цвета к некоторым ячейкам.

Идея такова: искать внутри значений каждой записи и применять какой-то стиль, если какая-то ячейка имеетопределенный текст.

Для этого я управляю событием onLoad, после завершения которого я вызываю функцию javascript, которая выполняет итерацию по строкам и применяет стиль ячейки.Нет проблем с этим процессом, и все работает нормально.

Проблема в том, что я щелкаю заголовок некоторого столбца и сортирую данные.Стиль потерян.Я пытался управлять событиями onRefresh, onSort и вызывать функцию 'format'.Функция вызывается, но в итоге ячейки теряют стиль, который я применяю в функции.

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

Решено!

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

Answer 2

Я пытался изменить записи json для события onLoad.done:

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 содержат стиль: