All geek questions in one place

How to override default search function in JQGrid

I have a JQGrid setting with a search bar at the top. For text fields, I want the search bar to function normally. The same thing happens when I create a drop-down list with several exact match options. However, for date fields or number ranges, I want to create a drop-down list that allows users to search by ranges. I assume that in these cases I need to override the existing search functions for JQGrid and write my own search functions.

I assume this is done using fn searchoption. So far, I have reached a level lower. This creates the grid and search options exactly as I would like. However, trying to do any search clears the entire grid, apparently because it does not know how to handle special date and range schedules. I would like to get an idea of ​​how to proceed. If this function already exists in JQGrid, can you tell me how to get it?

Aside, I want all processing to be local. The main advantage of something like JQGrid is the elimination of the burden of several database queries and the elimination of delays and overhead imposed by so many HTTP connections.

<script>
    $("#grid1").jqGrid({
        datatype:       "local",
        height:         250,
        colNames:       ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
        colModel:       [

                                {   name: 'page_name',
                                    index: 'page_name',
                                    width: 400,
                                    sorttype: 'text',
                                    search:true,
                                    stype:'text'
                                }
                                , 
                                {   name: 'row_timestamp',
                                    index: 'row_timestamp',
                                    width: 100,
                                    sorttype: 'date',
                                    search:true,
                                    stype:'select',
                                    searchoptions: {
                                        value:{'0':'Any','2014-2-01_2014-2-28':'February','2014-3-01_2014-3-31':'March','2014-4-01_2014-4-30':'April'},
                                        dataEvents: [
                                            {
                                                type: 'change',
                                                fn: function(e) {
                                                    alert($('#gs_row_timestamp option:selected').val());
                                                    alert($('#gs_row_timestamp option:selected').text());
                                                    alert('4');
                                                }
                                            }
                                        ]
                                    }
                                }
                                , 
                                {   name: 'row_id',
                                    index: 'row_id',
                                    width: 100,
                                    sorttype: 'int',
                                    search:true,
                                    stype:'select',
                                    searchoptions: {
                                        value:{0:'Any',2:'0 - 12000000000',3:'12000000000 - 24000000000',4:'24000000000 - 36000000000',5:'36000000000 - 48000000000',6:'48000000000 - 60000000000'},
                                        dataEvents: [
                                            {
                                                type: 'change',
                                                fn: function(e) {
                                                    alert($('#gs_row_id option:selected').val());
                                                    alert($('#gs_row_id option:selected').text());
                                                    alert('2');
                                                }
                                            }
                                        ]
                                    }
                                }
                                , 
                                {   name: 'error_type',
                                    index: 'error_type',
                                    width: 100,
                                    sorttype: 'text',
                                    search:true,
                                    stype:'select',
                                    searchoptions: {
                                        value:{0:'Any',2:'Application',3:'Database',4:'Expression',5:'MissingInclude'},
                                        dataEvents: [
                                            {
                                                type: 'change',
                                                fn: function(e) {
                                                    alert($('#gs_error_type option:selected').val());
                                                    alert($('#gs_error_type option:selected').text());
                                                    alert('1');
                                                }
                                            }
                                        ]
                                    }
                                }
                                , 
                                {   name: 'error_summary',
                                    index: 'error_summary',
                                    width: 500,
                                    sorttype: 'text',
                                    search:true,
                                    stype:'text'
                                }

                        ],
        multiselect:    false,
        rowNum:         25,         // Number of rows shown per page; must also change down below
        pager:          '#pager1',  
        height:         250,        
        altRows:        true,                       // Allows for styling of alt rows
        altclass:       'altRowClass',              // Create striped rows
        viewrecords:    true,                       // Show recordcount in lower right corner
        ignoreCase:     true,                       // Case insensitive searches
        multiSort:      true,
    </script>

UPDATE

, e.stopImmediatePropagation() , , . fn , , ?

    $("#grid1").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});

UPDATE

, . , . , JQGrid, .

        var mydata = [

                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
                        , row_timestamp:    "2014-04-29 13:25:08.528"
                        , row_id:   "135200030"
                        , error_type:   "MissingInclude"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
                        , row_timestamp:    "2014-04-29 13:24:48.575"
                        , row_id:   "135200040"
                        , error_type:   "MissingInclude"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
                        , row_timestamp:    "2014-04-25 08:46:04.428"
                        , row_id:   "135200050"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
                        , row_timestamp:    "2014-04-25 08:46:03.944"
                        , row_id:   "135200060"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Test\\jqtest.cfm"
                        , row_timestamp:    "2014-04-16 10:10:14.729"
                        , row_id:   "135200070"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
                        , row_timestamp:    "2014-04-15 16:47:51.477"
                        , row_id:   "135200080"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
                        , row_timestamp:    "2014-04-15 16:47:50.071"
                        , row_id:   "135200090"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
                        , row_timestamp:    "2014-04-15 16:42:22.18"
                        , row_id:   "135300000"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
                        , row_timestamp:    "2014-04-15 16:42:20.664"
                        , row_id:   "135300010"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 11:53:38.01"
                        , row_id:   "135300020"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 11:28:23.948"
                        , row_id:   "135300030"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 11:07:24.76"
                        , row_id:   "135300040"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 10:30:13.026"
                        , row_id:   "135300050"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\CustomTag\\stored_proc.cfm"
                        , row_timestamp:    "2014-04-08 09:03:21.588"
                        , row_id:   "135300060"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
                        , row_timestamp:    "2014-02-19 09:52:43.078"
                        , row_id:   "135300070"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
                        , row_timestamp:    "2014-02-19 09:46:10.906"
                        , row_id:   "135300080"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }

        ];
        for (var i = 0; i < mydata.length; i++)
            jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
        jQuery("#grid1").setGridParam({ rowNum: 25 }).trigger("reloadGrid");
+4
1

, jqGrid , . , , , . , jqGrid jLinq . jLinq , jLinq jqGrid ... - .

. :

function(){
    triggerToolbar();
    return false;
}

triggerToolbar - " ", , - , - - , .

:

  • jqGrid
  • jqGrid. , , , .
  • : jqGrid, .

. , , jqGrid jQuery ajax- jQuery. - ajax , , jqGrid. jQuery , , .

1. -

, jqGrid , . $.ajaxTransport (documentation), , ajax. , , , $.ajax() . URL-, jqGrid . , ( URL-, , ). :

var mydata = [ /* Your local data */ ];
var gridurl = window.location.href + "/mygrid";

$.ajaxTransport("json", function(options) {
  if(options.url.indexOf(gridurl) === 0) {
    return {
      send: function(headers, completeCallback) {
        setTimeout(function(){ //We still want the call to be asynchroneous
            completeCallback(200, "success", {json: mydata});
        }, 10);
      },
      abort: function() {
        //Do nothing
      }
    };
  }
});

jqGrid:

$("#grid1").jqGrid({
    url:       gridurl,
    datatype:  "json",
    height:    250,
    colNames:  ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
    /* ... */
});

//No call to addRowData

2.

1, . - , , jqGrid URL-. , jqGrid . URL-, , - . : ?page_name=home&row_timestamp=2014-2-01_2014-2-28, "" "CF-" "" " ".

, , , URL-. jQuery, StackOverlfow:)

function getParameterByName(url, name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

. ( , jLing, jqGrid). , row_id . row_id _ . , row_id, , , jqGrid ( ).

//Filtering split in two functions: 
// -one to parse the url and identify what filters to apply
// -one to do the actual filtering

function getFilterOptions(url) {
    var filterOptions = {};
    var row_id = getParameterByName(url, "row_id"); 
    if (row_id && row_id != "*") { //"*" == Any
        filterOptions.row_id = row_id.split("_");
    }
    return filterOptions;
}

//Uses Array.filter(), may require a polyfill on older browsers
function filterData(data, filterOptions) {
    return data.filter(function(row) { 
        if (filterOptions.row_id) {
            return filterOptions.row_id[0] <= row.row_id 
                && row.row_id <= filterOptions.row_id[1]
        }
        return true;
    });
}

-, .

$.ajaxTransport("json", function(options) {
  //options.url is the query sent by jqGrid, including search parameters
  if(options.url.indexOf(gridurl) === 0) {
    var filterOptions = getFilterOptions(options.url); 
    return {
      send: function(headers, completeCallback) {
        setTimeout(function(){
            //this is what jqGrid will receive.
            var filteredData = filterData(mydata, filterOptions);
            completeCallback(200, "success", {json: filteredData});
        }, 10);
      },
      abort: function() {
        //Do nothing
      }
    };
  }
});

, , jqGrid. joker 0 *, <min>_<max> getFilterOptions():

$("#grid1").jqGrid({
    url:       gridurl,
    datatype:  "json",
    height:    250,
    colNames:  ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
    colModel:  [{/* template column */},
               {/* date column */},
               {   
                name: 'row_id',
                index: 'row_id',
                width: 100,
                sorttype: 'int',
                search:true,
                stype:'select',
                searchoptions: {
                    value: {
                        '*':'Any', //Notice: joker used in getFilterOptions
                        '0_12000000000':'0 - 12000000000', 
                        '12000000000_24000000000':'12000000000 - 24000000000',
                        /* ... */
                    }
                    //no event handler
                }
               },
               /* ... */
               ],
    /* ... */
});

3. !

, , jqGrid. , - . , - , .

+2

Source: https://habr.com/ru/post/1538596/

More articles:


All Articles