免费 JqGrid：如何在 .show() 事件后调整整个网格的大小

Question

我使用 FreeJqGrid，但无法解决我的问题。我有两个 div，一个用于收集信息，另一个用于在 freejqGrid 中显示此收集的结果。

第一个 div 可见，第二个隐藏，当我切换这些 div 时，我的网格不是全宽的。看到这个 Link。那么我该如何调整它的大小呢？我在 SOF 中尝试了很多答案，例如 grid.trigger('resize') 但没有任何效果。这是我构建网格的方式：

grid.jqGrid({
    data: myData,
    colNames: ["Matricule","ID CICP","Nom Prénom", "N° de Sécurité Sociale", "Date entée", "Date sortie",  "Adhérent"],
    colModel: [
        {
            name: "matricule", template: 'string', align:'center'
        },
        {
            name: "idEmpl", template: 'string', align:'center'
        },
        {
            name: "name", template: 'string', align:'center',
            jsonmap: function (item) {
                return item.name.first + " " + item.name.last;
            },
            sorttype: function (cell) {
                return cell.last + " " + cell.first;
            }
        },
        {
            name: "numSecu", template: 'string', align:'center'
        },
        {
            name: "dateEntree", formater: 'date', sorttype: "date", formatoptions:{newformat: 'dd-mm-yy'}, align:'center'
        },
        {
            name: "dateSortie", formater: 'date', sorttype: "date", formatoptions:{newformat: 'dd-mm-yy'}, align:'center'
        },
        {
            name: "adherent", template: 'string', align:'center'
        }
    ],
    onSelectRow: function(rowid){
        //blabla
    },
    autowidth: true,
    sortname: "name",
    shrinkToFit: false
});

只有当我使用 jQuery 的 .show() 和 .hide() 事件时才会出现此问题。

Answer 1

您可以使用 onShowHideCol 回调或 "jqGridShowHideCol" 事件在 showCol 或 hideCol 之后执行某些操作。例如你可以使用

var resizeGrid = function () {
        grid.jqGrid("setGridWidth", grid.closest(".ui-jqgrid").parent().width());
    };

// resize the grid on showing/hiding columns
grid.bind("jqGridShowHideCol", function () {
    resizeGrid();
});

// resize the grid on resizing the window
$(window).bind("resize", function () {
    resizeGrid();
});

见 and for code examples about resizing the grid on resizing the window. See the demo and this one。

免费 JqGrid：如何在 .show() 事件后调整整个网格的大小

FreeJqGrid : How to resize the whole grid after a .show() event

jquery

jqgrid

free-jqgrid