是否可以按百分比设置 jQGrid 的宽度？答案

【问题标题】：Is it possible to set width of a jQGrid in percentage?是否可以按百分比设置 jQGrid 的宽度？
【发布时间】：2012-05-20 15:30:13
【问题描述】：

是否可以按百分比设置 jQGrid 的宽度？如果是，那么如何？

【问题讨论】：

标签： javascript jqgrid jqgrid-asp.net

【解决方案1】：

不是直接的，但有可能……

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

autowidth: true

如果您想按百分比设置列宽，您可以使用 shrinktofit，然后您的列宽值基本上是一个百分比。

shrinkToFit: true

这些选项和许多其他选项可以在 JQGrid wiki 上找到

【讨论】：

【解决方案2】：

这很简单：

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

【讨论】：

抱歉回复晚了。喜欢的伎俩。但是当用户更改分辨率或更改浏览器的大小而不加载页面时，它会起作用吗？你能把我能看到的任何演示网站发给我吗？
我使用窗口调整大小事件实现了它。

【解决方案3】：

Datatables 3.5+ 通过

支持这一点

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

【讨论】：

【解决方案4】：

就我而言，我认为这是最好的决定：

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

【讨论】：

【解决方案5】：

在 jquery 中检查窗口大小。

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

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

【讨论】：

【解决方案6】：

如果您尝试在 HTML 页面上设置 jqgrid 表格的宽度，请尝试此操作。

HTML

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

JS

var outerwidth = $("#jqGrid").width();

$("#jqGrid").jqGrid({
   width: outerwidth
});

【讨论】：

【解决方案7】：

 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;
    }

【讨论】：

【解决方案8】：

$(document).ready(function () { var yourPercentage = 50%; $("#jQGridDemo").setGridWidth($("#jQGridDemo").parent().width() * yourPercentage/100); });

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

【讨论】：