jqGrid：搜索表单改为扁平化？答案

【问题标题】：jqGrid: Search form changed to be flat?jqGrid：搜索表单改为扁平化？
【发布时间】：2016-07-21 01:24:55
【问题描述】：

这是一个基于 "jqGrid - Change filter/search pop up form - to be flat on page - not a dialog" 的主题。我已经根据主题使搜索表单变得平坦，但是现在我不想总是在页面上显示，我只想在用户按下 jqGrid 中的搜索按钮时显示它。谁能给我一个提示或解决方案如何做到这一点，好吗？ @Oleg 你能帮我吗？谢谢

【问题讨论】：

标签： forms search jqgrid

【解决方案1】：

解决方案可能非常接近旧解决方案。您可以使用搜索对话框的以下选项：

overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
    var $searchDialog = $form.closest(".ui-jqdialog"),
        $gbox = $(this).closest(".ui-jqgrid");

    $searchDialog.insertBefore($gbox);
    $searchDialog.css({
        position: "relative",
        zIndex: "auto",
        float: "left"
    })
    $gbox.css({clear:"left"});
}

其他选项（如closeOnEscape: true, closeAfterSearch: true, closeAfterReset: true, searchOnEnter: true, searchOperators: true 和其他）可以根据您的喜好选择。

The demo 显示搜索对话框

如果您更喜欢使用 Bootstrap CSS 而不是 jQuery UI CSS，那么应该添加一些额外的行：

overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
    var $searchDialog = $form.closest(".ui-jqdialog"),
        $gbox = $(this).closest(".ui-jqgrid");

    $searchDialog.insertBefore($gbox);
    $searchDialog.css({
        position: "relative",
        zIndex: "auto",
        padding: 0,
        float: "left"
    });
    $searchDialog.children(".modal-dialog").css({
        marginTop: 0,
        marginBottom: 0
    });
    $searchDialog.find(".modal-content").css({
        boxShadow: "none"
    });
    $gbox.css({clear:"left"});
}

查看the demo，其中显示：

【讨论】：

非常感谢您的解决方案！