JqG​​rid宽度调整大小问题浏览器调整大小

时间:2012-01-12 11:45:50

标签: jqgrid

我可以设置JqGrid宽度,使其自动调整浏览器宽度。

尝试过使用此功能。

  autowidth:true,
  .....
  $(window).bind('resize', function () {
        $("#table").setGridWidth($("#table").width());
    }).trigger('resize');

调整大小没有按预期工作,当我调整浏览器大小时,我希望网格相应地调整为浏览器宽度的大小。

更新:

 $(function () {
        $grid = $("#table");
        $grid.jqGrid({
            url: '../../Services/OrderService.asmx/getGlbOrders',
            datatype: 'json',
            mtype: 'POST',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            serializeGridData: function (postData) {

                if (postData.searchField === undefined) postData.searchField = null;
                if (postData.searchString === undefined) postData.searchString = null;
                if (postData.searchOper === undefined) postData.searchOper = null;
                //if (postData.filters === undefined) postData.filters = null;                   
                return JSON.stringify(postData);
            },

            jsonReader: {
                root: "d.rows",
                page: "d.page",
                total: "d.total",
                records: "d.records",
                id: "d.names"
            },
            colModel: [
                     { name: 'select', label: 'select', width: 50,
                         formatter: function radio(cellValue, option) {
                             return '<input type="radio" name="radio_' + option.gid + '"  value=' + cellValue + ' />';
                         }
                     },
                     { name: 'code', label: 'Order ID' },
                     { name: 'qty', label: 'Quantity' },
                     { name: 'qtyr', label: 'Remaining Qty'},
                     { name: 'uts', label: 'Units' },
                     { name: 'status', label: 'Status' },
                ],


            rowNum: 10,
            rowList: [10, 20, 300],
            sortname: 'name',
            sortorder: "asc",
            pager: "#pager",
            viewrecords: true,
            gridview: true,
            rownumbers: true,
            height: 250,
            autowidth: true,
            caption: 'Global Order List'
        }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });

    })


     $(window).bind('resize', function () {
         $("#table").setGridWidth($("#table").width());
     }).trigger('resize');

1 个答案:

答案 0 :(得分:0)

更改您的代码:

$(function () {
        $grid = $("#table");
        $grid.jqGrid({
            // etc..
        }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });

})

$(window).bind('resize', function () {
    $("#table").setGridWidth($("#table").width());
}).trigger('resize');

为:

$(function () {
        $grid = $("#table");
        $grid.jqGrid({
            // etc..
        }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });

});

$(window).bind('resize', function () {
    $("#table").setGridWidth($("#table").width());
}).trigger('resize');

在jqGrid函数结束后忘记了分号。然后忽略函数之后的代码。