14

Is it possible to set width of a jQGrid in percentage? If yes, then how?

4

8 回答 8

16

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

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

autowidth: true

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

shrinkToFit: true

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

于 2012-05-12T23:44:52.747 回答
16

可以通过非常简单的方式：

$(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)),
于 2013-01-03T19:51:49.947 回答
5

Datatables 3.5+ 通过

      jQuery("#dt").jqGrid({
                autowidth: true,
                shrinkToFit: true
            });
于 2014-04-13T07:55:25.500 回答
1

至于我，我认为这是最好的决定：

// add this after JqGrid creation
$("#YourTableGrid").setGridWidth( Math.round($(window).width(), true) );
于 2014-04-11T07:48:48.463 回答
1

在 jquery 中检查窗口大小。

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

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

于 2016-05-23T20:53:50.963 回答
0

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

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

于 2017-05-05T16:27:49.993 回答
0 
 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;
    }
于 2017-02-07T06:12:59.447 回答
0

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

HTML

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

JS

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

$("#jqGrid").jqGrid({
   width: outerwidth
});
于 2016-12-30T00:14:33.417 回答