jquery - Jqgrid 搜索工具栏和网格工具栏同步合二为一。与服务器端调用

Question

它正在工作，但问题是工具栏没有选择我搜索的值。当我们按下回车键时它会被移除。

我认为这是我的 jqgrid 库版本问题。我已经尝试使用 4.4.* lib，它工作正常。

function createGrid(gridName,module_settings) {
    var gridObj = $("#" + gridName);
    //var storageName = "filters";
    var  cm = [{
                name: 'state_id',
                index: 'AC.iStateId',
                width: '20%',
                sorttype: 'int'
            },
            {
                name: 'state_name', 
                index: 'AC.vState', 
                sortable: true,
                editable: true, 
                edittype: 'text', 
                editrules: { required: true }, 
                formoptions: { elmprefix: '* ' }, 
                //searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']},
                formatter: 'dynamicLink',
                formatoptions: {
                    //http://viraltechnolab.com/company.php#/country?m=add&mode=popup
                    url: function (cellValue, rowId, rowData) {
                        // common editing params
                        return urlgenerator(module_settings,'edit',rowData.state_id);
                    },
                    cellValue: function (cellValue, rowId, rowData) {
                        return cellValue /*+ ' (rowId=' + rowId + ', tax=' + rowData.tax + ')'*/;
                    },
                    onClick: function (rowId, iRow, iCol, cellValue, e) {
                        //alert('clicked in rowId=' + rowId + ', iRow=' + iRow + ', iCol=' + iCol);
                    }
                },
                cellattr: function (rowId, cellValue, rawObject) {                            
                    var attribute = 'data-uid="' + rawObject.state_id;
                    if (rawObject.closed) {
                        attribute += ' (closed)';
                    }
                    return attribute + '"';
                },
            },
            {
                name: 'coutry_name',
                index: 'AC1.vCountry',
                editable: true,
                edittype: "text",
                editrules: { required: true }, 
                editoptions: {
                    // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                    // use it to place a third party control to customize the toolbar
                    dataInit: function (element) {
                        window.setTimeout(function () {
                            $(element).autocomplete({
                                id: 'AutoComplete',
                            source: function(request, response){
                                this.xhr = $.ajax({
                                    url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName',
                                    data: request,
                                    dataType: "jsonp",
                                    success: function( data ) {
                                        response( data );
                                    },
                                    error: function(model, response, options) {
                                        response([]);
                                    }
                                });
                            },
                            autoFocus: true
                            });
                        }, 100);
                    }
                }
            }
        ],
    $grid = gridObj,
    myColumnsState ,
    isColState,
    initDateSearch = function (elem) {
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                autoSize: true,
                //showOn: 'button', // it dosn't work in searching dialog
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true,
                onSelect: function () {
                    if (this.id.substr(0, 3) === "gs_") {
                        setTimeout(function () {
                            $grid[0].triggerToolbar();
                        }, 50);
                    } else {
                        // to refresh the filter
                        $(this).trigger('change');
                    }
                }
            });
        }, 100);
    },        
    numberSearchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'],
    numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number',
    searchoptions: { sopt: numberSearchOptions }},
    myDefaultSearch = 'cn',    
    getColumnIndex = function (grid, columnIndex) {
        var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
        for (i = 0; i < l; i++) {
            if ((cm[i].index || cm[i].name) === columnIndex) {
                return i; // return the colModel index
            }
        }
        return -1;
    },    
    refreshSerchingToolbar = function ($grid, myDefaultSearch) {
        var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l,
            rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'),
            cmi, control, tagName;

        for (i = 0, l = cm.length; i < l; i++) {
            control = $("#gs_" + $.jgrid.jqID(cm[i].name));
            if (control.length > 0) {
                tagName = control[0].tagName.toUpperCase();
                if (tagName === "SELECT") { // && cmi.stype === "select"
                    control.find("option[value='']")
                        .attr('selected', 'selected');
                } else if (tagName === "INPUT") {
                    control.val('');
                }
            }
        }

        if (typeof (postData.filters) === "string" &&
                typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) {

            filters = $.parseJSON(postData.filters);
            if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") {
                // only in case of advance searching without grouping we import filters in the
                // searching toolbar
                rules = filters.rules;
                for (i = 0, l = rules.length; i < l; i++) {
                    rule = rules[i];
                    iCol = getColumnIndex($grid, rule.field);
                    if (iCol >= 0) {
                        cmi = cm[iCol];
                        control = $("#gs_" + $.jgrid.jqID(cmi.name));
                        if (control.length > 0 &&
                                (((typeof (cmi.searchoptions) === "undefined" ||
                                typeof (cmi.searchoptions.sopt) === "undefined")
                                && rule.op === myDefaultSearch) ||
                                  (typeof (cmi.searchoptions) === "object" &&
                                      $.isArray(cmi.searchoptions.sopt) &&
                                      cmi.searchoptions.sopt.length > 0 &&
                                      cmi.searchoptions.sopt[0] === rule.op))) {
                            tagName = control[0].tagName.toUpperCase();
                            if (tagName === "SELECT") { // && cmi.stype === "select"
                                control.find("option[value='" + $.jgrid.jqID(rule.data) + "']")
                                    .attr('selected', 'selected');
                            } else if (tagName === "INPUT") {
                                control.val(rule.data);
                            }
                        }
                    }
                }
            }
        }
    },
    saveObjectInLocalStorage = function (storageItemName, object) {
        if (typeof window.localStorage !== 'undefined') {
            window.localStorage.setItem(storageItemName, JSON.stringify(object));
        }
    },
    removeObjectFromLocalStorage = function (storageItemName) {
        if (typeof window.localStorage !== 'undefined') {
            window.localStorage.removeItem(storageItemName);
        }
    },
    getObjectFromLocalStorage = function (storageItemName) {
        if (typeof window.localStorage !== 'undefined') {
            return JSON.parse(window.localStorage.getItem(storageItemName));
        }
    },
    myColumnStateName = 'ColumnChooserAndLocalStorage1.colState',
    saveColumnState = function (perm) {
        var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName,
            postData = this.jqGrid('getGridParam', 'postData'),
            columnsState = {
                search: this.jqGrid('getGridParam', 'search'),
                page: this.jqGrid('getGridParam', 'page'),
                sortname: this.jqGrid('getGridParam', 'sortname'),
                sortorder: this.jqGrid('getGridParam', 'sortorder'),
                permutation: perm,
                colStates: {}
            },
            colStates = columnsState.colStates;

        if (typeof (postData.filters) !== 'undefined') {
            columnsState.filters = postData.filters;
        }

        for (i = 0; i < l; i++) {
            colItem = colModel[i];
            cmName = colItem.name;
            if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
                colStates[cmName] = {
                    width: colItem.width,
                    hidden: colItem.hidden
                };
            }
        }
        saveObjectInLocalStorage(myColumnStateName, columnsState);
    },
    restoreColumnState = function (colModel) {
        var colItem, i, l = colModel.length, colStates, cmName,
            columnsState = getObjectFromLocalStorage(myColumnStateName);

        if (columnsState) {
            colStates = columnsState.colStates;
            for (i = 0; i < l; i++) {
                colItem = colModel[i];
                cmName = colItem.name;
                if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
                    colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]);
                }
            }
        }
        return columnsState;
    },
    firstLoad = true;

    myColumnsState = restoreColumnState(cm);
    isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;        
    //localStorage.clear();

    gridObj.jqGrid({
        url: BASE_URL+'.php?c='+module_settings.module_code+'&m=data',
        datatype: "json",
        autowidth: true,
        fixed: true,
        toppager: true,
        pagerpos : "center",
        recordpos : "left",
        pager : '#gridpager',        
        mtype: "POST",
        autoencode: true,
        colNames: ['ID', 'State Name', 'Country'],
        colModel: cm,
        loadonce: false,
        beforeRequest: function () {
            /*
            var $self = $(this),
                postData = $self.jqGrid("getGridParam", "postData"),
                filters = postData.filters,
                paramNames = $self.jqGrid("getGridParam", "prmNames"),
                dataType = $self.jqGrid("getGridParam", "datatype"),
                lastFilter = localStorage[storageName];

            // one can add in the below condition testing of dataType === "json" if one need to set
            // the filter on loading the data from the server only
            if ((filters === null || filters === "" || filters === undefined) && lastFilter !== undefined) {
                // current filter is not set, but it exists in localStorage
                // we need to applay it
                postData.filters = lastFilter;

                // set _search parameter to true
                postData[paramNames.search] = true;
            }
            */

            return true;
        },


        navOptions: { reloadGridOptions: { fromServer: true } },
        rowNum: (module_settings.listing.defaul_load_rows > 0) ? module_settings.listing.defaul_load_rows : 50,
        rowList: (module_settings.listing.defaul_paggination_values.length > 1) ? module_settings.listing.defaul_paggination_values : [10,20,30,50,75,100,200],        

        page: isColState ? myColumnsState.page : 1,
        search: isColState ? myColumnsState.search : false,
        postData: isColState ? { filters: myColumnsState.filters } : {},
        sortname: isColState ? myColumnsState.sortname : (module_settings.listing.default_field_id !== '') ? module_settings.listing.default_field_id : 'state_id',
        sortorder: isColState ? myColumnsState.sortorder : (module_settings.listing.default_field_order !== '') ? module_settings.listing.default_field_order : 'desc',

        viewrecords: (module_settings.listing.is_total_views == 1) ? true : false,
        multiselect: (module_settings.listing.is_multi_select == 1) ? true : false,
        pgbuttons : (module_settings.listing.is_pagination_buttons == 1) ? true : false,
        cellEdit: (module_settings.listing.is_inline_edit == 1) ? true : false,
        cellsubmit: 'clientArray',
        rownumbers : (module_settings.listing.is_row_numbers == 1) ? true : false,
        colMenu : (module_settings.listing.is_column_menu == 1) ? true : false,
        altRows : (module_settings.listing.is_alt_rows == 1) ? true : false,
        loadComplete: function() {
            /*
            var filters = $(this).jqGrid("getGridParam", "postData").filters;
            if (filters !== null && filters !== "" && filters !== undefined) {
                //alert($(this).jqGrid('getGridParam', 'records'));
                $("#refresh_toolbar_top").addClass('reset-search-custom');                
                $("#refresh_toolbar_top").append("<div class='result-count'>"+$(this).jqGrid('getGridParam', 'records')+"</div>");
                localStorage[storageName] = filters;
            }
            */
            var $this = $(this);
            if (firstLoad) {
                firstLoad = false;
                if (isColState) {
                    $this.jqGrid("remapColumns", myColumnsState.permutation, true);
                }
                if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) {
                    // create toolbar if needed
                    $this.jqGrid('filterToolbar', {
                        stringResult: true,
                        searchOnEnter: true,
                        enableClear: true,
                        defaultSearch: myDefaultSearch
                    });
                    alert('1');
                    console.log(myDefaultSearch);
                }
            }
            refreshSerchingToolbar($this, myDefaultSearch);
            saveColumnState.call($this, this.p.remapColumns);
            resizeGrid(gridObj);
        },
        resizeStop: function () {
            saveColumnState.call($grid, $grid[0].p.remapColumns);
        }        
    });
    $.extend($.jgrid.search, {
        multipleSearch: true,
        multipleGroup: true,
        recreateFilter: true,
        closeOnEscape: true,
        closeAfterSearch: true,
        overlay: 0
    });
    // column chsoser

    jQuery("#" + gridName).jqGrid('navGrid', '#toolbar_toppager', {
        del: (module_settings.listing.is_row_grid_delete == 1) ? true : false,
        add: (module_settings.listing.is_row_grid_add == 1) ? true : false,
        edit: (module_settings.listing.is_row_grid_edit == 1) ? true : false,
        search:(module_settings.listing.is_search == 1) ? true : false,
        refresh: (module_settings.listing.is_refresh == 1) ? true : false,
        beforeRefresh: function(){
            console.log("beforeRefresh");
            localStorage.clear();
            $(".result-count").hide();
        },
        afterRefresh: function(){
            console.log("afterRefresh");            
            //setTimeout(function(){  
                localStorage.clear();
                jQuery("#" + gridName).trigger('reloadGrid');
                $("#refresh_toolbar_top").removeClass('reset-search-custom'); 
                removeObjectFromLocalStorage(myColumnStateName);
                window.location.reload();
            //}, 500);
        },
    },
     {}, {}, {}, {
        multipleSearch: (module_settings.listing.is_multiple_search == 1) ? true : false,
    });

    // toggle search bar
/*    if(module_settings.listing.is_column_filter == 1){
        jQuery("#" + gridName).jqGrid('filterToolbar', {
            stringResult: true,
            searchOnEnter: true,
            enableClear: true
        });
        (module_settings.listing.def_open_filter == 0) ? gridObj[0].toggleToolbar() : '';
        // default close
        jQuery("#" + gridName).jqGrid('navButtonAdd', "#toolbar_toppager", {
            caption: "",
            id: 'is_column_filter',
            title: "Toggle Search Toolbar",
            buttonicon: 'fa fa-filter',
            onClickButton: function() {
                gridObj[0].toggleToolbar()
            }
        });
    }    */
    if(module_settings.listing.is_add == 1){
        jQuery("#" + gridName).jqGrid('navButtonAdd', "#toolbar_toppager", {
            caption: "",
            id: 'addNew',
            title: "Add New",
            buttonicon: 'fas fa-plus',
            position: "first",
            onClickButton: function() {
               window.location.href = urlgenerator(module_settings,'add');

            }
        });  
    }

    jQuery("#" + gridName).jqGrid('navButtonAdd', "#toolbar_toppager", {
        caption: '',
        id: 'printPage',
        title: "Print",
        buttonicon: 'fas fa-print',
        position: "last",
        onClickButton: function() {
            jQuery("#" + gridName).jqGrid("exportToHtml",{
                includeLabels : true,
                includeGroupHeader : true,
                includeFooter: true,
                autoPrint : true
            });
        }
    });  

    jQuery("#" + gridName).jqGrid('navButtonAdd', "#toolbar_toppager", {
        caption: '',
        id: 'exportPDF',
        title: "Download PDF",
        buttonicon: 'far fa-file-pdf',
        position: "last",
        onClickButton: function() {

                jQuery("#" + gridName).jqGrid("exportToPdf",{
                    title: 'jqGrid Export to PDF',
                    orientation: 'portrait',
                    pageSize: 'A4',
                    description: 'description of the exported document',
                    customSettings: null,
                    download: 'download',
                    includeLabels : true,
                    includeGroupHeader : true,
                    includeFooter: true,
                    fileName : "jqGridExport.pdf"
                })

        }
    });

    jQuery("#" + gridName).jqGrid('navButtonAdd', "#toolbar_toppager", {
        caption: '',
        id: 'exportExcel',
        title: "Download CSV(Excel)",
        buttonicon: 'far fa-file-excel',
        position: "last",
        onClickButton: function() {
           alert('');
        }
    });      
    $(".ui-jqgrid-bdiv").niceScroll();
    return gridObj;
}

标签： jqueryjqgrid