Button 在选择日期时加载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>

---

如果我理解您的问题是正确的，您应该在服务器上使用其他参数来构造填充jqGrid的查询：startingDate、date、endDate或诸如此类的内容。如果用户选择datepicker中的数据，则可以使用setGridParam将此附加日期参数设置为URL的一部分或jqGrid参数的一部分，并启动触发器“reloadGrid”。通常，所有过滤器都可以像其他外部过滤器一样工作，请参见

更新：在我看来，使用数据采集器的工作可能会更简单一点，并且没有一个带有多个按钮的表单。可以替换为以下标记

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

---

侦听/cpsb/cpsbusineserrors.do的服务器组件应读取另一个参数date，该参数将是datepicker控件中的日期值。它应该将数据过滤后的数据发回。

这只是我必须向服务器打一个电话来获取网格内的数据……我可以这样使用吗？单击函数{jQuerybusinessError.jqGrid'setGridParam'，{url:/cpsb/cPSBBusinessErrors.do？method=getBusinessErrors}；}；在我看来，您根本不需要使用额外的提交按钮，也不需要表单。我在更新的部分中发布了简短的说明，说明了如何实现。我必须附加一个参数，比如SelDate like/cpsb/cpsbusinesrors.do？method=getBusinessErrors&SelDate，我的服务器端将从该参数SelDate获取日期……我可以这样做吗：var d=e.target.value$businessError.jqGrid'setGridParam'，{url:/cpsb/cpsbusinesserrors.do，postData:{method:getBusinessErrors&selDate，date:d}，@paul:Yes，可以，但不是postData:{method:getBusinessErrors&selDate，date:d}应该是postData:{方法：getBusinessErrors，selDate:d}。对于HTTP GET request jQuery.ajax，将url与postData中的所有参数组合，并在结尾使用url='/cpsb/cpsbusinesserrors.do？method=getBusinessErrors&selDate='+d。将自动添加字符'？'和'&'。如果postData中的某些参数值具有特殊符号'，'/'like可以具有日期，则字符将为be使用encodeURIComponent编码，因此在服务器端一切正常。

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