È possibile impostare la larghezza di un jQGrid in percentuale?

Question

È possibile impostare la larghezza di un jQGrid in percentuale? Se sì, allora come?

Answer 1

Non direttamente, ma è possibile ...

Se si vogliono impostare la larghezza di tutta la griglia per una percentuale è possibile utilizzare la proprietà autowidth e sarà impostare le griglie larghezza secondo la larghezza del suo elemento padre (cioè DIV) e quell'elemento genitore può avere la sua percentuale impostata.

autowidth: true 

Se si desidera impostare la larghezza delle colonne in base alla percentuale che è possibile utilizzare shrinktofit e quindi i valori della larghezza delle colonne sono fondamentalmente una percentuale.

shrinkToFit: true 

Queste opzioni e molti altri possono essere trovati sul jqGrid wiki

Answer 2

E 'possibile in modo molto semplice:

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

un'occhiata a questo codice:

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

e questo codice:

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

Answer 3

Per quanto mi riguarda, ritengo che questo sia il miglior deсision:

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

Answer 4

DataTable 3.5+ supporta questa via

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

Answer 5

dimensione della finestra del check-in jQuery.

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

assicurarsi di impostare autowidth: vero in proprietà della griglia

Answer 6

Se si sta cercando di impostare la larghezza della tabella jqGrid nella pagina HTML, provare questo.

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

Percentuale calcolata nel riferimento di involucro madre di jqGrid.