FreeJqGrid :如何在 .show() 事件后调整整个网格的大小

Question

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

第一个div 是可见的，第二个是隐藏的，

当我切换这些div 时，我的网格不是全宽的。请参阅此链接。那么我该如何调整它的大小呢？我在 SOF 中尝试了许多 answser，例如 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();
});

有关在调整窗口大小时调整网格大小的代码示例，请参阅答案和此答案。请参阅演示和此演示。