Question

简单地说：当我在网格的每一行都包含“编辑”按钮时，如何调整使用哪个图标？我可以在利用Nav Grid中的Edit按钮时执行此操作，但是当它包含在每一行中时，我没有运气改变它。以下是我尝试使用＆＃34; buttonicon＆＃34;选项：

    $("#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上的类。我怀疑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的{{1}}，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的所有后续调用都将使用图标的指定默认值。

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

1 个答案: