jqGrid：搜索表单变为扁平化了吗？

Question

这是一个基于＆＃34; jqGrid - Change filter/search pop up form - to be flat on page - not a dialog＆＃34; 。 我根据主题将搜索表单设置为平面，但是现在我想不要总是在页面上显示，我只想在用户按下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：