是否可以設置jQGrid的百分比寬度？

15

不直接，但它是可能的...

如果你想整個格柵的寬度設定爲百分比您可以使用autowidth屬性，它會設置網格寬度寬度是父元素（即DIV）和父元素可以設置它的百分比。

autowidth: true

如果你想設置列寬的百分比，你可以使用shrinktofit，然後你的列寬度值基本上是一個百分比。

shrinkToFit: true

這些選項和其他許多人可以在jqGrid的找到wiki

來源

2012-05-12 23:44:52

16

有可能在非常簡單的方法：

$(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)),

來源

2013-01-03 19:51:49 marrrecki

+0

對不起，遲到的迴應。就像訣竅。但是，當用戶更改分辨率或在沒有頁面加載的情況下更改瀏覽器的大小時，它會起作用嗎？你可以給我任何演示網站，我可以看到。 – Amit

+0

我使用window resize事件實現了它。 –

1

至於我，我認爲這是最好的deсision：通過jQuery中

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

來源

2014-04-11 07:48:48

5

數據表3.5+支持這一點。

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

確保設置autowidth：真在網格屬性

來源

2014-04-13 07:55:25

0

檢查窗口大小

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

來源

2016-05-23 20:53:50 Danger009

0

如果你想設置你的HTML頁面上的jqGrid表格的寬度，試試這個。

HTML

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

JS

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

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

來源

2016-12-30 00:14:33 TheRealJAG

0

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; 
    }

來源

2017-02-07 06:12:59

+1

你可以給你一些關於你的代碼的解釋嗎？ – Massimo

0

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

在百分比的jqGrid的父包裝物的參考計算。

來源

2017-05-05 16:27:49

是否可以設置jQGrid的百分比寬度？

回答

相關問題