jQGridの幅をパーセンテージで設定することはできますか？

Question

jQGridの幅をパーセントで設定することはできますか？はいの場合は、どうですか？

直接

Answer 1

ないけど、あなたはautowidthプロパティを使用することができますし、それはそれの幅だと幅のグリッドを設定します割合にグリッド全体の幅を設定するために欠けている場合、それは...

可能です親要素（すなわちDIV）であり、その親要素はその割合を設定できます。

autowidth: true 

パーセントで列の幅を設定する場合は、shrinktofitを使用できます。次に、列幅の値は基本的にパーセンテージです。

shrinkToFit: true 

これらのオプションは、多くの他の人がJQGrid wikiに

Answer 2

を見つけることができますこれは非常に単純な方法で可能です：このコードで

$(document).ready(function(){ 
var pageWidth = $("#updatesList").parent().width() - 100; 
$("#updatesList").jqGrid({ 
    url:'quick_updates.php?action=loadUpdates'+"&request=ajax", 
    datatype: "json", 
    colNames:[table_heading_id, table_heading_products, table_heading_categories, table_heading_model, table_heading_availability, table_heading_weight, table_heading_quantity, table_heading_sortorder, table_heading_manufacturers, table_heading_price, table_heading_tax], 
    colModel:[ 
     {name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true}, 
     {name:'name',index:'name', width:(pageWidth*(20/100)), sortable:true, align:"left",true:false,resizable:true}, 
     {name:'categories',index:'categories', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:categories}}, 
     {name:'model',index:'model', width:(pageWidth*(10/100)), sortable:false, align:"left",search:true,resizable:true,editable:true}, 
     {name:'availability',index:'availability', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:availability},editable:true,edittype:"select",editoptions:{value:availability}}, 
     {name:'weight',index:'weight', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true}, 
     {name:'quantity',index:'quantity', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true}, 
     {name:'sortorder',index:'sortorder', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true}, 
     {name:'manufacturers',index:'manufacturers', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:manufacturers},editable:true,edittype:"select",editoptions:{value:manufacturers}}, 
     {name:'price',index:'price', width:(pageWidth*(10/100)), sortable:false, align:"center",search:false}, 
     {name:'tax',index:'tax', width:(pageWidth*(10/100)), sortable:true, align:"center",resizable:true,search:true,stype:"select",searchoptions:{value:taxes},editable:true,edittype:"select",editoptions:{value:taxes}} 
    ], 
    rowNum:50, 
    rowList:[10,20,30,50,100], 

外観：

var pageWidth = $("#updatesList").parent().width() - 100; 

とこのコード：

私として

{name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true}, 
     {name:'name',index:'name', width:(pageWidth*(20/100)), 

Answer 3

、私はこれが最善のdeсisionであると考えて：

// add this after JqGrid creation 
$("#YourTableGrid").setGridWidth(Math.round($(window).width(), true)); 

Answer 4

のDataTable 3.5+

 jQuery("#dt").jqGrid({ 
       autowidth: true, 
       shrinkToFit: true 
      }); 

Answer 5

jqueryの中

チェックウィンドウサイズを経由して、これをサポートしています。

$(window).on("resize", function() { 
     var newWidth = $("#list").closest(".ui-jqgrid").parent().width(); 
     $("#list").jqGrid("setGridWidth", newWidth, true); 
}); 

autowidthを設定してください：真のグリッドプロパティで

Answer 6

あなたのHTMLページにjqgridテーブルの幅を設定しようとしている場合は、これを試してみてください。

HTML

<table id="jqGrid" width="98%"></table> 

JS

var outerwidth = $("#jqGrid").width(); 

$("#jqGrid").jqGrid({ 
    width: outerwidth 
}); 

Answer 7

var operationfieldwidth = 40 
    function getPercentage(ask) 
    { 
     return ((screen.width - operationfieldwidth) * ask)/100; 
    } 

    $(document).ready(function ($) { 
     GridBind(); 
    }); 
    function GridBind() { 
     $("#jqGrid").jqGrid({ 
      url: '@(Url.Action("BindRole", "Role"))', 
      datatype: 'json', 
      mtype: 'Get', 
      colNames: ["Role Name", "Role Description", ""], 
      colModel: [{ name: 'ActRoleName', index: 'RoleName', width: getPercentage(20), align: 'left', power: 3, sortable: true }, 
         { name: 'ADRoleName', index: 'RoleDesc', width: getPercentage(80), align: 'left', power: 6, sortable: true }, 
         { name: 'add', sortable: false, width: operationfieldwidth, search: false, power: 0, formatter: addLink } 
      ], 
      pager: jQuery('#jqControls'), 
      iconSet: "fontAwesome", 
      rowNum: 25, 
      rowList: [25, 50, 100, 500, 1000], 
      height: screen.height - 490, 
      viewrecords: true, 
      emptyrecords: 'No Records are Available to Display', 
      jsonReader: { 
       root: "rows", 
       page: "page", 
       total: "total", 
       records: "records", 
       repeatitems: false, 
       Id: "0" 
      }, 
      autowidth: true, 
      multiselect: false, 
     }).navGrid('#jqControls', { 
      edit: false, add: false, del: false, search: true, 
      searchtext: "Search", refresh: true 
     }, {}, {}, {}, 
     { 
      zIndex: 100, 
      caption: "Search Record", 
      sopt: ['cn'], 
      closeAfterSearch: true 
     }); 
    } 
    function addLink(cellvalue, options, rowObject) { 
     var Str = "<a class='fa fa-pencil-square-o fa-2x' style='cursor:pointer;' href='../../Role/AddEditRole?id=" + rowObject.ID + "'></a>" 
     return Str; 
    } 

Answer 8

$(document).ready(function() { var yourPercentage = 50%; $("#jQGridDemo").setGridWidth($("#jQGridDemo").parent().width() * yourPercentage/100); });

jqGridの親ラッパーの基準で算出した割合。