Question

我想知道是否有人有使用Fancygrid.js和日期选择器的经验？他们的文档还不错，但是我没有看到任何可以帮助我传递过去30天或上个月等参数的示例。

我目前将此作为我的代码：

Environment variable path also correct, but still i am not able to run this. below is the .POM code for reference                                                                                                  <build>
<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compile-plugin</artifactId>
        <version>3.8.1</version>
        <configuration>
            <source>1.8</source>
            <target>1.8</target>
            <suiteXmlFiles>
                <suiteXmlFile>testng.xml</suiteXmlFile>
            </suiteXmlFiles>
        </configuration>
    </plugin>
</plugins>

我现在已将菜单注释掉，但是如果可能的话，我想显示最近30、60和90天的过滤选项。我的JSON如下所示：

new FancyGrid({
            title: 'Report',
            renderTo: 'newTable',
            data: data,
            theme: 'bootstrap',
            // width: 'fit',
            // height: 'fit',
            paging: true,
            trackOver: true,
            selModel: 'row',
            paging: {
                pageSize: 10,
                pageSizeData: [5,10,20,50],
                refreshButton: true
              },
            tbar: [{
                type: 'search',
                width: 350,
                emptyText: 'Search',
                paramsMenu: true,
                paramsText: 'Parameters'
              }],
            defaults: {
              type: 'string',
              sortable: true
            },
            columns: 
            [
                {
                    index: 'theDate',
                    title: 'Date',
                    type: 'date',
                    width: 150,
                    resizable: true,
                    filter: {
                      header: true
                    },
                    // menu: [{
                    //     text: 'Clear Filter',
                    //     handler: function(menu){
                    //         var grid = FancyGrid.get('newTable');
                    //       grid.clearFilter('theDate');
                    //       menu.hide();
                    //     }
                    //   },'-',{
                    //     text: 'Less than 30',
                    //     handler: function(menu){
                    //       var grid = FancyGrid.get('newTable');
                    //       grid.clearFilter('theDate');
                    //       grid.addFilter('theDate', 30, '<');
                    //       menu.hide();
                    //     }
                    //   },{      
                    //     text: 'More than 35',
                    //     handler: function(menu){
                    //       var grid = FancyGrid.get('newTable');
                    //       grid.clearFilter();
                    //       grid.addFilter('theDate', 35, '>');
                    //       menu.hide();
                    //     }
                    // }],
                }, {
                    index: 'MessagesSent',
                    title: 'Messages',
                    width: 80,
                    resizable: true
                }, {
                    index: 'Clicks',
                    title: 'Clicks',
                    width: 150,
                    resizable: true,
                    type: 'number',
                }, {
                    index: 'Upload',
                    title: 'Upload',
                    width: 150,
                    resizable: true
                }, {
                    index: 'UploadRate',
                    title: 'Upload Rate',
                    width: 150,
                    resizable: true
                }, {
                    index: 'enter',
                    title: 'Enter',
                    width: 50,
                    resizable: true
                }, {
                    index: 'EnterRate',
                    title: 'Enter Rate',
                    width: 150,
                    resizable: true
                }
            ],

          });
        });

感谢您的帮助。

Answer 1

您需要构造要与之进行比较的日期，并将其传递到addFilter()语句中：

   menu: [{
       text: 'Clear Filter',
       handler: function(menu){
         grid.clearFilter('theDate');
         menu.hide();
       }
     },'-',{
       text: 'Less than 30',
       handler: function(menu){
         grid.clearFilter('theDate');
         var date = new Date();
         date.setDate(date.getDate() -30);             
         grid.addFilter('theDate', date, '>');
         menu.hide();
       }
     },{      
       text: 'More than 35',
       handler: function(menu){
         grid.clearFilter('theDate');
         var date = new Date();
         date.setDate(date.getDate() -35);      
         grid.addFilter('theDate', date, '<');
         menu.hide();
       }
   }],
   ...

这里是上述代码的Fiddle。

我还删除了菜单内的重复呼叫...

var grid = FancyGrid.get('newTable');

，而是将网格初始化的返回值分配给变量：

  var grid = new FancyGrid({
      ...
  });

Fancygrid日期选择器

1 个答案: