使JqGrid宽度流体 [英] Make JqGrid width fluid

问题描述

已更正的代码：

<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的代码：

Here is the code I have for my 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流体宽度，我可以手动更改宽度对于每个列，如下面的tidbit：

I am trying to make the colModel fluid width for the page, I am able to change the width manually for each of the columns as in the following tidbit :

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

但是，我不能定义百分比，如何做流体宽度。

However, I can not define percentages, or seem to figure out how to do fluid width. Does anyone have any ideas?

推荐答案

首先，您应该添加 autowidth：true 选项，它将网格的初始宽度设置为HTML页面上外部容器的宽度。它将强制调整所有与 colModel 中的 width 属性值成比例的大小。因为您不指定任何 width 属性，那么将使用默认的 150 值。在调整大小的情况下，意味着您为所有列指定了相同的宽度。如果你需要为某些列保持一些固定的宽度，例如对于具有 formatter：actions（在网格中显示两个编辑图标）的列，

First of all you should add autowidth: true option, which sets the initial width of the grid to the width of outer container on the HTML page. It will force resizing of all columns proportional of the value of width property in colModel. Because you don't specify any width property then the default 150 value will be used. In case of resizing it means just that you specified the same width for all columns. If you need to hold some fixed width for some columns, for example for the column which have formatter: "actions" (which displays two editing icons in the grid), then you can add fixed: true to the column.

每次在网络浏览器窗口或网页浏览器窗口之后都可以调整网格的大小。外部div将调整大小您可以使用以下代码

To resize the grid every time after the web browser window or the outer div will be resized you can use the following code

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

（请参阅旧答案）。

免费jqGrid ，我开发的jqGrid的叉子开始重命名jqGrid到 Guriddo jqGrid JS （请参阅帖子），并将其设为商业广告。演示： http://jsfiddle.net/OlegKi/andm1299/19/ 使用< div class =container> 作为jqGrid的外部div并添加类：hidden-xs，labelClasses：hidden-xs 引导类（请参阅文档）不太重要列 ComboDuration 。因此，在调整网格大小时，列将自动隐藏/可见。在低像素分辨率的移动设备上产生良好效果非常有用。

Additional features exist in free jqGrid, the fork of jqGrid which I develop starting with renaming jqGrid to Guriddo jqGrid JS (see the post) and making it commercial. The demo: http://jsfiddle.net/OlegKi/andm1299/19/ uses <div class="container"> as the outer div of jqGrid and to add classes: "hidden-xs", labelClasses: "hidden-xs" bootstrap classes (see the documentation) to less important column ComboDuration of the demo. As the result, the column will be made automatically hidden/visible on resizing of the grid. It could be very helpful to produce good results on mobile devices with low pixel resolution.

这篇关于使JqGrid宽度流体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！