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

Question

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

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

现在，一旦我点击复选框来过滤数据，无论我需要过滤什么数据，它都会很好地过滤这些数据，而没有任何 issue.Uptill 这里的一切都像我的过滤器下拉列表中的预期一样工作有 4 个选项，例如 (Select All , Blank , IT ,U.S.A ,USA )，如下图所示。

但是问题从这里开始，一旦我在过滤下拉列表（过滤器 div）后再次单击 slick-header-menuitem 显示更多数据，例如 (Select All , Blank , IT ,U.S.A ,USA ,UNITED STATES,US) 因为我已经过滤了数据假设 (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; });
        }

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

How to get all the data into the slickgrid when user click on the slick-header-menuitem dropdown.?

javascript

jquery

html

slickgrid