Question

我通过格式化程序在单元格中设置列的图标。我希望在单元格中按条件设置图标。例如，'add'列的图标是'ui-icon-icon1' 如果列'status'的值为“ok”，则列'add''ui-icon-icon2'的图标为else 'UI图标-ICON1'

 grid.jqGrid({
            data: mydata,
            datatype: 'local',
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', '', '', '', ''],
            colModel: [
                { name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
                { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                { name: 'name', index: 'name', width: 100 },
                { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                { name: 'note', index: 'note', width: 150, sortable: false },
                {
                    name: 'add', width: 20, sortable: false, search: false,
                    formatter: function () {

                        return "<span class='ui-icon ui-icon-plus'></span>"
                    }
                },
                {
                    name: 'edit', width: 20, sortable: false, search: false,
                    formatter: function () {
                        return "<span class='ui-icon ui-icon-pencil'></span>"
                    }
                },
                {
                    name: 'del', width: 20, sortable: false, search: false,
                    formatter: function () {
                        return "<span class='ui-icon ui-icon-trash'></span>"
                    }
                },
                {
                    name: 'details', width: 20, sortable: false, search: false,
                    formatter: function () {
                        return "<span class='ui-icon ui-icon-document'></span>"
                    }
                }
            ],
            pager: '#pager',
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            gridview: true,
            height: '100%',
            rownumbers: true,

enter image description here

Answer 1

formatter方法有三个参数：formatter(cellvalue, options, rowObject)。您应该能够从rowObject参数中检索状态列的值，例如rowObject[statusColumnIndex]。

注意：问题中的网格定义不包含上述文本中提到的“状态”列的定义，因此我不确定“状态”列索引是什么。

Answer 2

这是我做类似的事情，并且要注意，你必须将rowObect列称为索引值，你不能像上面提到的Rob Willis那样使用名称值，因为rowObject不会包含那些信息（除非你传递它作为JSON或localdata中的额外信息。

 function FormatCell(cellval, opts, rowObject, action) {
    var displayIcon = rowObject[IndexOfColumToCheck] == "CheckValue" ? true : false;

    if (displayIcon)
        return ....
        //...format html to display the correct icon appended with the cell value
    }//if (priceChange) {
    else { 
        return ... 
           //...format html to display the correct icon appended with the cell value
    }//else

作为回报中的一个例子，你可以返回类似的内容：

return '<img src="/images/icon_clock.jpg" class="CustomSearchResultIcons InGridIcon_Inactive" height="16px" width="16px" alt="Inactive User Icon" title="This user has not logged in recently" />' +
                '<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only InGridIcon InGridIcon_Friend" title="You are freinds with this user">' +
                '<span class="ui-button-icon-primary ui-icon ui-icon-star"></span>' +
                '</button>' + '<span class="InGridUsername">' + cellval + '</span>';

在格式化程序中使用条件

2 个答案: