Question

我是jquery和slickgrid的新手。我需要一些帮助来在光滑网格上使用快速文本过滤器添加快速文本过滤器。

我试着按照给出的例子： https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html和http://mleibman.github.io/SlickGrid/examples/example-header-row.html

但我有点搞砸了。无法使过滤器工作。

这是我的代码。

JSP：

<div>
        <div id="carfactory"  class="  ui-state-default"    style="width: 860px; text-align: left;">
                <div id="carGrid"></div>
                <div id="carPager" style="height: 30px;" class="ui-widget"></div>
            </div>
        </div>
        <c:if test="${info == null or empty info}">
            <div class="ui-widget style="float:center">
                <strong>No results found !</strong>
            </div>
            <br>
        </c:if>
</div>

Jquery的：

<script type="text/javascript"> 


    function carfactory(){
        var holder=new Array();
        var i=0;
         <c:forEach var="message" items="${info}" >
         holder[i]={
                    id: i,
                    createdon: '<c:out value="${message.createdOn}"/>',
                    modifiedon:'<c:out value="${message.modifiedOn}"/>',
                    status:'<c:out value="${message.status}"/>',
                    username:'<c:out value="${message.username}"/>'
                    }
            i++;       
          </c:forEach>
           return holder;
         }

var columns = [];
      var columnFilters = {};

        function filter(item) {
            for (var columnId in columnFilters) {
              if (columnId !== undefined && columnFilters[columnId] !== "") {
                var c = grid.getColumns()[grid.getColumnIndex(columnId)];
                if (item[c.field] != columnFilters[columnId]) {
                  return false;
                }
              }
            }
            return true;
          }
        (function($) {   

         function createGrid(grid) {
                   if ( grid.grid ==undefined ) {
                       grid.dataView = new Slick.Data.DataView();
                       grid.grid = new Slick.Grid(grid.element, grid.dataView, grid.columns, grid.options);
                       if ( grid.pagerElement != undefined ) {
                           grid.pager = new Slick.Controls.Pager(grid.dataView, grid.grid, grid.pagerElement);
                       }
                       grid.dataView.onRowCountChanged.subscribe(function (e, args){ grid.grid.updateRowCount(); grid.grid.render();  });
                        grid.dataView.onRowsChanged.subscribe(function (e, args){ grid.grid.invalidateRows(args.rows); grid.grid.render(); });
                        grid.grid.onSort.subscribe(function (e, args){ grid.dataView.fastSort(args.sortCol.field, args.sortAsc); });

 $(grid.grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
                            var columnId = $(this).data("columnId");
                            if (columnId != null) {
                              columnFilters[columnId] = $.trim($(this).val());
                              dataView.refresh();
                            }
                          });
                          grid.grid.onHeaderRowCellRendered.subscribe(function(e, args) {
                              $(args.node).empty();
                              $("<input type='text'>")
                                 .data("columnId", args.column.id)
                                 .val(columnFilters[args.column.id])
                                 .appendTo(args.node);
                          });

                       grid.dataView.beginUpdate();
                       if ( grid.data != undefined ) grid.dataView.setItems(grid.data);
                       if ( grid.data != undefined ) grid.dataView.setFilter(filter);
                       if ( grid.pager != undefined ) grid.dataView.setPagingOptions({ pageSize: 15, pageNum: 1 });
                       grid.dataView.endUpdate();



                   }
                   return grid;
               }

         var carFactoryGrid = createGrid({

             element: $("#carGrid"),
             pagerElement: $("#carPager"),
             columns: [


                 {id: "createdOn", name: "Created On", field: "createdon", sortable: true, width: 200}, 
                 {id: "modifiedon", name: "Modified On", field: "modifiedon", sortable: true, width: 200},
                 {id: "status", name: "Status", field: "status", sortable: true, width: 50},
                 {id: "username", name: "Username", field: "username", sortable: true, width: 150}
                 ],
             options: { enableColumnReorder: false, autoHeight: true, rowHeight: 20  },             
             data:carfactory()
         });
        })(jQuery);
</script>

Answer 1

代码中有一些区域阻止标头过滤器出现和运行。我已经在下面解释了他们对小提琴http://jsfiddle.net/rg8n7vc2/的反思，它解决了他们。请注意，出于测试目的，我注释掉了填充网格的JSP代码，并将其替换为随机测试数据。

过滤功能访问网格

名为carFactoryGrid的网格变量在闭包中定义，但过滤器函数试图在闭包之外访问它。在闭包之外声明变量carFactoryGrid允许过滤器函数访问它（类似于您链接的示例）。或者，如果您愿意，可以在闭包内移动过滤器功能。

小提琴中突出显示的修订1的更改为：

//Line 44 - Delcare carFactoryGrid outside closure
var carFactoryGrid;

//Line 51 - Amend filter function to use carFactoryGrid variable
var c =  carFactoryGrid.grid.getColumns()[carFactoryGrid.grid.getColumnIndex(columnId)];

//Line 102 - Remove declaration from inside closure (remove var)
carFactoryGrid = createGrid({

网格选项和初始化

要查看示例中所示的过滤器标题行，您必须在初始化SlickGrid（showHeaderRow和headerRowHeight）时包含相关选项。此外，在订阅onHeaderRowCellRendered事件之后，必须手动初始化网格，以确保正确构造标题行。要执行此操作，必须将explicitInitialization选项设置为true，并在您订阅事件后手动调用grid.init();来初始化网格。

小提琴中突出显示的修订2的更改是：

//Line 96 - Initialize grid
grid.grid.init();

//Line 117 - Additional options for grid
showHeaderRow: true,
headerRowHeight: 34,
explicitInitialization: true

过滤笔记

代码中的过滤器函数与整个字符串匹配，区分大小写。因此，您必须在过滤器中输入带有正确大小写的完整单词（例如，＆＃39; Chris＆＃39;进入用户名），以显示匹配的结果。如果您想在键入时匹配，则需要使用.indexOf（）修改函数。使用indexOf示例的小提琴的更新版本是http://jsfiddle.net/rg8n7vc2/2/，其中包含以下更新：

//Line 54
//Filtering amendments
//Check for null value
if (!item[c.field] && columnFilters[columnId]){
    return false;
}

//Convert the value to a string in case it is a date using toString()
//If you are just passing strings instead of dates then .toString is not necessary
//If you are using dates then ideally you'd call the relevant formatter here to get the correct format
//Converts all to upper case then checks for existence of filter value in value using indexOf
if (item[c.field].toString().toUpperCase().indexOf(columnFilters[columnId].toUpperCase()) == -1) {
    return false;
}

在Slick网格上快速过滤

1 个答案:

过滤功能访问网格

网格选项和初始化

过滤笔记