是否可以设置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的百分比宽度？

回答

相关问题