上選擇日期

Question

加載的jqGrid我有一個日期選擇器和選擇日期和點擊按鈕，它應該顯示其下方的網格...

我的方法：

<script type="text/javascript"> 
//<![CDATA[ 
    $(document).ready(function(){ 
     $("#datepicker").datepicker({ 
      showOn:'button', 
      buttonImage: '../../image/icon_cal.png', 
      buttonImageOnly:true 
     }); 

     jQuery(".submit").click(function(){ 
      var btnClick = jQuery("#businessError").jqGrid('setGridParam', 
       {url:"/cpsb/cPSBBusinessErrors.do?method=getBusinessErrors"}); 
     }); 

     jQuery("#businessError").jqGrid({ 
      sortable:true, 
      url: '/cpsb/cPSBBusinessErrors.do?method=getBusinessErrors', 
      datatype:'json', 
      colNames:['Error Number','Error Message','Created date','Created User', 
         'Last Modified Date','Last Modified User'], 
      colModel:[ 
       { name:'errorNumber',index:'errorNumber', width:80, sorttype:"int", 
        align:"center", key:true }, 
       { name:'errorMessage',index:'errorMessage', width:280, 
        sorttype:"text", align:"center" }, 
       { name:'createdDate',index:'createdDate', width:180, 
        sorttype:"text", align:"center" }, 
       { name:'createdUser',index:'createdUser', width:180, 
        sorttype:"text", align:"center" }, 
       { name:'lastModifiedDate',index:'lastModifiedDate', 
        width:180, sorttype:"text", align:"center" }, 
       { name:'lastModifiedUser',index:'lastModifiedUser', 
        width:180, sorttype:"text", align:"center" }, 
      ], 
      rowNum:10, 
      rowList:[10,20,30], 
      jsonReader : {repeatitems: false, 
       root: function(obj) { 
        return obj; 
       }, 
       page: function (obj) { return 1; }, 
       total: function (obj) { return 1; }, 
       records: function (obj) { return obj.length; } 
      }, 
      pager: '#businessErrorpager', 
      sortname: 'SKU', 
      sortorder: "desc", 
      loadonce:true, 
      viewrecords: true, 
      caption: "Business Errors" 
      }); 
     jQuery("#businessError").jqGrid('navGrid', 
             {view:true,add:false,edit:false,del:false}); 
    }); 
//]]> 
</script> 

HTML標記：

<div id="header"><jsp:include page="../menu_v1.jsp"/></div> 
<div id="mainContent"> 
    <div id="business_form"> 
    <form class="dateform" id="date" method="post" 
      action="/businessError.do?method=getBusinessErrors"> 
    <fieldset class="ui-widget ui-widget-content ui-corner-all"> 
    <legend class="ui-widget ui-widget-header ui-corner-all">Business Error</legend> 
     <p> 
     <label for="spogname">Select Date:</label> 
     <input type="text" id="datepicker"/> 
     </p> 
     <p> 
     <button class="submit" type="submit">Submit</button> 
     </p> 
    </fieldset> 
    </form> 

    <div class="business"> 
     <table id="businessError"><tr><td></td></tr></table> 
     <div id="businessErrorpager"></div> 
    </div> 
    </div> 
</div> 

Answer 1

它我理解你的問題正確的你應該使用服務器上的附加參數來構建查詢填充jqGrid：startingDate，date，endDate或類似的東西。如果用戶在日期選擇器中選擇數據，則可以使用setGridParam將此附加日期參數設置爲URL的一部分或作爲jqGrid的postData參數的一部分，並開始trigger('reloadGrid')。一般而言，所有工作都可以像另一個外部「過濾器」一樣工作（參見How to filter the jqGrid data NOT using the built in search/filter box）。

已更新：在我看來，使用datapicker的工作可能更簡單一點，沒有一個多一個按鈕的表單。您可以替換以下標記

<fieldset> 
<input type="text" id="datepicker"/> 
</fieldset> 

，並作爲JavaScript代碼

$("#datepicker").datepicker({ 
    showOn:'button'/*, 
    buttonImage: '../../image/icon_cal.png', 
    buttonImageOnly:true*/ 
}).bind('change', function(e) { 
    var d = e.target.value; 
    $("#businessError").jqGrid('setGridParam', 
       { url: "/cpsb/cPSBBusinessErrors.do", 
       postData: { 
        method: "getBusinessErrors", 
        date: d 
       }, 
       page: 1 
       }).trigger("reloadGrid"); 
}); 

您的服務器組件，它監聽「/cpsb/cPSBBusinessErrors.do」應改爲附加參數「日期」，這將是「日期選擇器」控件的日期值。它應該發回由數據過濾的數據。