Question

我可以在单元格A上使用自定义格式化程序来修改单元格B吗？

Answer 1

您的原始演示http://jsfiddle.net/fo3wb58w/12/会显示您想要的内容。通常，您使用已由多列共享的一个格式化程序函数。如果您点击列PLA，MCO，SUP或REX的列标题，您将看不到任何结果。问题是：您使用datatype: "local"，其中包含data和_index参数中网格的内部数据。在排序和过滤/搜索本地数据期间将使用data。格式化只是显示相应数据的表单。因此，我建议您先填写每列的列数据，然后再格式化数据。它将在data参数中保存正确的数据，并允许对数据进行排序和过滤。

最简单的演示修改包括localReader

localReader: {
    repeatitems: true,
    cell: function (item) {
        var rowData = $.parseJSON(item.data);
        rowData.data = item.data; // include the original data too
        return rowData;
    }
}

并将自定义格式化程序修改为以下内容，例如

function format (cellvalue) {
    if (cellvalue !== undefined) {
        return '<div class="led-box"><div class="' +
            (cellvalue !== null ? 'led-green' : 'led-red') +
            '"></div></div>';
    } else {
        return '';
    }
}

见http://jsfiddle.net/OlegKi/fo3wb58w/14/。现在我们将填充数据，这允许我们在那里进行排序。我在演示中使用了最新版本的免费jqGrid，因为你在原始演示中使用的jqGrid 4.6有localReader处理repeatitems: true的错误。

更深层次的修改将是http://jsfiddle.net/OlegKi/fo3wb58w/15/

var mydata = [
        { data: "{\"pla\":1,\"mco\":null,\"sup\":null}" },
        { data: "{\"pla\":null,\"mco\":1,\"sup\":1}" },
        { data: "{\"pla\":1,\"rex\":null}" }
    ],
    sortRedGreen = function (value) {
        switch (value) {
            case 1:
                return 2;
            case null:
                return 1;
            default:
                return 0;
        }
    },
    formatRedGreen = function (cellvalue) {
        if (cellvalue !== undefined) {
            return '<div class="led-box"><div class="' +
                (cellvalue !== null ? 'led-green' : 'led-red') +
                '"></div></div>';
        } else {
            return '';
        }
    },
    templateRedOrGreen = {
        width: 48,
        sorttype: sortRedGreen,
        stype: "select",
        searchoptions: { value: "undefined:Undef;null:Null;1:1", noFilterText: "Any"},
        formatter: formatRedGreen
    };

$("#grid").jqGrid({
    data: mydata,
    autoencode: true,
    colModel: [
        { name: 'data', width: 250, search: false },
        { label: 'PLA', name: 'pla', template: templateRedOrGreen },
        { label: 'MCO', name: 'mco', template: templateRedOrGreen },
        { label: 'SUP', name: 'sup', template: templateRedOrGreen },
        { label: 'REX', name: 'rex', template: templateRedOrGreen }
    ],
    localReader: {
        repeatitems: true,
        cell: function (item) {
            var rowData = $.parseJSON(item.data);
            rowData.data = item.data; // include the original data too
            return rowData;
        }
    },
    iconSet: "fontAwesome",
    caption: "Stack Overflow Example"
}).jqGrid("filterToolbar");

它使用自定义sorttype功能，允许在排序期间重新排序可能的值undefined，null和1。它使用filterToolbar和

stype: "select",
searchoptions: { value: "undefined:Undef;null:Null;1:1", noFilterText: "Any"}

简化数据过滤。

根据值的值格式化多个列

1 个答案: