검색 입력 값으로 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

아니요, 새 날짜를 선택할 때마다 URL을 변경하면 올바른 값이 전송됩니다. 나는 당신이'date-picker.onselect' 핸들러 내에 작성한 코드를 넣어야 함을 의미한다. –

여기에 솔루션입니다.

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를 다시로드하는 방법

답변

관련 문제