検索入力値でjQGridを再ロードする方法

Question

jqGridの列の1つにDatePickerプラグインをバインドしました。私がしたいのは、日付を選択した後、グリッド全体をリフレッシュすることだけです。以下のコードはグリッドをリロードしますが、検索パラメータを使用せずに簡単なGETリクエストを作成します。それを修正するには？

$(function() { 
     $("#list").jqGrid({ 
      url: '/Control/BookstoreInvoicesGridData/', 
      datatype: 'json', 
      mtype: 'GET', 
      colNames: ['Invoice #', 'Created', 'Customer ID', 'Total Amount', 'PaymentType'], 
      colModel: [ 
     { name: 'OrderID', index: 'OrderID', width: 20, align: 'center', sortable: true, search: true }, 
     { name: 'Created', index: 'Created', width: 40, align: 'center', sortable: true, search: true }, 
     { name: 'CustomerName', index: 'CustomerName', width: 60, align: 'center', sortable: true, search: true }, 
     { name: 'TotalAmount', index: 'TotalAmount', width: 40, align: 'center', sortable: true, search: false }, 
     { name: 'PaymentType', index: 'PaymentType', width: 40, align: 'center', sortable: true, search: false}], 
      pager: jQuery('#pager'), 
      rowNum: 10, 
      rowList: [5, 10, 20, 50], 
      sortname: 'OrderID', 
      sortorder: "desc", 
      viewrecords: true, 
      imgpath: '/scripts/themes/coffee/images', 
      width: '800' 
     }); 

     $('#gs_Created').datepicker({ 
      onSelect: function (dateText, inst) { 
       var e = $("#list").data("events"); 
       if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") { 
        $("#list").trigger("reloadGrid"); 
       } 
      } 
     } 
     ); 
    }); 

Answer 1

あなたの現在のパラメータを送信するためにjqGridのURLを変更することができます：誰もが同じ問題を抱えているかどう

var url = '/Control/BookstoreInvoicesGridData/?date=' + $(this).val(); 
    $("#list").jqGrid('setGridParam', { url: url }); 
    $("#list").trigger("reloadGrid"); 

Answer 2

はここで、ソリューションです。

datePick = function (elem) { 
      jQuery(elem).datepicker(); 
     } 

$("#list").jqGrid({  
.... 
{ name: 'Created', [...] stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } }, 
.... 
}); 

Answer 3

あなたはあなたのコード内でfilterToolbarのコールが含まれていませんが、名前'#gs_Created'から、私はあなたがtoolbar searching

var grid = $("#list"), 
    datePick = function (elem) { 
     $(elem).datepicker({ 
      changeYear: true, 
      changeMonth: true, 
      showButtonPanel: true, 
      onSelect: function() { 
       if (this.id.substr(0, 3) === "gs_") { 
        // call triggerToolbar only in case of searching toolbar 
        setTimeout(function() { 
         grid[0].triggerToolbar(); 
        }, 100); 
       } 
      } 
     }); 
    }); 

grid.jqGrid({ 
    url: '/Control/BookstoreInvoicesGridData/', 
    ... 
    // sortable: true, search: true are already default 
    // you can change other default values using cmTemplate 
    cmTemplate: {align: 'center', width: 40}, 
    colModel: [ 
     { name: 'OrderID', index: 'OrderID', width: 20 }, 
     { name: 'Created', index: 'Created', 
      searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } }, 
     { name: 'CustomerName', index: 'CustomerName', width: 60 }, 
     { name: 'TotalAmount', index: 'TotalAmount' }, 
     { name: 'PaymentType', index: 'PaymentType'} 
    ], 
    pager: '#pager', 
    gridview: true, 
    height: 'auto', 
    ... 
}); 

を使用しているとし、それ以降は使用されないことになるimgpath: '/scripts/themes/coffee/images'パラメータを削除してくださいすることができますjqGridで長年（hereを参照）。

Answer 4

おかげで、私には、パラメータによってグリッドデータを再充電するのに役立っ：

$('#buttonsearch').on('click', function() { 
    jQuery("#mygrid").jqGrid('setGridParam', { 
     postData: { nit: $("#myparameter").val() } 
    }, 
    { page: 1 }).trigger('reloadGrid');    
});