javascript - 当用户单击 slick-header-menuitem 下拉列表时，如何将所有数据放入 slickgrid。？

Question

我有一个 UI 应用程序来显示业务信息。我使用 slick grid 通过使用 slick grid 的所有内置属性以表格/网格结构显示所有业务数据。我使用过滤器属性来过滤每一列的数据。

但我有一个条件，我从 Azure 存储表中获取 1k 数据，我将 pageSize 设置为 10，我传递 pageSize 以在 dataView.setPagingOptions({pageSize:pageSize}); 中设置分页。当我们在下拉列表中单击 slick-header-menuitem 时，它会显示(升序排序、降序排序、搜索和数据(过滤器 div)中包含的任何网格)。

现在，一旦我单击复选框来过滤数据，无论我需要过滤什么数据，它都会毫无问题地过滤这些数据。直到这里，一切都按预期工作，因为在我的过滤器下拉列表中，我有 4 个选项，例如(全选，空白，IT，美国，美国)如下图所示。

但是问题从这里开始，一旦我在过滤下拉列表(过滤器 div)显示更多数据后再次单击 slick-header-menuitem，例如 (全选，空白，IT，美国，美国，美国，美国)因为我已经过滤了数据假设(IT)所以在网格中所有数据过滤器并从 1k 记录中获取数据但它也会获取附加的数据以前没有的过滤器 div 选项。

作为引用，除了搜索和分页之外，我的网格看起来像这样(下面是 url)

http://danny-sg.github.io/slickgrid-spreadsheet-plugins/examples/example-2-everything.htm

我也附上两张图片

第一张图片表示我第一次点击 slick-header-menuitem 下拉菜单。

第二张图片表示我在过滤数据后再次点击 slick-header-menuitem 下拉菜单。

我浏览了 slickgrid 库，其中有一个插件文件夹，该文件夹包含过滤器文件夹，过滤器文件夹包含 ext.headerfilter.js 此文件包含名为“function getFilterValues(dataView, column){...}”、“function getFilterValuesByInput($input){...}”和“function getAllFilterValues(data, column){...}”的方法，我已对其进行调试，但不会取得任何成功。

Answer 1

经过大量调试，我终于得到了过滤记录的解决方案 在这里，我不关心 slick-grid 库，根据我的经验，它是一个很棒的库 所以根据我的要求，我在 ext.headerfilter.js 文件中做了一些更改 转到名为 getFilterValues() 和 getFilterValuesByInput($input) 的函数，在这些函数中我对 for 循环做了一些更改，下面的变量是为 getFilterValues() 和 getFilterValuesByInput($input) 实现的代码

function getFilterValues(dataView, column) {
            var seen = [];
           // for (var i = 0; i < dataView.getLength() ; i++) {
            for (var i = 0; i < dataView.getItems().length ; i++) { 
               // var value = dataView.getItem(i)[column.field];
                var value = dataView.getItems()[i][column.field];

                if (!_.contains(seen, value)) {
                    seen.push(value);
                }
            }


            return _.sortBy(seen, function (v) { return v; });
        }

getFilterValuesByInput($input) 的代码

function getFilterValuesByInput($input) {
            var column = $input.data("column"),
                filter = $input.val(),
                dataView = grid.getData(),
                seen = [];

           // for (var i = 0; i < dataView.getLength() ; i++) {
            for (var i = 0; i < dataView.getItems().length ; i++) { 
               // var value = dataView.getItem(i)[column.field];
                var value = dataView.getItems()[i][column.field];

                if (filter.length > 0) {
                    var mVal = !value ? '' : value;
                    var lowercaseFilter = filter.toString().toLowerCase();
                    var lowercaseVal = mVal.toString().toLowerCase();
                    if (!_.contains(seen, value) && lowercaseVal.indexOf(lowercaseFilter) > -1) {
                        seen.push(value);
                    }
                }
                else {
                    if (!_.contains(seen, value)) {
                        seen.push(value);
                    }
                }
            }

            return _.sortBy(seen, function (v) { return v; });
        }