Autofit ширина jqGrid в пределах вкладки bootstrap

У меня есть запрос я использую jqGrid в пределах загрузки вкладки и представить недостаток, что сетка не саморегулируется размер вкладки, он значительно расширен, есть способ сделать сетку соответствовать максимальному размеру вкладки boostrap

var info = datos; $("#gvsDetalleRevisionErradicar").jqGrid("GridUnload");
        var grid = $("#gvsDetalleRevision").jqGrid({
            datastr: info,
            datatype: 'jsonstring',
            height: "300",
            //width: newWidth2,
            rowNum: 1000000,
            multiselect: true,
            ignoreCase: true,
            autowidth: true,
            shrinkToFit: false,
            //forceFit: true,
            colNames: ['Siembra', 'Lote', 'Linea', 'Palma', 'Fecha Cuarentena', 'Dias en cuarentena', 'Fecha revision', 'Dias desde revision', 'No veces erradicada', 'No veces revisada'],
            colModel: [
                { label: 'Siembra', name: 'Siembra', resizable: false},
                { label: 'Lote', name: 'Lote', resizable: false},
                { label: 'Linea', name: 'Linea', resizable: false},
                { label: 'Palma', name: 'Palma', resizable: false},
                { label: 'FechaErradicacion', name: 'FechaErradicacion', resizable: false},
                { label: 'DiasCuarentena', name: 'DiasCuarentena', resizable: false},
                { label: 'FechaRevision', name: 'FechaRevision', resizable: false},
                { label: 'DiasDesdeRevision', name: 'DiasDesdeRevision', resizable: false},
                { label: 'NoVecesErradicada', name: 'NoVecesErradicada', resizable: false},
                { label: 'NoVecesRevisada', name: 'NoVecesRevisada', resizable: false}
            ],
            caption: "Listado de palmas en cuarentena",
            onSelectRow: function (id) {
                var p = this.p, item = p.data[p._index[id]];
                if (typeof (item.cb) === "undefined") {
                    item.cb = true;
                } else {
                    item.cb = !item.cb;
                }
            },
            onSelectAll: function (id, status) {
                for (i = 0; i < id.length; i++) {
                    var p = this.p, item = p.data[p._index[id[i]]];
                    item.cb = status;
                }
            },
            loadComplete: function () {
                var p = this.p, data = p.data, item, $this = $(this), index = p._index, rowid;
                for (rowid in index) {
                    if (index.hasOwnProperty(rowid)) {
                        item = data[index[rowid]];
                        if (typeof (item.cb) === "boolean" && item.cb) {
                            $this.jqGrid('setSelection', rowid, false);
                        }
                    }
                }
            },
        });
        jQuery("#gvsDetalleRevision").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });

Это под этим кодом

                <div class="row">
                    <div class="col-xs-12 col-md-12 col-lg-12">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#tabrevision" class="descripciones linksTabs" aria-controls="tabrevision" role="tab" data-toggle="tab">Revisión</a></li>
                            <li role="presentation"><a href="#tabrenovacion" class="descripciones linksTabs" aria-controls="tabrenovacion" role="tab" data-toggle="tab">Renovación</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="tabrevision">
                                <div class="container">
                                    <div class="row">
                                        <div class="row">
                                            <div id="mensajeTabRevision" class="alert fade in alert-danger" style="display: none;" onclick="ocultar()">
                                                <i class="icon-remove close" data-dismiss="alert"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Fin fila -->
                                    <div class="row">
                                        <div class="col-xs-12 col-md-12 col-lg-12">
                                            <table id="gvsDetalleRevision"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                       </div>
                 </div>

1 ответ

  1. Посмотрите на демо http://jsfiddle.net/OlegKi/andm1299/26 / and http://jsfiddle.net/OlegKi/andm1299/37/ который показывает, как развернуть сетку при изменении размера внешнего контейнера:

    $(window).bind("resize", function () {
        $grid.jqGrid("setGridWidth",
            $grid.closest(".container-fluid").width()
        );
    });
    

    Те же демо, работает с Bootstrap только CSS: http://jsfiddle.net/OlegKi/andm1299/45 / and http://jsfiddle.net/OlegKi/andm1299/46/

    Вы не опубликовали код, который вы используете, но в целом вы должны сделать то же самое внутри вкладки тоже.