Question

我遇到了Jquery Grid的寻呼机问题。起初我认为它工作得很好，但现在寻呼机上的按钮是重叠的。我正在使用asp.net MVC 4，所有数据都正确显示，每件事都可以正常工作，除了寻呼机箭头不工作且按钮重叠。非常感谢您对如何解决此问题的帮助。

JQGrid的javascript代码如下：

$(function () {
    $("#ListGrid").jqGrid({
        url: "/Transaction/GetTransactions",
        datatype: "json",
        colNames: ["BSN", "Date", "Ship From", "Address", "City", "EDI"],
        colModel: [
                { key: true, hidden: false, name: 'SHIPMENT_IDENTIFICATION', sortable: false, index: 'SHIPMENT_IDENTIFICATION', editable: true, align: 'center',
                    formatter: showBsnLink
                },
                { key: false, name: 'DATE', index: 'DATE', editable: true, sortable: true, formatter: 'date', align: 'center' },
                { key: false, name: 'NAME', index: 'NAME', editable: true, sortable: true, align: 'center', formatter: showClientLink },
                { key: false, name: 'ADDRESS_INFORMATION_01', index: 'ADDRESS_INFORMATION_01', editable: true, align: 'center' },
                { key: false, name: 'CITY_NAME', index: 'CITY_NAME', editable: true, align: 'center' },
                { key: false, name: 'View EDI', index: 'EDI', align: 'center', formatter: showEdiLink, editable: true }
            ],
        rowNum: 10,
        mtype: 'Get',
        height: 'auto',
        rowList: [10, 20, 30, 40],
        pager: jQuery('#pager'),
        sortname: 'SHIPMENT_IDENTIFICATION',
        viewrecords: true,
        sortorder: 'desc',
        loadonce: false,
        altRows: true,
        caption: "Transactions",
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        shrinkToFit: true,
        multiselect: false,
        /*
        onSelectRow: function(id, status) {
        var rowData = $("#ListGrid").jqGrid('getRowData', id);
        window.location = "/Transaction/GetInfo/?date=" + rowData.TargetDate + "&id=" + rowData.Id;
        }*/
        onCellSelect: function (rowid, columnIndex, cellcontent, e) {
            /*
            alert(cellcontent);
            if (columnIndex == 2) {
            $('select[id=clientName]').val(cellcontent);
            $('#clientName').selectpicker('refresh'); 
            }*/
        }
    }).navGrid('#pager', { search: false, add: false, del: false, edit: false });
});

服务器端的代码如下：

public JsonResult GetTransactions(string sidx, string sord, int page, int rows, DateTime? DateFrom, DateTime? DateTo,
            string shipmentId, string clientName)
        {
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            IEnumerable<ShipmentInfo> transactionResults = TransactionProvider.getTransactions();


            // Check if the user wants to filter by Shipment ID
            if (!shipmentId.IsEmpty())
            {
                transactionResults = transactionResults.Where(x => x.SHIPMENT_IDENTIFICATION.Contains(shipmentId));
            }

            // Check if the user wants to filter by clientName
            if (!clientName.IsEmpty() && clientName != "All")
            {
                transactionResults = transactionResults.Where(x => x.NAME.Contains(clientName));
            }

            // Check if the user wants to filter from Date
            if (DateFrom.HasValue)
            {
                transactionResults = transactionResults.Where(x => x.DATE >= DateFrom);
            }

            // Check if the user wants to filter from Date
            if (DateTo.HasValue)
            {
                transactionResults = transactionResults.Where(x => x.DATE <= DateTo);
            }

            int totalRecords = transactionResults.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);

            // Sort by descending
            if (sord.ToUpper() == "DESC")
            {
                transactionResults = transactionResults.OrderByDescending(s => s.SHIPMENT_IDENTIFICATION);
                transactionResults = transactionResults.Skip(pageIndex * pageSize).Take(pageSize);
            }
            else // Sort by Ascending
            {
                transactionResults = transactionResults.OrderBy(s => s.SHIPMENT_IDENTIFICATION);
                transactionResults = transactionResults.Skip(pageIndex * pageSize).Take(pageSize);
            }

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = transactionResults
            };

            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

这是HTML视图，使用Bootstrap 3：

<div id="gridContainer" class="col-sm-9 col-md-10 col-xs-12 col-lg-10 row-offcanvas">
            <table id="ListGrid"></table>
            <div id="pager"></div>
            <div class="container-fluid" style="padding-top: 10px;">
                <div class="row">
                    @using (Html.BeginForm("exportPDF", "Transaction", FormMethod.Post, new {@class = "form-inline", @role = "form", @id = "actionForm"}))
                    {
                        <div class="form-group">
                            <button class="btn btn-info" type="submit" name="action" value="export">Export to PDF</button>
                            <button class="btn btn-info" type="submit" name="action" value="print" onclick="document.getElementById('actionForm').target = '_blank';">Print</button>
                        </div>
                    }
                    <div id="dialog" title="EDI">
                    </div>
                </div>
            </div>
        </div>

任何帮助都将不胜感激，谢谢。

Answer 1

发现问题，按钮重叠，因为我使用的是自定义的css文件，它覆盖了文本输入的JQGrid CSS。

JQGrid navGrid寻呼机按钮重叠

1 个答案: