在选择日期时加载 JqGrid

Question

我有一个日期选择器，在选择日期并单击按钮时，它应该显示其下方的网格...

我的方法：

<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')。一般来说，所有这些都可以像另一个外部“过滤器”一样工作（请参阅如何不使用内置搜索/过滤框来过滤 jqGrid 数据）。

更新：在我看来，使用 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”的服务器组件应读取附加参数“date”，该参数将是来自“datepicker”控件的日期值。它应该发送回经过数据过滤的数据。