javascript – 当用户点击slick-header-menuitem下拉列表时,如何将所有数据导入到slickgrid中.

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

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

现在,一旦我点击复选框来过滤数据,无论我需要过滤的数据,它都会过滤这些数据,没有任何问题.在这里,每个东西都按预期工作,因为在我的过滤器下拉列表中我有4个选项(全选) ,空白,IT,美国,美国)如下图所示.

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

为了参考我的网格看起来像这样(下面是网址)除了搜索和分页

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

我还附上了两张照片

第一张图片表示我第一次点击slick-header-menuitem dropdown.

第二个图像表示我再次点击过滤后的数据后的slick-header-menuitem下拉列表.

我已经浏览了slickgrid库,其中有一个插件文件夹,此文件夹包含filter文件夹,filter文件夹包含ext.headerfilter.js
此文件包含名为“function getFilterValues(dataView,column){…}”的方法,“function getFilterValuesByInput($input){…}”和“function getAllFilterValues(data,column){…}”,i调试它但不会取得任何成功.

解决方法:

最后进行了大量的调试,我得到了过滤记录的解决方案
在这里,我不打扰光滑网格库,根据我的经验,这是一个很棒的库
所以根据我的要求,我在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; });
        }

标签：jquery,javascript,html5,slickgrid
来源： https://codeday.me/bug/20190627/1308826.html