Question

Backgrid客户端数据过滤是从所有数据（先前和新数据）中搜索文本，并且分页数据不会更新。它正在提取先前检索的数据。请找到以下代码：

  <html>
    <head>
     <meta charset="utf-8"/>
     <title>BackGrid complete example</title>
     <link rel="stylesheet" href="backgrid-0.3.5.css">
     <link rel="stylesheet" href="backgrid-select-all.css">
     <link rel="stylesheet" href="backgrid-paginator.css">
     <link rel="stylesheet" href="backgrid-filter.css">
    </head>
    <body>
         <h1>BackGrid complete example with filters and paginator</h1>
         <div id="example-2-result" class="backgrid-container"></div>
         <button id="recButton">Get Records</button>
         <button id="secButton">Set Records</button>
         <script src="jquery-1.11.0.js"></script>
         <script src="underscore-1.6.0.js"></script>
         <script src="backbone-1.1.2.js"></script>
         <script src="backbone-pageable.js"></script>
         <script src="backgrid-0.3.5.js"></script>
         <script src="backgrid-select-all.js"></script>
         <script src="backgrid-paginator.js"></script>
         <script src="backgrid-filter.js"></script>
         <style>
         .backgrid-container {
            border: 0 none;
            display: block;
            height: 230px;
            overflow: auto;
            padding: 0;
            position: relative;
            width: 20%;
         } 
        </style>
        <script>
             $(function() {
                //Json data
                var data = [{"id":1,"name":"Abandon"},{"id":2,"name":"Abandoned"}];

                var data1 = [{"id":41936,"name":"Hoffman 4"}];

                var columns = [{
                    name: "id", // The key of the model attribute
                    label: "ID", // The name to display in the header
                    renderable: false, // By default every cell in a column is editable, but *ID* shouldn't be
                    // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
                    cell: "integer"
                  }, {
                    name: "name",
                    label: "Name",
                    editable: false,
                    // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
                    cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
                }];

                var PageableTerritories = Backbone.PageableCollection.extend({
                  url: "justToMakeGridHappy",
                   state: {
                    pageSize: 1
                  },
                  mode: "client" // page entirely on the client side
                });

                //Created pageable dataset
                var pageableTerritories = new PageableTerritories(data);

                // Set up a grid to use the pageable collection
                var pageableGrid = new Backgrid.Grid({
                  columns: [{
                    // enable the select-all extension
                    name: "",
                    cell: "select-row",
                    headerCell: "select-all"
                  }].concat(columns),
                  collection: pageableTerritories
                });

                // Render the grid
                var $example2 = $("#example-2-result");
                $example2.append(pageableGrid.render().el);

                // Initialize the paginator
                var paginator = new Backgrid.Extension.Paginator({
                  collection: pageableTerritories
                });

                // Render the paginator
                $example2.after(paginator.render().el);

                // Initialize a client-side filter to filter on the client
                // mode pageable collection's cache.
                var filter = new Backgrid.Extension.ClientSideFilter({
                  collection: pageableTerritories,
                  placeholder: "Search",
                  fields: ['name']
                });

                // Render the filter
                $example2.before(filter.render().el);

                // Add some space to the filter and move it to the right
                $(filter.el).css({float: "right", margin: "20px"});

                // Fetch some data
                pageableTerritories.fetch({reset: true});

                //retrieves checkbox selected records
                function getSelectedRecords(){
                    console.log("Selected Records : "+ pageableGrid.getSelectedModels());
                }
                //Get Selected Records button click event
                $("#recButton").click(function (e) {
                    getSelectedRecords();
                });

                //For Setting new data
                function setRecords(){
                    pageableTerritories.set(data1); 
                }

                //Set Records button click event                    
                $("#secButton").click(function (e) {
                    setRecords();
                });
            });
        </script>
    </body>
</html>

我第一次使用构造函数将数据（可变数据）设置为网格。对于此数据网格，过滤器和分页工作正常。一旦我在“设置记录”按钮上设置数据，我就可以找到网格上出现的数据。对于这个数据分页没有得到更新，过滤器过滤数据形式的数据集。他们可以通过哪种方法清除以前加载的数据，以便过滤器和分页能够正常工作吗？

Backgrid客户端过滤从先前和当前数据集中提取数据

0 个答案: