jqgrid 5.0 searchGrid.overlay 使用

在 jqGrid 5.0 中，searchGrid.overlay 属性已经被废弃，取而代之的是 searchGrid.overlayOptions 属性。searchGrid.overlayOptions 属性用于设置搜索对话框中的覆盖层的样式和行为。以下是一个使用 jqGrid 5.0 中 searchGrid.overlayOptions 的示例：

// 创建 jqGrid 对象
$("#grid").jqGrid({
    url: "data.json",
    mtype: "GET",
    datatype: "json",
    colModel: [
        { name: "id", index: "id", width: 50 },
        { name: "name", index: "name", width: 200 },
        { name: "age", index: "age", width: 100 },
        { name: "address", index: "address", width: 300 }
    ],
    pager: "#pager",
    rowNum: 10,
    rowList: [10, 20, 30],
    viewrecords: true,
    caption: "Example jqGrid"
});

// 在搜索对话框中添加覆盖层
$("#grid").jqGrid("navGrid", "#pager", { search: true }, {}, {}, {}, {
    // 设置覆盖层的样式和行为
    overlayOptions: {
        opacity: "0.5",
        background: "black",
        zIndex: "1000",
        top: "0px",
        left: "0px",
        width: "100%",
        height: $(window).height() + "px"
    },
    // 显示覆盖层
    beforeShowSearch: function () {
        $("#grid")[0].triggerToolbar();
        $("#searchmodfbox_" + $("#grid")[0].id).css({
            zIndex: 1001
        });
        $("#searchmodfbox_" + $("#grid")[0].id).show();
        $("#searchmodfbox_" + $("#grid")[0].id).prepend($("<div></div>").attr("id", "overlay").css(searchGrid.overlayOptions));
    },
    // 隐藏覆盖层
    onClose: function () {
        $("#overlay").remove();
    }
});

上述代码中，我们使用 searchGrid.overlayOptions 属性来设置搜索对话框中的覆盖层的样式和行为。在 beforeShowSearch 回调函数中，我们使用 jQuery 将覆盖层元素添加到搜索对话框中，并设置其样式和显示。在 onClose 回调函数中，我们移除了搜索对话框中的覆盖层。