jquery - 为什么在分组处于事件状态时 JqGrid 会丢失最右边的列边框？

Question

我有一个没有太多自定义的网格，可以很好地呈现 grouping: false

如果我打开分组，边框就会消失，如屏幕截图所示。

关于边框的单元格之一的 CSS 类是 ui-jqgrid 和 TR.ui-row-ltr TD，它们的边框设置为 1px solid，但实际上并不渲染。如果我关闭 border 属性，它会将其从分组行和网格中的所有其他行中删除。

关于如何绘制此边框有什么想法吗？谢谢!

按要求定义网格:

{
        colNames: ["ItemId", "DetailId", "UPC", "Ship Date", "Vendor", "VendorDisplay", "Item", "UPC", "Description", "Pack", "Ret", "Exp", "Inv", "Memo", "Distro", "Requst", "Reason"],
        colModel: [
            { name: "ItemId", index: "ItemId", width: 1, hidden: true },
            { name: "DetailId", index: "DetailId", width: 1, hidden: true, editable: true },
            { name: "UPC", index: "UPC", width: 1, hidden: true },
            { name: "ShipDateDisplay", index: "ShipDateDisplay", width: 65, stype: "text", searchoptions: { dataInit: GridModels.Formatters.DatePicker, attr: { title: "Select Date"}} },                
            { name: "Vendor", index: "Vendor", width: 0, hidden: true, stype: "select", searchoptions: { searchhidden: true, value: "0:Vendor1;1:Vendor2"} },                
            { name: "VendorDisplay", index: "VendorDisplay", hidden: true },
            { name: "VendorItem", index: "VendorItem", width: 40, align: "Right" },
            { name: "UPC_DISPLAY", index: "UPC_DISPLAY", width: 70, align: "Right" },
            { name: "ItemDescription", index: "ItemDescription", width: 200 },
            { name: "CasePack", index: "CasePack", width: 35, align: "Right" },
            { name: "Retail", index: "Retail", width: 50, align: "Right", search: false, formatter: Store.Cuts.Common.RetailLoader },               
            { name: "InvQty", index: "InvQty", width: 50, align: "Right", search: false, formatter: Store.Cuts.Common.InventoryLoader },
            { name: "Memo", index: "Memo", width: 50 },
            { name: "Qty", index: "Qty", width: 30, align: "Right", search: false },
            { name: "StoreQty", index: "StoreQty", width: 35, align: "Right", search: false, editable: true, editrules: { required: true, integer: true, minValue: 0} },
            { name: "StoreReason", index: "StoreReason", width: 130, align: "Right", search: false, editable: true, edittype: "select", editoptions: { value: reasons} }
        ],
        editurl: editurl,
        url: gridurl,
        grouping: true,
        groupingView: {
            groupField: ['VendorDisplay'],
            groupColumnShow: false,
            groupText: ['<b>{0}</b>'],
            groupDataSorted: true
        },
        pager: pager,
        height: 250,
        rowNum: 20            
    };

$.extend($.jgrid.defaults, {
            datatype: 'json',
            height: "100%",
            loadui: 'none',
            jsonReader: {
                root: "Rows",
                page: "Page",
                total: "Total",
                records: "Records",
                repeatitems: false,
                userdata: "UserData",
                id: "Id",
                subgrid:
                {
                    root: "Rows",
                    repeatitems: false
                }
            },
            mtype: 'GET',
            autowidth: true,
            sortable: true,
            sortname: 'Id',
            sortorder: 'asc',
            rowNum: 10,
            rowList: [10, 20, 50, 100],
            viewrecords: true,              
            beforeRequest: function () {
                $("#load_grid").html('<h4 style="display: inline; position: relative; top: -10px; font-weight: bold">Loading...</h4>' + $(".loader").html());
                Common.Grid.DisableControls();
            },
            loadComplete: function () {
                if (!loadonce)
                    loadonce = true;

                if ($("#grid").getGridParam("reccount") === 0)
                    Common.Grid.DisplayStatus("No records found...");
                else
                    Common.Grid.HideStatus();

                if (loadCompleteEx)
                    loadCompleteEx();
            },
            gridComplete: function () {
                if (!loadonce) {
                    Common.Grid.LoadNavBar($(this));

                    // Align check all checkbox better
                    $("th[id=grid_cb]")
                        .css("text-align", "center")
                        .css("position", "relative")
                        .css("left", "1px");
                }

                if (gridCompleteEx)
                    gridCompleteEx();

                Common.Grid.EnableControls();
            }
        });

您可以使用以下 JSON 字符串用测试数据填充网格，这会导致我这边出现问题:

{"Total":1,"Page":1,"Records":3,"Rows":[{"Id":1,"Description":"","ShipDate":"/Date(-62135578800000)/","ShipDateDisplay":"01/01/0001","Type":null,"IsAvailableToStores":false,"IsReadOnly":false,"IsStoreFinalized":false,"IsHQFinalized":false,"IsDeleted":false,"BuyerId":0,"Buyer":null,"Memo":null,"ItemId":0,"Vendor":"01111","VendorDisplay":"1111 - ","VendorName":null,"VendorItem":null,"UPC_DISPLAY":"00000-01111","UPC":"1111","ItemDescription":"Test","CasePack":0,"RetailAmt":0,"RetailMult":0,"Retail":"$0.00","SaleAmt":0,"SaleMult":0,"ExpressAmt":null,"ExpressMult":null,"InvQty":0,"DetailId":0,"StoreNumber":0,"StoreName":null,"OriginalQty":0,"BuyerQty":0,"Qty":0,"StoreQty":0,"StoreReason":null,"FinalQty":0},{"Id":2,"Description":"","ShipDate":"/Date(-62135578800000)/","ShipDateDisplay":"01/01/0001","Type":null,"IsAvailableToStores":false,"IsReadOnly":false,"IsStoreFinalized":false,"IsHQFinalized":false,"IsDeleted":false,"BuyerId":0,"Buyer":null,"Memo":null,"ItemId":0,"Vendor":"01111","VendorDisplay":"1111 - ","VendorName":null,"VendorItem":null,"UPC_DISPLAY":"00000-01111","UPC":"1111","ItemDescription":"Test","CasePack":0,"RetailAmt":0,"RetailMult":0,"Retail":"$0.00","SaleAmt":0,"SaleMult":0,"ExpressAmt":null,"ExpressMult":null,"InvQty":0,"DetailId":0,"StoreNumber":0,"StoreName":null,"OriginalQty":0,"BuyerQty":0,"Qty":0,"StoreQty":0,"StoreReason":null,"FinalQty":0},{"Id":3,"Description":"","ShipDate":"/Date(-62135578800000)/","ShipDateDisplay":"01/01/0001","Type":null,"IsAvailableToStores":false,"IsReadOnly":false,"IsStoreFinalized":false,"IsHQFinalized":false,"IsDeleted":false,"BuyerId":0,"Buyer":null,"Memo":null,"ItemId":0,"Vendor":"02222","VendorDisplay":"2222 - ","VendorName":null,"VendorItem":null,"UPC_DISPLAY":"00000-01111","UPC":"1111","ItemDescription":"Test","CasePack":0,"RetailAmt":0,"RetailMult":0,"Retail":"$0.00","SaleAmt":0,"SaleMult":0,"ExpressAmt":null,"ExpressMult":null,"InvQty":0,"DetailId":0,"StoreNumber":0,"StoreName":null,"OriginalQty":0,"BuyerQty":0,"Qty":0,"StoreQty":0,"StoreReason":null,"FinalQty":0}],"UserData":null}

Answer 1

您发布的代码包含许多未定义的函数，如自定义格式化程序等。在我评论了所有未知部分后，我收到了 the demo这没有你描述的效果。如果没有您未发布的代码部分，您描述的问题可能不存在。如果您发布了可用于实时查看问题的 URL(当然使用未最小化的 jqGrid 代码 jquery.jqGrid.src.js)，我可以查看内部。