bootstrap的col里面同时有几个jqgrid,调整分辨率后怎么动态修改jqgrid的table宽度沾满一行

发布于 2022-09-05 02:42:35 字数 4980 浏览 15 评论 0

1.在container-fluid中的row中嵌入三列,我想在调整屏幕分辨率到xs的时候改变jqgrid中的table的宽度使之占满一行，怎么做呢？初始化的宽度是在js里面设置的。
现在屏幕分辨率小于768的时候是这样的：
图片描述
html:

<body style="padding-top:10px;">
    <div class="container-fluid">
        <div class="row">
         <div class="col col-md-4 col-sm-12 col-xs-12" style="padding-right:0;">
                 <table id="Grid1"></table>
                <div id="Page1"></div>
            </div>
             <div class="col col-md-4 col-sm-12 col-xs-12" style="padding-right:0;">
                 <table id="Grid2"></table>
                <div id="Page2"></div>
            </div>
             <div class="col col-md-4 col-sm-12 col-xs-12" style="padding-right:0;">
                 <table id="Grid3"></table>
                <div id="Page3"></div>
            </div>
        </div>
    </div>
</body>

js: (grid2,grid3也是一样的)

        $(document).ready(function () {
            var gridWidth = Math.floor(($(".col").width()) );
            var gridHeight = Math.floor($(window).height()) - 160;
            var unitTypeOpt = getjQGridOption('Nation');
            $("#Grid1").jqGrid({
                url: '#',
                editurl: '../ajaxAshx/funcUnitAgent/UnitList.ashx',
                styleUI: 'Bootstrap',
                datatype: "json",
                colModel: [
                            { label: "单位代码", name: 'agentuid', width: 100, fixed: true, frozen: true, stype: 'text', sortable: true, editable: false, editoptions: { maxlength: 18 } },
                            { label: "单位名称", name: 'unitName', width: 250, editable: true },
                            {
                                label: "录入时间", name: 'operateTime', width: 100, editable: true, edittype: "text",
                                editoptions: {
                                    // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                                    // use it to place a third party control to customize the toolbar
                                    dataInit: function (element) {
                                        $(element).datepicker({
                                            autoclose: true,
                                            format: 'yyyy-mm-dd',
                                            orientation: 'bottom'
                                        });
                                    }
                                }
                            },
                            { label: "单位地域", name: 'unitAddressAera', width: 190, editable: true },
                            { label: "单位地址", name: 'unitAddress', width: 220, editable: true },
                            { label: "单位电话", name: 'unitPhone', width: 120, editable: true },
                            { label: "传真", name: 'unitFax', width: 120, editable: true },
                            {
                                label: "类型", name: 'unitType', width: 80, editable: true,
                                edittype: "select", formatter: "select", editoptions: { value: unitTypeOpt }
                            },
                            { label: "单位性质", name: 'unitBelong', width: 90, editable: true }
                ],
                rowNum: 50,
                loadonce: true,
                shrinkToFit: false, // must be set with frozen columns, otherwise columns will be shrank to fit the grid width
                width: gridWidth,
                height: gridHeight,
                sortorder: 'desc',
                caption: "单位用户列表",
                //altRows: true,
                rownumbers: true,
                multiselect: true,
                //multikey:'ctrlKey',
                multiboxonly: true,
                //hoverrows:false,
                viewrecords: true,
                //scrollPopup: true,
                //scrollLeftOffset: "83%",
                //scroll:1,
                pager: "#Page1",
                loadComplete: function () {
                    //$(this).jqGrid('setSelection', 1, true);
                    $("#Grid1").setGridWidth(gridWidth - 15).setGridHeight(gridHeight - 78);
                    //$(".ui-row-ltr").css('height', '20px');
                    $("#Grid1").jqGrid('setSelection', lastSelection, true);
                    //$("[role='gridcell']").css('height','100%');
                },
                onSelectRow: function (rowid) {
                    lastSelection = rowid;
                    $("#Grid1").saveOldValues(rowid);  
                },
                ondblClickRow: function (rowid) {
                    myGridEditRow(rowid);
                }
            });

分享到QQ

分享到微博