web-dev-qa-db-fra.com

Est-il possible de définir la largeur d'un jQGrid en pourcentage?

Est-il possible de définir la largeur d'un jQGrid en pourcentage? Si oui, alors comment?

javascriptjqgridjqgrid-asp.net
14
Amit

Pas directement mais c'est possible ...

Si vous souhaitez définir la largeur de la grille entière sur un pourcentage, vous pouvez utiliser la propriété autowidth pour définir la largeur de la grille sur la largeur de son élément parent (DIV) et définir le pourcentage de cet élément parent.

autowidth: true

Si vous souhaitez définir la largeur des colonnes en pourcentage, vous pouvez utiliser la propriété shrinktofit. La valeur de la largeur de la colonne est alors essentiellement un pourcentage.

shrinkToFit: true

Ces options et beaucoup d'autres peuvent être trouvées sur JQGrid wiki

16
Chad Ferguson

C'est possible de manière très simple:

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

regardez ce code:

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

et ce code:

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

Datatables 3.5+ le supporte via 

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

Quant à moi, j’estime que cette décision est la meilleure:

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

vérifiez la taille de la fenêtre dans jQuery.

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

assurez-vous de définir autowidth: true dans les propriétés de la grille

0
Danger009
 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;
    }
0
Mayur Solanki

Si vous essayez de définir la largeur de la table jqgrid sur votre page HTML, essayez ceci.

HTML

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

JS

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

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

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

Pourcentage calculé dans la référence du wrapper parent de jqGrid.

0
Savan S