Có thể thiết lập chiều rộng của phần trăm jQGrid không?

Question

Có thể thiết lập chiều rộng của phần trăm jQGrid không? Nếu có, thì làm thế nào?

Answer 1

Không trực tiếp nhưng nó có thể ...

Nếu bạn đang muốn thiết lập độ rộng của toàn bộ mạng lưới để một phần trăm bạn có thể sử dụng tài sản autowidth và nó sẽ thiết lập các lưới rộng với độ rộng của nó phần tử cha (tức là DIV) và phần tử gốc đó có thể có phần trăm được đặt.

Nếu bạn muốn đặt chiều rộng cột theo phần trăm bạn có thể sử dụng shrinktofit và sau đó giá trị độ rộng cột của bạn về cơ bản là phần trăm.

shrinkToFit: true 

Các tùy chọn này và nhiều người khác có thể được tìm thấy trên jqGrid wiki

Answer 2

Có thể theo cách rất đơn giản:

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

nhìn vào mã này:

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

và mã này:

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

Answer 3

Đối với tôi, tôi coi đây là deсision tốt nhất:

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

Answer 4

Datatables 3.5+ hỗ trợ này qua

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

Answer 5

kích thước cửa sổ séc trong jquery.

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

hãy chắc chắn để thiết lập autowidth: đúng về tính chất lưới

Answer 6

Nếu bạn đang cố gắng để thiết lập chiều rộng của bảng jqGrid trên trang HTML của bạn, hãy thử này.

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

Tỷ lệ phần trăm tính toán trong tài liệu tham khảo của wrapper mẹ của jqGrid.