使JqGrid宽度流动
更正代码：
var $grid = $("#list2"); emptyMsgDiv = $("No Workorder Found"); 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()); 这是我的JqGrid代码：
var $grid = $("#list2"); emptyMsgDiv = $("No Workorder Found"); 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());
我正在尝试为页面创建colModel流体宽度，我可以手动更改每个列的宽度，如下面的tidbit：
{name:'status1',index:'status1', align:"center", width:50}
但是，我无法定义百分比，或似乎弄清楚如何做流体宽度。 有没有人有任何想法？
首先，您应该添加autowidth: true选项，它将网格的初始宽度设置为HTML页面上外部容器的宽度。 它将强制调整colModel与width属性值成比例的所有列的大小。 因为您没有指定任何width属性，所以将使用默认的150值。 在resize的情况下，它意味着您为所有列指定了相同的宽度。 如果您需要为某些列保留一些固定宽度，例如对于具有formatter: "actions"的列formatter: "actions" （在网格中显示两个编辑图标），则可以向该列添加fixed: true 。
要在Web浏览器窗口或外部divresize后每次调整网格大小，您可以使用以下代码
$(window).bind("resize", function () { var newWidth = $grid.closest(".ui-jqgrid").parent().width(); $grid.jqGrid("setGridWidth", newWidth, true); }).trigger("resize");
（见旧答案 ）。
免费jqGrid中存在其他function，我开发的jqGrid的分支开始于将jqGrid重命名为Guriddo jqGrid JS （参见post ）并使其商业化。 演示： http ： //jsfiddle.net/OlegKi/andm1299/19/使用
作为jqGrid的外部div并添加classes: "hidden-xs", labelClasses: "hidden-xs" bootstrap类（参见文档 ）到不太重要的列ComboDuration的演示。 结果，在调整网格大小时，将自动隐藏/显示该列。 在具有低像素分辨率的移动设备上产生良好结果可能非常有帮助。
您可以使用以下内容填充页面：
autowidth：true，
我还为上面列出的一些列设置了最小自定义宽度