javascript - 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});

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

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

谢谢!

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 搜索对话框位置的错误)将不存在。查看修改后的演示:

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

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

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