Сделать JqGrid ширина жидкости

Question

исправленный код:

<script> 
    var $grid = $("#list2"); 
    emptyMsgDiv = $("<div><span style='color:red; text-align:center;font-size:18px;display:block;'>No Workorder Found</span></div>"); 
    jQuery("#list2").jqGrid({ 
     url:'server.php', 
     datatype: "json", 
     mtype: 'POST', 
     colNames:['WO#','Status','Customer Name','Salesman', 'Created Date', 'WO Total', 'Notes', 'Edit'], 
     colModel:[ 
       {name:'id',index:'id', align:"center"}, 
       {name:'status1',index:'status1', align:"center", width:100}, 
       {name:'status2',index:'status2', align:"center", width:50}, 
       {name:'status3',index:'status3', align:"center"}, 
       {name:'result',index:'result', align:"center", sortable:false}   
     ], 
     rowNum:10, 
     rowList:[10,20,30], 
     pager: '#pager2', 
     sortname: 'Invoice.id', 
     viewrecords: true, 
     height:'100%', 
     autowidth:true, 
     sortorder: "desc", 
     height: '100%', 
     loadComplete: function() { 
      var ts = this; 
      if (ts.p.reccount === 0) { 
       $(this).hide(); 
       emptyMsgDiv.show(); 
      } else { 
       $(this).show(); 
       emptyMsgDiv.hide(); 
      } 
     } 
    }); 
    emptyMsgDiv.insertAfter($grid.parent()); 
    </script> 

Вот код, у меня есть для моего JqGrid:

<script> 
var $grid = $("#list2"); 
emptyMsgDiv = $("<div><span style='color:red; text-align:center;font-size:18px;display:block;'>No Workorder Found</span></div>"); 
jQuery("#list2").jqGrid({ 
    url:'server.php', 
    datatype: "json", 
    mtype: 'POST', 
    colNames:['WO#','Status','Customer Name','Salesman', 'Created Date', 'WO Total', 'Notes', 'Edit'], 
    colModel:[ 
      {name:'id',index:'id', align:"center"}, 
      {name:'status1',index:'status1', align:"center"}, 
      {name:'status2',index:'status2', align:"center"}, 
      {name:'status3',index:'status3', align:"center"}, 
      {name:'result',index:'result', align:"center", sortable:false}   
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'Invoice.id', 
    viewrecords: true, 
    height:'100%', 
    sortorder: "desc", 
    height: '100%', 
    loadComplete: function() { 
     var ts = this; 
     if (ts.p.reccount === 0) { 
      $(this).hide(); 
      emptyMsgDiv.show(); 
     } else { 
      $(this).show(); 
      emptyMsgDiv.hide(); 
     } 
    } 
}); 
emptyMsgDiv.insertAfter($grid.parent()); 
</script> 

Я пытаюсь сделать ширину colModel жидкости для страницы, я могу изменить ширину вручную для каждого из столбцов, как показано в следующей лакомый:

{name:'status1',index:'status1', align:"center", width:50} 

Однако, я не могу определить проценты, или, кажется, выяснить как сделать жидкость ширина. У кого-нибудь есть идеи?

Answer 1

Прежде всего вы должен добавить опцию autowidth: true, которая устанавливает начальную ширину сетки в ширину внешнего контейнера на странице HTML. Это приведет к изменению размера всех столбцов, пропорциональных величине width, в colModel. Поскольку вы не указываете какое-либо свойство width, тогда используется значение по умолчанию 150. В случае изменения размера это означает, что вы указали ту же самую ширину для всех столбцов. Если для некоторых столбцов требуется фиксированная ширина, например, для столбца с formatter: "actions" (который отображает два значка редактирования в сетке), вы можете добавить fixed: true в столбец.

Чтобы изменить размер сетке каждый раз после того, как в окне веб-браузера или внешний DIV будет изменен вы можете использовать следующий код

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

(см the old answer). существуют

Дополнительные функции в free jqGrid, развилок jqGrid, которые я разрабатываю, начиная с переименованием jqGrid к Guriddo jqGrid JS (см the post) и сделать его коммерческим. Демонстрация: http://jsfiddle.net/OlegKi/andm1299/19/ использует <div class="container"> в качестве внешнего div jqGrid и добавляет classes: "hidden-xs", labelClasses: "hidden-xs" классы начальной загрузки (см. the documentation) в менее важный столбец ComboDuration демо. В результате столбец будет автоматически скрыт/виден при изменении размера сетки. Это может быть очень полезно для получения хороших результатов на мобильных устройствах с низким разрешением пикселей.

Answer 2

вы можете сделать его заполнить страницу с помощью следующего:

Автоширина: правда,

Я также установить минимальные пользовательские ширины для нескольких столбцов, перечисленных выше