Question

我有一个查询我在一个标签引导中使用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>

Answer 1

查看演示http://jsfiddle.net/OlegKi/andm1299/26/和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/和http://jsfiddle.net/OlegKi/andm1299/46/

您没有发布您使用的任何代码，但一般情况下您也应该在标签内执行相同的操作。

选项卡引导程序中的AutoFit宽度jqGrid

1 个答案: