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

Question

我使用的是4.13.6版本。 当我指定宽度并在视图中渲染时，表格只有336 px宽。我可以使用开发人员工具取消选中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的相同版本。

其他的一些小建议，你的代码：

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