jQgrid

Question

简单地说：当我在网格的每一行都包含编辑按钮时，如何调整使用哪个图标？当利用导航网格中的“编辑”按钮时，我能够做到这一点，但当它包含在每一行中时，我没有运气改变它。这是我尝试使用 "buttonicon" 选项的结果：

    $("#listAllSupplierPurchasesGrid").jqGrid({
        url: "/TargetItems/GetAllPurchasesAllSuppliers",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['PurchaseId', 'Supplier', 'Item', 'Price', 'Qty', 'Total', 'Payment Method', 'Payment Status', 'Create Date', ' '],
        colModel: [
            {
                key: true,
                name: 'PurchaseId',
                index: 'PurchaseId',
                editable: true,
                search: false,
                hidden: true
            },
            {
                key: false,
                name: 'Supplier',
                index: 'Supplier',
                width: 300,
                search: true,
                stype: 'select',
                searchoptions: {
                  dataUrl: '/WantedItems/GetSupplierOptionList'
                }
            },
            {
                key: false,
                name: 'WantedItem',
                index: 'WantedItem',
                width: 300,
                search: true,
                stype: 'select',
                searchoptions: {
                    dataUrl: '/WantedItems/GetWantedItemsOptionList'
                }
            },
            {
                key: false,
                name: 'WantedItemPrice',
                index: 'WantedItemPrice',
                editable: false,
                search: false,
                width: 80,
                formatter: 'currency',
                formatoptions: {
                    prefix: '$',
                    thousandsSeparator: ',',
                    decimalPlaces: 2
                }
            },
            {
                key: false,
                name: 'QuantityPurchased',
                index: 'QuantityPurchased',
                editable: false,
                search: false,
                width: 50
            },
            {
                key: false,
                name: 'TotalPrice',
                index: 'TotalPrice',
                editable: true,
                editoptions: {
                    readonly: 'readonly'
                },
                search: false,
                width: 80,
                formatter: 'currency',
                formatoptions: {
                    prefix: '$',
                    thousandsSeparator: ',',
                    decimalPlaces: 2
                }
            },
            {
                key: false,
                name: 'PaymentMethod',
                index: 'PaymentMethod',
                editable: true,
                editoptions: {
                    readonly: 'readonly'
                },
                search: false,
                width: 120
            },
            {
                key: false,
                name: 'PaymentStatus',
                index: 'PaymentStatus',
                width: 100,
                search: true,
                stype: 'select',
                searchoptions: {
                    dataUrl: '/WantedItems/GetPaymentStatusOptionsList'
                }
            },
            {
                key: false,
                name: 'CreateDate',
                index: 'CreateDate',
                editable: false,
                search: false,
                width: 80,
                formatter: 'date',
                formatoptions: {
                    newformat: 'm/d/Y'
                }
            },
            {
                key: false,
                name: 'CompletePayment',
                index: 'CompletePayment',
                width: 30,
                editable: false,
                search: false,
                sortable: false,
                formatter: 'actions',
                formatoptions: {
                    keys: true,
                    editformbutton: true,
                    editbutton: true,
                    delbutton: false,
                    buttonicon: "ui-icon-circle-check",
                    editOptions: {
                        editCaption: "Complete Payment",
                        bSubmit: "Mark as Paid",                            
                        closeOnEscape: true,
                        closeAfterAdd: true,
                        viewPagerButtons: false,
                        closeAfterEdit: true,
                        url: '/TargetItems/CompletePayment'
                    }
                }
            },
        ],
        pager: jQuery('#listAllSupplierPurchasesGridPager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Payments and Purchases',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },
        height: "100%",
        multiselect: false
    })
    .filterToolbar();

我发现唯一可行的方法是在 gridComplete() 事件中简单地添加一个 jQuery 函数以删除/替换相关 SPAN 上的 class。我怀疑 jqGrid 有更好的方法来处理这个问题。这是目前有效的jQuery解决方案，供参考。

        gridComplete: function()
        {
            $("td[aria-describedby='listAllSupplierPurchasesGrid_CompletePayment'").find('.ui-icon-pencil').removeClass('ui-icon-pencil').addClass("ui-icon-circle-check");                
        }

Answer 1

jqGrid 不允许配置 formatter: "actions" 添加的图标。所以你必须在 localComplete

里面改变它

$("#grid").bind("jqGridLoadComplete jqGridAfterInsertRow", function () {
    var $this = $(this);
    $this.find(">tbody>.jqgrow>td div.ui-inline-edit")
        .html("<span class=\"" + $.jgrid.nav.editicon + "\"></span>");
    $this.find(">tbody>.jqgrow>td div.ui-inline-del")
        .html("<span class=\"" + $.jgrid.nav.delicon + "\"></span>");
    $this.find(">tbody>.jqgrow>td div.ui-inline-save")
        .html("<span class=\"" + $.jgrid.nav.saveicon + "\"></span>");
    $this.find(">tbody>.jqgrow>td div.ui-inline-cancel")
        .html("<span class=\"" + $.jgrid.nav.cancelicon + "\"></span>");
}

我在这里使用定义为 editicon、delicon、saveicon 和 cancelicon 属性的图标 $.jgrid.nav。对象 $.jgrid.nav 可用于指定 navGrid 属性的默认值，而不是使用 navGrid 的相应选项。通常一个只包括像

这样的行

$.extend(true, $.jgrid.nav, {
    editicon: "MyEditIconClass",
    addicon: "MyAddIconClass",
    searchicon: "MySearchIconClass",
    delicon: "MyDeleteIconClass",
    refreshicon: "MyRefreshIconClass",
    viewicon: "MyViewIconClass",
    saveicon: "MySaveIconClass",
    cancelicon: "MyCancelIconClass"
});

在您的代码的开头以及以后所有 navGrid 和 inlineNav 的调用将使用指定的图标默认值。

jQgrid - 在每行包含编辑按钮时更改编辑按钮图标

jQgrid - Change Edit button icon when including Edit button on every line

icons