JQgrid 4.8 列宽在 IE9 中不起作用

Question

我正在将我的 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,
});

Answer 1

它是 jqGrid 4.7 中的 IE8 兼容性确实存在问题，因此免费的 jqGrid 4.8 也是如此。我不能说 Guriddo jqGrid JS 4.8 或 Guriddo jqGrid JS 4.8.2，但问题在免费的 jqGrid 中得到了解决。我在您引用的答案中添加了 the demo 。最后一个演示使用当前（post 免费 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）和所有不同语言的特定语言环境。

顺便说一下，您 post 编写的小代码包含重要错误。您在两列中使用 key: true，这是错误的。只能将 key: true 放在一列中。另一个错误是在最后一个参数 (rownumbers: true) 之后使用 ,。它在 IE8.

中产生 语法错误

Answer 2

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

的推荐

JQgrid 4.8 列宽在 IE9 中不起作用

JQgrid 4.8 column widths not working in IE9

javascript

jquery

html

css

jqgrid