Slick 网格上的快速过滤器

Question

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

我尝试按照上给出的示例进行操作： https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html and 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

代码中的一些区域阻止 header 过滤器出现和运行。我在下面通过引用解决它们的 fiddle http://jsfiddle.net/rg8n7vc2/ 来解释它们。请注意，出于测试目的，我注释掉了填充网格的 JSP 代码，并将其替换为随机测试数据。

过滤函数访问网格

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

Fiddle 中突出显示的修复 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({

网格选项和初始化

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

Fiddle 中突出显示的修复 2 的更改是：

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

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

过滤备注

代码中的过滤函数匹配整个字符串，区分大小写。因此，您必须在过滤器中输入大小写正确的完整单词（例如 'Chris' 到用户名），才能显示匹配的结果。如果您想在键入时进行匹配，则需要使用 .indexOf() 修改函数。使用 indexOf 示例的 fiddle 的更新版本是 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 网格上的快速过滤器

Quick filter on Slick grid

jquery

jsp

slickgrid

过滤函数访问网格

网格选项和初始化

过滤备注