Question

我在bootstrap面板中使用了几个jqGrids。非常适合镀铬。在IE中的初始页面加载（我使用11）时，jqGrids比面板宽，所以它们在右边溢出。如果我刷新页面，一切都很好。我在多个页面上有网格，这只发生在一个页面上。与这一页的不同之处在于它有一个左侧（全高）菜单。

我认为IE首次尝试时没有正确呈现'autowidth：true'。

HTML：

<body>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="/">MyApp</a></li>
                <li><a href="#manageRequest">Manage Requests</a></li>
                <li><a href="#manageHardware">Manage Hardware</a></li>
            </ul>   
        </div>
        <div id="page-content-wrapper">
            <div class="panel panel-primary" id="manageRequest">
                <div class="panel panel-heading">Manage Requests</div>
                <div class="panel panel-body">
                    <p class="lead">Click on a request to see available actions</p>
                    <table class="table table-bordered table-striped" id="request-grid"></table>
                    <div id="request-pager"></div>
                </div>
            </div>

            <div class="panel panel-success" id="manageHardware">
                <div class="panel panel-heading">Manage Hardware</div>
                <div class="panel panel-body">
                    <p class="lead">Click on a device, then click edit</p>
                    <table class="table table-bordered table-striped" id="hardware-grid"></table>
                    <div id="hardware-pager"></div>
                </div>
            </div>
        </div>
    </div>
</body>

网格的JS代码：

// Request Grid Operations
$("#request-grid").jqGrid({
    url: requestUrl,
    datatype: "json",
    colNames: ['Request Number', 'Approved?', 'Request Status', 'Employee Name', 'Requested By', 'Request Date'],
    colModel: [
            { name: "RequestId", key: true, sortable: true, search: true, sorttype: 'integer', searchoptions: { sopt: ['eq'] } },
            { name: "IsApproved" },
            { name: "RequestStatus" },
            { name: "EmployeeName", stype: "text", searchoptions: { sopt: ['eq', 'cn', 'bw'] } },
            { name: "RequesterEmail" },
            {
                name: "DateCreated", sortable: true, sorttype: 'date', formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: "m/d/Y" },
                search: false             
            }
    ],
    loadonce: true,
    height: '500',
    autowidth: true, 
    pager: "#request-pager",
    onSelectRow: function (id) {            
        $("#RequestNumber").val(id);
        $("#SelectedRequestModel").modal('show');
    }
});
$("#request-grid").jqGrid('navGrid', '#request-pager', { edit: false, add: false, del: false, search: true, view: false, refresh: true }, {},{},{}, { closeAfterSearch: true });


// Hardware Grid Operations
$("#hardware-grid").jqGrid({
    url: hardwareGridUrl,
    datatype: "json",
    colNames: ['HardwareId', 'Model', 'Type', 'Description', 'Price', 'Mobile Device?'],
    colModel: [
            { name: "HardwareId", key: true, hidden: true },
            { name: "Model", editable: true, editrules: { required: true } },
            { name: "ItemType", editable: true, editrules: { required: true } },
            { name: "ItemDescription", editable: true, edittype: 'textarea', editoptions: { rows: "5", cols: "25" }, width: 500 },
            { name: "Price", editable: true, formatter: 'currency', align: 'center' },
            { name: "IsMobile", editable: true, edittype: 'checkbox', editoptions: { value: 'true:false' }, editrules: { required: true } },
    ],
    loadonce: true,
    height: '300',
    autowidth: true,
    pager: "#hardware-pager",
    editurl: editHardwareUrl            
});

$("#hardware-grid").jqGrid('navGrid', '#hardware-pager', { edit: true, add: true, del: true, search: true, view: false, refresh: true },
        { 
            reloadAfterSubmit: true, closeOnEscape: true, closeAfterEdit: true,
            afterSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: 'json' });
                return true;
            }
        },
        {
            reloadAfterSubmit: true, closeOnEscape: true, closeAfterAdd: true,
            afterSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: 'json' });
                return [true, ""];
            }
        },
        {}
);

Answer 1

我遇到了同样的问题，在包含元素上设置填充似乎是一个不错的快速解决方法。

我的Html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Work Sheet</h3>
    </div>
    <div id="gridContainer" class=panel-body>
        <table id="jqGrid">
        </table>
        <div id="jqGridPager">
        </div>
    </div>
</div>

我的CSS

#gridContainer {
    padding: 0px 7px 0px 0px;
}

出于某种原因，它似乎总是流出右侧。 7px做了这个伎俩。

IE 11中初始页面加载时jqgrid溢出面板

1 个答案: