free-jqGrid 搜索按钮在第二次单击时不起作用

Question

搜索按钮在第一次点击时有效，但一旦通过单击 X（关闭按钮）或通过运行搜索（设置为搜索后关闭）将其关闭，它就不会打开，那里控制台中也没有错误，因此我无法确定出了什么问题以及如何修复它。

var previouslySelectedRow = null;
var rowIsSelected = null;
var previousRowIsSelected = null;
var currentRowId;
var currentCount;
var cancelEditing = function(theGrid) {
    var lrid;
    if (typeof previouslySelectedRow !== "undefined") {
        // cancel editing of the previous selected row if it was in editing state.
        // jqGrid hold intern savedRow array inside of jqGrid object,
        // so it is safe to call restoreRow method with any id parameter
        // if jqGrid not in editing state
        theGrid.jqGrid('restoreRow', previouslySelectedRow);

        // now we need to restore the icons in the formatter:"actions"
        lrid = $.jgrid.jqID(previouslySelectedRow);
        $("tr#" + lrid + " div.ui-inline-edit").show();
        $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
    }
};

var parsedResult = JSON.parse(DecodeAscii(result));
ShowDebugNotification("DEBUG INFO(" + ajaxCall + "): <br />" + result, false);
$("#productsTable").jqGrid({
        data: parsedResult,
        datatype: "local",
        loadonce: true,
        height: 'auto',
        marginLeft: 'auto',
        colNames: [
            'Product Id', 'Add', 'Product Name', 'Product Code', 'Customer Price'
        ],
        colModel: [
            { name: 'Id', width: 0, hidden:true },
            { name: "actions", template: "actions", width: 50, formatoptions:{
                delbutton: false,
                editbutton: false
            } },
            { name: 'Name', index: 'Name', width: 550, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
            { name: 'ProductCode', index: 'ProductCode', width: 150, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
            { name: 'Price', index: 'Price', width: 100, search: false, formatter: 'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}}
        ],
        rowNum: 15,
        rowList: [5, 10, 15, 20],
        pager: true,
        gridView: true,
        viewrecords: true,
        iconSet: "jQueryUI",
        sortname: 'Name',
        sortorder: 'asc',
        inlineEditing: { keys: false },
        actionsNavOptions: {
            addToCarticon: "ui-icon-cart",
            addToCarttitle: "Add item to the cart",
            custom: [
                { action: "addToCart", position: "first", onClick: function (options) { 
                    var rowData = $('#productsTable').getRowData(options.rowid);
                    var cartButton = $(".ui-icon", "#jAddToCartButton_"+options.rowid);
                    if(cartButton.hasClass("ui-icon-cancel")){
                        cart.shift(rowData);
                        cartButton.removeClass("ui-icon-cancel");
                        cartButton.addClass("ui-icon-cart");
                    }
                    else if(cartButton.hasClass("ui-icon-cart")){
                        cart.push(rowData);
                        cartButton.removeClass("ui-icon-cart");
                        cartButton.addClass("ui-icon-cancel");
                    }
                }
            }]
        },
        loadComplete: function() {
            $("#add-product-dialog-loading-message").hide();
            $(".spinner").hide();
            $("#add-product-dialog-form").dialog("open");

            //for each object in cart
            //if prodcut ID matches product Id in product 
            //grid then set button to a cancel icon
            if(cart.length !== 0){
                var cartIds = [];
                var jsonCart = JSON.stringify(cart);
                var parsedJsonCart = JSON.parse(jsonCart);
                var productsInCart = $.grep(parsedJsonCart, function(el, i){
                    cartIds.push(el.Id);
                });

                var currentRows = $('#productsTable').getRowData();
                var shownProductsThatAreInCart = $.grep(currentRows, function (el, i) {
                    return $.inArray(el.Id, cartIds) !== -1;
                });

                if(shownProductsThatAreInCart.length > 0){
                    var rowIds = $(this).jqGrid('getDataIDs');
                    $.each(rowIds, function(k, v) {
                        rowData = $('#productsTable').getRowData(v);

                        if($.inArray(rowData['Id'], cartIds) !== -1){
                            alert("Matched Product:\nRowData['id'] = " + rowData['Id'] + "\nto\nProduct in cart: " + cartIds.Id);
                            $(".ui-icon", "#jAddToCartButton_"+v).removeClass("ui-icon-cart");
                            $(".ui-icon", "#jAddToCartButton_"+v).addClass("ui-icon-cancel");
                        }
                    });
                }
            }
        },
        gridComplete: function() {
        }
    });
    $("#productsTable").jqGrid("navGrid", {edit:false,add:false,del:false},
    {},// use default settings for edit
    {},// use default settings for add
    {},// delete instead that del:false we need this
    {multipleSearch:false,overlay:false,ignoreCase:true,closeAfterSearch:true,closeOnEscape:true,showQuery:true});

我不认为这是一个错误，因为我已经看到很多演示它应该如何工作的演示，我猜我的配置有误，请查看我的代码并帮助确定问题。

要记住的一件事是我通过 ajax 调用 returns json 获取数据以加载网格，所有操作都在客户端完成，那里根本没有将数据发回服务器。

谢谢！

Answer 1

主要问题是您使用的搜索选项组合：

{
    multipleSearch: false, // it's default and can be removed
    overlay: false, // !!! the option make the problem
    ignoreCase: true, // it's not exist at all
    closeAfterSearch: true,
    closeOnEscape: true,
    showQuery: true
}

选项 overlay: false 的用法很糟糕，因为它使另一个选项 toTop: true 不起作用，搜索对话框将作为 jQuery UI 的子项放置对话。如果删除该选项，则可以更轻松地使用搜索对话框，第二个问题（计算 jqGrid 搜索对话框位置的错误）将不存在。查看修改后的demo：

https://jsfiddle.net/OlegKi/su7mf5k9/3/

更新： 在 modal[=30= 中创建 modal jqGrid 对话框似乎有问题] jQuery UI 对话框。这个问题可以通过从外部 jQuery UI 对话框中删除 modal: true 选项来解决。参见 https://jsfiddle.net/OlegKi/su7mf5k9/3/

一般来说，可以创建混合解决方案，将 jQuery UI 对话框的类型从模态动态更改为非模态，但这可能很棘手 https://jsfiddle.net/OlegKi/su7mf5k9/5/

free-jqGrid 搜索按钮在第二次单击时不起作用

free-jqGrid search button does not work on second click

javascript

jquery

jqgrid

free-jqgrid