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

Question

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

Answer 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，其中显示：

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

jqGrid: Search form changed to be flat?

forms

search

jqgrid