如何使用搜索輸入值重新加載jQGrid

我已經綁定了一個jqGrid列的DatePicker插件。我想要做的是在選擇日期後刷新整個網格。下面的代碼重新加載了網格，但是它提供了一個簡單的GET請求，沒有任何搜索參數。如何解決它？如何使用搜索輸入值重新加載jQGrid

$(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"); 
       } 
      } 
     } 
     ); 
    });

來源

2012-04-21 Tony

你可以改變的jqGrid的URL發送您的當前參數：

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

來源

2012-04-21 08:29:40

OK，但在這種情況下，一旦選定日期將始終在URL，即使我明確的日期輸入值 – Tony 2012-04-21 08:44:07

不，如果每次選擇新的日期時更改URL，則會發送正確的值。我的意思是你應該把我寫在'date-picker.onselect'處理程序中的代碼。 – 2012-04-21 09:15:57

這裏的解決辦法，如果其他人也有同樣的問題。

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

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

來源

2012-04-21 09:12:29 Tony

你不包括的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）。

來源

2012-04-21 11:24:23 Oleg

謝謝，對我來說，送達參數充電電網的數據：

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

來源

2013-06-28 16:19:02 roberto

如何使用搜索輸入值重新加載jQGrid

回答

相關問題