无论我指定什么，free-Jqgrid 宽度都是 1px

Question

我使用的是 4.13.6 版本。当我指定宽度并在视图中呈现时，table 只有 336 像素宽。我可以使用开发人员工具取消选中 element.style { width: 1px } ，它将填满页面。我怎样才能让它成为 100% 宽度？

Jquery:

    @model RSVPTestWindowsAuth.Models.JsonClass

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/free-jqGrid/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/free-jqGrid/jquery.jqgrid.min.js"></script>

<script type="text/javascript">

    var data = @Html.Raw(@Model.jsonCls);

    $(document).ready(
    $(function () {
        "use strict";
        $("#jqgrid1").jqGrid({

            url: '@Url.Action("List", "Home")',
            datatype: "jsonstring",
            shrinkToFit: false,
            mtype: 'GET',
            width: '100%',
            colNames: ["Tracis", "CrimeType", "Supp", "Arrest", "Type", "Reported"],
            colModel: [
                { name: "Tracis" , label: "Tracis", width:20},
                { name: "CrimeType", width:400},
                { name: "Supp", formatter: 'checkbox' ,width:5 },
                { name: "Arrest" , formatter: 'checkbox', width:5},
                { name: "Type", formatter: 'string', width:25},
                { name: "Reported", formatter: 'date', sorttype: 'date', datefmt:'m/d/yyyy HH:MM:SS', width:20}

            ],
            cmTemplate: { editable: true },
            rowNum: 20,        // Total records to show at a time by default
            loadonce: true,
            rowList: [10, 20, 30],  // For Paging
            pager: '#gridpager',
            datastr: data,
            jsonReader: {
                root: "rows",
                page: "currpage",
                total: "totalpages",
                records: "totalrecords",
                repeatitems: false
            },
            viewrecords: true,
            gridview: true,
            autowidth: true,
            height: 'auto',
            hoverrows: true,
            caption: "Reports Available"
        });
    }));

</script>


@{
    ViewBag.Title = "List";
}
<!-- import the included stylesheet for some (very basic) default styling -->
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />
<h2>Reports Available:</h2><br />

<table>
    <tr>
       <table id="jqgrid1"></table>
       <div id="gridpager"></div>
    </tr>
</table>

渲染时的屏幕如下所示：

这是我使用开发者工具删除 1px 时的样子：

Answer 1

您应该验证您插入的文件 ui.jqgrid.min.css（或 ui.jqgrid.css）来自与您使用的相同版本的 jqGrid。

对您的代码的一些其他小建议：

在免费的 jqGrid 中不需要加载 grid.locale-en.js。加载jquery.jqgrid.min.js
如果您需要将网格的宽度扩展到 100%（到外容器的宽度），您应该使用选项 autowidth: true 而无需指定选项 shrinkToFit: false
如果 name 属性和 colModel 的值是相同的字符串，您可以删除 colNames。
您应该删除 mtype: 'GET',width: '100%',gridview: true,height: 'auto' 选项。选项的值是默认值或不需要的。
我建议您删除 <div id="gridpager"></div> 并将 pager: '#gridpager' 替换为 pager: true。 jqGrid 会自动创建对应的div。如果您要使用 navGrid、inlineGrid 等方法在导航栏中放置一些信息，那么您只需要跳过 "#gridpager" 参数，免费的 jqGrid 将使用 div，它是通过使用 pager: true.
我建议您包括 Font Awesome 4.x CSS 并使用选项 iconSet: "fontAwesome"。您将改进 jqGrid 使用的图标的外观。有关详细信息，请参阅 the article。
您应该从服务器中删除 jsonReader 和 return 只是所有项目的数组（只是数组，这是 rows 属性的值并跳过 {page:1,total:1,records:1, rows: ...})

无论我指定什么，free-Jqgrid 宽度都是 1px

Free-Jqgrid width is 1px no matter what I specify

free-jqgrid