如何在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。

代码在开头（第 4 行）使用datatype:'local'，因此如果单击“搜索”按钮，您将不会向服务器发出任何请求。来自serializeGridData 的postData 参数的serializeGridData 数据将与jqGrid 的postData 参数组合（将附加参数"&path="+encodeURIComponent('data/view')）。此外，所有标准 jqGrid 参数将继续发送，并且将额外发送带有您的自定义信息的新 json 参数。

顺便说一句，如果您想重命名 URL 中使用的一些标准参数，例如使用 recordLimit 而不是 rows，您可以在表单中使用 prmNames 参数。

prmNames: { rows: "recordLimit" }