Javascript 可以用百分比设置jQGrid的宽度吗？

可以用百分比设置jQGrid的宽度吗？如果是，那么如何做？

不直接，但有可能

如果要将整个网格的宽度设置为百分比，可以使用autowidth属性，它将网格宽度设置为其父元素（即DIV）的宽度，并且该父元素可以设置其百分比

autowidth: true

如果要按百分比设置列宽，可以使用shrinktofit，然后列宽值基本上是百分比

shrinkToFit: true

---

这些选项和许多其他选项都可以在JQGrid上找到，方法非常简单：

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

请看以下代码：

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

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

该代码：

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

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

---

对我来说，我认为这是最好的选择：

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

---

Datatables 3.5+支持通过

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

---

检查jquery中的窗口大小

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

---

请确保在网格属性中设置autowidth:true

如果要在HTML页面上设置jqgrid表的宽度，请尝试以下操作

HTML

<table id="jqGrid" width="98%"></table>

var操作字段宽度=40
函数获取百分比（ask）
{
返回（（screen.width-operationfieldwidth）*ask）/100；
}
$（文档）.ready（函数（$）{
网格绑定（）；
});
函数GridBind（）{
$（“#jqGrid”）.jqGrid({
url:“@（url.Action（“BindRole”、“Role”）”，
数据类型：“json”，
mtype:'获取'，
colNames:[“角色名称”、“角色描述”、“角色名称”]，
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，格式化程序：addLink}
],
寻呼机：jQuery（“#jqControls”），
iconSet：“真棒”，
行数：25，
行列表：[25,50,100,500,1000]，
高度：屏幕高度-490，
viewrecords：是的，
emptyrecords:'没有可显示的记录'，
jsonReader：{
根：“行”，
第页：“第页”，
总计：“总计”，
记录：“记录”，
重复项：false，
Id:“0”
},
自动宽度：正确，
多选：错，
}).navGrid（“#jqControls”{
编辑：false，添加：false，删除：false，搜索：true，
searchtext:“搜索”，刷新：真
}, {}, {}, {},
{
zIndex:100，
标题：“搜索记录”，
sopt:['cn']，
closeAfterSearch：对
});
}
函数addLink（单元格值、选项、行对象）{
var Str=“”
返回Str；
}

$（文档）.ready（函数（）{
风险值百分比=50%；
$（“#jQGridDemo”）.setGridWidth（$（“#jQGridDemo”）.parent（）.width（）*百分比/100）；
});

---

在jqGrid的父包装的引用中计算的百分比。

很抱歉响应太晚。喜欢这个把戏。但是，当用户在不加载页面的情况下更改分辨率或浏览器大小时，它会起作用吗？你能给我任何我能看到的演示网站吗？我是用窗口调整事件实现的。