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