jqGrid: форма поиска изменилась, чтобы быть плоской? - search


1

Это тема, основанная на "jqGrid - изменить форму поиска/всплывающего окна - быть плоской на странице, а не диалогом". Я сделал форму поиска плоской в ​​зависимости от темы, но сейчас я хочу не показывать всегда на странице, я хочу показать ее только тогда, когда пользователь нажимает кнопку "Поиск" из jqGrid. Может ли кто-нибудь дать мне подсказку или решение, как это сделать, пожалуйста? @Олег, можешь ты мне помочь, пожалуйста? Благодаря

  •  23
  •  1
  • 8 фев 2020 2020-02-08 08:05:32

1 ответ

2

Th решение может быть очень близко к старому. Вы можете использовать следующие параметры диалогового окна поиска:

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 и другие) в зависимости от ваших предпочтений.

Демо отображает диалоговое окно поиска, например

введите описание изображения здесь

Если вы предпочитаете использовать 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"});
}

Смотрите демо, в котором отображается:

введите описание изображения здесь

  • 8 фев 2020 2020-02-08 08:05:33