上选择日期

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”应改为附加参数“日期”，这将是“日期选择器”控件的日期值。它应该发回由数据过滤的数据。