JQgrid 4.8 列宽在 IE9 中不起作用答案

【问题标题】：JQgrid 4.8 column widths not working in IE9JQgrid 4.8 列宽在 IE9 中不起作用
【发布时间】：2023-03-07 00:34:01
【问题描述】：

我将 jqGrid 从 4.4.5 更新到 4.8.2，并注意到列宽停止工作（在 IE9 中）。网格中的宽度只是包裹了该列中的文本。我找到了这个线程：(jqgrid not work on IE8)，唯一有效的演示是 demo46。我在下面放了一份我的网格副本，看看是否需要对其进行更改以解决问题。

var myColNames = ['ID', 'Name'];
var myColModel = [
    { name: 'ID', index: 'ID', width: 50, key: true, hidden: false, editable: true },
    { name: 'Name', index: 'Name', width: 150, key: true, hidden: false, editable: true },   
];

grid.jqGrid({
    url: URL,
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    colNames: myColNames,
    colModel: myColModel,
    loadonce: true, // enables sorting on client side
    hidegrid: false, // disable ^ button to show/hide
    ignoreCase: true, // client side sorting and filtering becomes case insensitive
    rowNum: gridRows, // number of rows to display per page
    height: 'auto',
    rowList: [10, 20, 50, 100, 500], // drop down for number of rows to display per page
    pager: pagerName, // name of pager div to display the pager in
    altRows: true,
    altclass: 'AIMAltRow',
    viewrecords: true,
    shrinkToFit: false, // enable scrolling of headers
    gridview: true,
    sortname: 'ID',
    sortorder: 'desc',
    rownumbers: true,
});

【问题讨论】：

我在答案中添加了更多信息，并指出您发布的代码中有两个错误。

标签： javascript jquery html css jqgrid

【解决方案1】：

它是在 jqGrid 4.7 和免费的 jqGrid 4.8 中的 IE8 兼容性确实存在问题。我不能说 Guriddo jqGrid JS 4.8 或 Guriddo jqGrid JS 4.8.2，但问题在免费的 jqGrid 中得到了解决。我在您引用的答案中添加了the demo。最后一个演示使用当前（发布免费 jqGrid 4.8）代码。我不知道 IE8/IE9 有什么问题。试试看吧。

如果您想通过包含指向 GitHub 代码的直接链接来尝试新的免费 jqGrid 代码（请参阅the wiki article）：

<link href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" rel="stylesheet">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>

我建议你另外包含

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

并添加新的 jqGrid iconSet: "fontAwesome"。您会看到网格的外观会更好，尤其是在 Web 浏览器中使用缩放时。在wiki 中查看有关 Font Awesome 使用的更多详细信息。

您可以从github 下载代码。它包含jquery.jqgrid.min.js、jquery.jqgrid.src.js、jquery.jqgrid.min.map、ui.jqgrid.css（或ui.jqgrid.min.css）和所有不同的语言特定语言环境。

顺便说一句，您发布的小代码包含重要错误。您在两列中使用key: true，这是错误的。只能将key: true 放在一列中。另一个错误是在最后一个参数（rownumbers: true）之后使用,。它会在 IE8 中产生语法错误。

【讨论】：

【解决方案2】：

更新到修复它的新 ui.jqgrid.css。感谢 Oleg 的建议

【讨论】：