загрузка JqGrid на выбор даты - PullRequest
Новая
       30

загрузка JqGrid на выбор даты

0 голосов
/ 03 сентября 2010

У меня есть средство выбора даты, и при выборе даты и нажатии кнопки должна отображаться сетка под ним ...

мой подход: 

<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>

1 Ответ

1 голос
/ 04 сентября 2010

Если я правильно понял ваш вопрос, вы должны использовать дополнительные параметры на сервере для построения запроса, заполняющего jqGrid: начальная дата, дата, конечная дата или что-то подобное.Если пользователь выбирает данные в DatePicker, вы можете использовать setGridParam, чтобы установить этот дополнительный параметр даты как часть URL-адреса или как часть postData параметра jqGrid и запустить 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", должен прочитать дополнительный параметр "datemsgstr "который будет значением даты из элемента управления" datepicker ".Он должен отправить обратно данные, отфильтрованные по данным.

...