渲染Slickgrid直到调整其某些列的宽度

Question

我正在尝试在对话框中显示的表格中显示表的内容。它无法正常工作：打开对话框时，网格仅显示网格的标题和分页控件：

我可以更改页面，并且不会渲染网格。我只能通过调整任何列的宽度来使其呈现，我不知道是什么事件触发了列调整，我想手动调用它：

我用作网格容器并在对话框中打开的div：

<div id="dlgBitacoraCnfGlobal" style="display:none;">
    <div id="divContenedor" style="width: 100%; height: 95%; overflow: auto;">
    <div style="margin-top: 10px; clear: both;">
        <div id="divBotones" class="toolBarBox" style="padding-top: 5px; float: left;">
            <table>
                <tr>
                    <td><s:message code="general.formatoFecha" />:</td>
                    <td>
                        <label for="fechaInicial"><s:message code="general.fechaInicial.desde" />&nbsp;</label>
                        <input type="text" id="fechaInicial" size="10" maxlength="10"/>&nbsp;&nbsp;
                        <label for="fechaFinal"><s:message code="general.fechaFinal.a"/>&nbsp;</label>
                        <input type="text" id="fechaFinal" size="10" maxlength="10"/>
                    </td>
                </tr>
            </table>
        </div>
        <span id="toolbar" class="ui-widget-header ui-corner-all">
            <aclutil:secBtn pantalla="${nombrePantalla}" domId="btnRefrescar" seguro="false" mensaje="${refres}" />
        </span>
        <div id="divPagerBitacora" style="margin: 5px; clear: both;"></div>
        <div id="divGridBitacora" style="width: 95%; height: 420px; margin: 10px; margin-top: 5px; "></div>
    </div>
</div>
</div>

我用来创建和控制网格的javascript函数：

function initComponents() {
    $('#bitacora', $ctxt).button({
        icons : {
            primary : "ui-icon-clock"
        }
    }).click(function() {
        buscarBitacora();
    });

    initBitacora($ctxt);
}

function consultarBitacoraTab() {
    cargaInicial();
}

function buscarBitacora() {
    var $dialogoBitacora = $("#dlgBitacoraCnfGlobal", $ctxt);
    $dialogoBitacora.dialog({
        autoOpen : false,
        modal : true,
        height : 700,
        width : 1100,
        title : "Bitacora de cambios",
        open : function(event, ui) {
            consultarBitacoraTab();
        },
        close : function(event, ui) {
        },
        buttons : [ {
            text : "Aceptar",
            click : function() {
                var $this = $(this);
                $this.dialog("close");
            }
        } ]
    });
    $dialogoBitacora.dialog("open");
}

function initBitacora($ctxt) {
    $context = $ctxt;
    self = this;
    _fechaInicial = $("#fechaInicial", $ctxt);
    $(_fechaInicial).attr("id", $(_fechaInicial).attr("id") + "_" + _id);
    _fechaFinal = $("#fechaFinal", $ctxt);
    $(_fechaFinal).attr("id", $(_fechaFinal).attr("id") + "_" + _id);
    crearDatePicker();
    var preparar = function () {
        $(":button", $context).button();
        $divGridBitacora = $('#divGridBitacora', $ctxt);
        $divPagerBitacora= $('#divPagerBitacora', $ctxt);
        $btnRefrescar = $("#btnRefrescar", $context);
        $btnRefrescar.click(cargaInicial);
    };

    return $.when(preparar()).done(function () {
        crearGridListado();
        cargaInicial();
    });

    function crearGridListado() {
        var columnas = [];
        var opciones = {
            editable: false,
            enableCellNavigation: true,
            asyncEditorLoading: true,
            autoEdit: false,
            enableAddRow: false,
            forceFitColumns: false,
            enableRowReordering: true,
            rowHeight: 25,
            gridName: "bitacora_configuracion_global",
            enableSearchStringMap: true,
            sortable: true
        };
        fnDescribirGrid({
            url: "/describir/nombrePojo/BitacoraConfiguracionVO/",
            columnas: columnas,
            columnasOmitir: [""],
            callback: function () {
                rgListado = new RemoteGridFactory({
                    divGrid: $divGridBitacora,
                    divPager: $divPagerBitacora,
                    options: opciones,
                    columns: columnas,
                    pagingOptions: {
                        pageSize: tamanoPagina,
                        pagenum: 0
                    },
                    onRunFilter: cargaInicial,
                    onSort: cargaInicial,
                    listarPag:cargarBitacora,
                    onDblClick: function (e, row, cell) {
                        var item = dataViewBitacora.rows[row];
                        creaMensaje({mensaje: item.valor, cssClass: "cell-click",titulo: "Bitacora de cambios", contexto: $ctxt});
                    },
                    onSelectedRowsChanged: function () {
                        var rows = gridBitacora.getSelectedRows();
                        itemSeleccionado = dataViewBitacora.rows[rows[0]];
                    }
                });

                gridBitacora = rgListado.getGrid();
                dataViewBitacora = rgListado.getDataView();
                mapaDeBusqueda = rgListado.getSearchMap();
                paginadorListado = rgListado.getPager();
            }
        });
    }
}


function cargaInicial() {
    var datosConsultados = [];
    datosPagina0 = consultarBitacora(paginaInicial, function(resultado) {
        datosConsultados = resultado.pageItems[1];
        totalNumeroListado = resultado.rowsCount;
    });
    $.when(datosPagina0).done(function() {
        $('#divBotones', $context).unblock();
        if (datosConsultados.length === 0) {
            dataViewBitacora.setItems([], paginaInicial);
            return;
        }
        dataViewBitacora.setItems(datosConsultados, totalNumeroListado);
        gridBitacora.render();
    });
}

function cargarBitacora(pagina) {
    paginadorListado.lock();
    paginadorListado.updateButtons();
    consultarBitacora(pagina, function(resultado) {
        dataViewBitacora.addItems([], pagina);
        dataViewBitacora.addItems(resultado.pageItems[1], pagina);
        paginadorListado.unlock();
        paginadorListado.updateButtons();
        $('#divBotones', $context).unblock();
    });
}

function consultarBitacora(pagina, callback) {
    $('#divBotones', $context).block();
    if (!pagina)
        pagina = paginaInicial;
    var parametrosBusqueda = {
        '@class' : JacksonHelper.HASHMAP,
        filtros : mapaDeBusqueda,
        orden : rgListado.getOrderMap(),
        first : pagina * tamanoPagina,
        page : pagina,
        max : tamanoPagina,
        cadenaBuscada : _cadenaBuscada
    };
    return $.postJSON('/bitacoraHistory/search?fInicial='
            + _fechaInicial.datepicker("getDate").getTime() + "&fFinal="
            + _fechaFinal.datepicker("getDate").getTime(), parametrosBusqueda,
            callback);
}

我的主要目的是理解为什么在调整某些列的宽度之前才生成网格，如果我可以像触发列调整但手动校正时触发的相同事件那样应用“补丁”这个错误。我很乐意提出任何建议来理解和解决问题

Answer 1

只需检查...您是否正在使用6pac回购协议（https://github.com/6pac/SlickGrid）？ MLeibman的原始存储库已维护，现在已经很旧了。例如，如果在运行init时div被隐藏，则可以通过MLeibman存储库获得此行为。 6pac仓库包含许多修复和增强功能，以及使用新版本的jQuery。