Javascript 是否可以按百分比设置 jQGrid 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10561452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to set width of a jQGrid in percentage?
提问by Amit
Is it possible to set width of a jQGrid in percentage? If yes, then how?
是否可以按百分比设置 jQGrid 的宽度？如果是，那么如何？
回答by DisplayName
Not directly but it is possible...
不是直接的，但有可能...
If you are wanting to set the width of the entire grid to a percentage you can use the autowidth property and it will set the grids width to the width of it's parent element (i.e. DIV) and that parent element can have it's percentage set.
如果您想将整个网格的宽度设置为百分比，您可以使用 autowidth 属性，它将网格宽度设置为其父元素（即 DIV）的宽度，并且该父元素可以设置百分比。
autowidth: true
If you want to set the column widths by percentage you can use shrinktofit and then your column width values are basically a percentage.
如果你想按百分比设置列宽，你可以使用shrinktofit，然后你的列宽值基本上是一个百分比。
shrinkToFit: true
These options and many others can be found on the JQGrid wiki
这些选项和许多其他选项可以在 JQGrid wiki上找到
回答by marrrecki
It's possible in very simple way:
可以通过非常简单的方式实现：
$(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],
look at this code:
看看这段代码：
var pageWidth = $("#updatesList").parent().width() - 100;
and this code:
和这个代码：
{name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true},
{name:'name',index:'name', width:(pageWidth*(20/100)),
回答by Deepak Thomas
Datatables 3.5+ supports this via
Datatables 3.5+ 通过
jQuery("#dt").jqGrid({
autowidth: true,
shrinkToFit: true
});
回答by Danger009
check window size in jquery.
在 jquery 中检查窗口大小。
$(window).on("resize", function () {
var newWidth = $("#list").closest(".ui-jqgrid").parent().width();
$("#list").jqGrid("setGridWidth", newWidth, true);
});
make sure to set autowidth: true in grid properties
确保在网格属性中设置 autowidth: true
回答by Sergey Bogdanov
As for me, I consider this to be the best deсision:
至于我，我认为这是最好的决定：
// add this after JqGrid creation
$("#YourTableGrid").setGridWidth( Math.round($(window).width(), true) );
回答by TheRealJAG
If you're trying to set the width of the jqgrid table on your HTML page, try this.
如果你想在你的 HTML 页面上设置 jqgrid 表格的宽度，试试这个。
HTML
HTML
<table id="jqGrid" width="98%"></table>
JS
JS
var outerwidth = $("#jqGrid").width();
$("#jqGrid").jqGrid({
width: outerwidth
});
回答by Mayur Solanki
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;
}
回答by Savan S
$(document).ready(function () {
var yourPercentage = 50%;
$("#jQGridDemo").setGridWidth($("#jQGridDemo").parent().width() * yourPercentage/100);
});
$(document).ready(function () {
var yourPercentage = 50%;
$("#jQGridDemo").setGridWidth($("#jQGridDemo").parent().width() * yourPercentage/100);
});
Percentage calculated in the reference of parent wrapper of jqGrid.
在 jqGrid 的父包装器的参考中计算的百分比。
