web-dev-qa-db-ja.com

jQGridの幅をパーセンテージで設定することは可能ですか？

JQGridの幅をパーセンテージで設定することは可能ですか？はいの場合、どのように？

javascriptjqgridjqgrid-asp.net
14
Amit

直接ではありませんが、可能です...

グリッド全体の幅をパーセンテージに設定する場合は、autowidthプロパティを使用できます。これにより、グリッドの幅がその親要素（つまり、DIV）の幅に設定され、その親要素にパーセンテージを設定できます。

autowidth: true

列幅をパーセンテージで設定する場合は、shrinktofitを使用できます。列幅の値は基本的にはパーセンテージです。

shrinkToFit: true

これらのオプションと他の多くのオプションはJQGridにあります wiki

16
Chad Ferguson

それは非常に簡単な方法で可能です：

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

Datatables 3.5+はこれをサポートします

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

私については、これが最良の決定であると考えています。

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

jqueryのウィンドウサイズを確認してください。

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

グリッドプロパティでautowidth：trueを設定してください

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

HTMLページでjqgridテーブルの幅を設定しようとしている場合は、これを試してください。

[〜＃〜] 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); });

JqGridの親ラッパーの参照で計算されたパーセンテージ。

0
Savan S