如何在jgrid上顯示搜索到的數據

Question

這與我之前關於jqgrid的問題有關。即時做一個搜索按鈕，將搜索我的服務器輸入的文本，並顯示這些數據（如果有）在jqgrid。現在，我所做的是創建一個存儲過濾器的全局變量。下面是我的javascript代碼爲我的搜索和顯示：

filter = ''; //this is my global variable for storing filters 
    $('#btnsearchCode').click(function(){ 
     var row_data = ''; 
     var par = { 
      "SessionID": $.cookie("ID"), 
      "dataType": "data", 
      "filters":[{ 
      "name":"code", 
      "comparison":"starts_with", 
      "value":$('#searchCode').val(), 
      }], 
      "recordLimit":50, 
      "recordOffset":0, 
      "rowDataAsObjects":false, 
      "queryRowCount":true, 
      "sort_descending_fields":"main_account_group_desc" 
     }  
     filter="[{'name':'main_account_group_code','comparison':'starts_with','value':$('#searchCode').val()}]"; 
     $('#list1').setGridParam({ 
     url:'json.php?path=' + encodeURI('data/view') + '&json=' + encodeURI(JSON.stringify(par)), 
     datatype: Settings.ajaxDataType, 
     }); 
     $('#list1').trigger('reloadGrid'); 

     $.ajax({ 
      type: 'GET', 
      url: 'json.php?' + $.param({path:'data/view',json:JSON.stringify(par)}), 
      dataType: Settings.ajaxDataType, 
      success: function(data) { 
       if ('error' in data){ 
       showMessage('ERROR: ' + data["error"]["msg"]); 
       } 
       else{     
       if ((JSON.stringify(data.result.main.row)) <= 0){ 
        alert('code not found'); 
       } 
       else{ 
        var root=[]; 
        $.each(data['result']['main']['rowdata'], function(rowIndex, rowDataValue) { 
        var row = {}; 
        $.each(rowDataValue, function(columnIndex, rowArrayValue) { 
         var fldName = data['result']['main']['metadata']['fields'][columnIndex].name;   
         row[fldName] = rowArrayValue;     
        }); 
        root[rowIndex] = row; 
        row_data += JSON.stringify(root[rowIndex]) + '\r\n'; 
       });   
      } 
      alert(row_data); //this alerts all the data that starts with the inputed text... 
      } 
     } 
    }); 
    } 

我觀察到的代碼總是進入這個（我計劃的代碼與我的其他表使用），所以我在這裏把過濾器：

$.extend(jQuery.jgrid.defaults, { 
     datatype: 'json', 
     serializeGridData: function(postData) { 
      var jsonParams = { 
      'SessionID': $.cookie("ID"),  
      'dataType': 'data', 
      'filters': filter, 
      'recordLimit': postData.rows, 
      'recordOffset': postData.rows * (postData.page - 1), 
      'rowDataAsObjects': false, 
      'queryRowCount': true, 
      'sort_fields': postData.sidx 
      }; 

      return 'json=' + JSON.stringify(jsonParams); 
     }, 
     loadError: function(xhr, msg, e) { 
     showMessage('HTTP error: ' + JSON.stringify(msg) + '.'); 
     }, 
    }); 

現在，我的問題是，爲什麼它顯示錯誤消息「服務器錯誤：參數'dataType'沒有指定」？我已經在上面的代碼中聲明瞭dataType，但似乎沒有讀取它。有沒有人可以在這裏幫助我如何在網格上顯示搜索到的數據？（功能是一個很好的幫助）

Answer 1

我修改了你的代碼，根據你的兩個問題的信息。作爲結果的代碼將瞭解以下信息：

var myGrid = $("#list1"); 

myGrid.jqGrid({ 
    datatype: 'local', 
    url: 'json.php', 
    postData: { 
     path: 'data/view' 
    }, 
    jsonReader: { 
     root: function(obj) { 
      var root = [], fields; 

      if (obj.hasOwnProperty('error')) { 
       alert(obj.error['class'] + ' error: ' + obj.error.msg); 
      } else { 
       fields = obj.result.main.metadata.fields; 
       $.each(obj.result.main.rowdata, function(rowIndex, rowDataValue) { 
        var row = {}; 
        $.each(rowDataValue, function(columnIndex, rowArrayValue) { 
         row[fields[columnIndex].name] = rowArrayValue; 
        }); 
        root.push(row); 
       }); 
      } 

      return root; 
     }, 
     page: "result.main.page", 
     total: "result.main.pageCount", 
     records: "result.main.rows", 
     repeatitems: false, 
     id: "0" 
    }, 
    serializeGridData: function(postData) { 
     var filter = JSON.stringify([ 
      { 
       name:'main_account_group_code', 
       comparison:'starts_with', 
       value:$('#searchCode').val() 
      } 
     ]); 

     var jsonParams = { 
      SessionID: $.cookie("ID"), 
      dataType: 'data', 
      filters: filter, 
      recordLimit: postData.rows, 
      recordOffset: postData.rows * (postData.page - 1), 
      rowDataAsObjects: false, 
      queryRowCount: true, 
      sort_descending_fields:'main_account_group_desc', 
      sort_fields: postData.sidx 
     }; 

     return $.extend({},postData,{json:JSON.stringify(jsonParams)}); 
    }, 
    loadError: function(xhr, msg, e) { 
     alert('HTTP error: ' + JSON.stringify(msg) + '.'); 
    }, 
    colNames:['Code', 'Description','Type'], 
    colModel:[ 
     {name:'code'}, 
     {name:'desc'}, 
     {name:'type'} 
    ], 
    rowNum:10, 
    viewrecords: true, 
    rowList:[10,50,100], 
    pager: '#tblDataPager1', 
    sortname: 'desc', 
    sortorder: 'desc', 
    loadonce:false, 
    height: 250, 
    caption: "Main Account" 
}); 
$("#btnsearchCode").click(function() { 
    myGrid.setGridParam({datatype:'json',page:1}).trigger("reloadGrid"); 
}); 

你可以看到代碼直播here。

該代碼在開始時使用datatype:'local'，因此您不會有任何請求到服務器，否則將會單擊「搜索」按鈕。 參數serializeGridData的數據將與jqGrid的postData參數（將附加參數"&path="+encodeURIComponent('data/view')）組合使用。此外，所有標準jqGrid參數將繼續發送，並且帶有您的定製信息的新參數將另行發送。

通過，如果你想重命名等recordLimit代替rows使用URL中使用一些標準參數，你可以使用prmNames參數形式

prmNames: { rows: "recordLimit" }