Question

我使用的是版本4.13.6。当我指定宽度并在视图中呈现时，该表只有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

您应该验证是否从您使用的jqGrid版本中插入文件ui.jqgrid.min.css（或ui.jqgrid.css）。

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

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

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

1 个答案: