無論我指定什麼，Free-Jqgrid的寬度都是1px

我使用的是4.13.6版本。當我指定寬度並在視圖中渲染時，表格只有336 px寬。我可以使用開發人員工具取消選中element.style {width：1px}，它將填充頁面。我怎樣才能得到100％的寬度？無論我指定什麼，Free-Jqgrid的寬度都是1px

的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的：

來源

2017-02-13 SDanks

這不是很清楚，導致你想擁有。例如，您可以使用'shrinkToFit：false'選項，該選項可防止收縮/擴展**列寬**。只有當你想增加網格的寬度而不增加列的寬度時，你應該使用'shrinkToFit：false'選項和'autowidth：true'結合使用。它會在最後一列的正確大小上創建額外的可用空間。如果您插入圖片，它將很有幫助，該圖片演示了網格現在的外觀。 – Oleg

此外，您還可以使用一些其他奇怪的組合：數據類型：「jsonstring」，datastr：data'，url：'@ Url.Action（「List」，「Home」）'，mtype：'GET '，loadonce：true'。您需要加載哪些數據源？值'jsonReader'，似乎也很奇怪。你能否包括一個網格輸入數據的例子（兩行就夠了）？輸入數據的哪個字段是項目的唯一ID，可用作rowid（''元素的id屬性）？ – Oleg

以下是他們的數據：{page：1，total：1，records：1，rows：[{「id」：「136746」，「Tracis」：「2015059059」，「CrimeType」：「Quarreling」「Supp」：false，「逮捕」：false，「Type」：「Incident」，「Reported」：「1/8/2016 10:43:31 PM」}，{「id」：「128252」，「Tracis 「：」2015070385「，」CrimeType「：」失物招領「，」Supp「：假，」逮捕「：假，」類型「：」事件「，」已報告「：2015/11/20 12:36:36 AM「}]} – SDanks

您應該驗證您是否插入文件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: ...}）

來源

2017-02-13 22:30:39 Oleg

無論我指定什麼，Free-Jqgrid的寬度都是1px

回答

相關問題