jquery - 从 Slickgrid 中的 Dataview 获取过滤后的数据

标签 jquery json filter slickgrid dataview

我正在使用光滑网格的 dataView 属性来设置光滑网格中的数据。我应用了标题行过滤器。我想在点击外部按钮时获取过滤后的数据。我可以使用 dataview.getItems() 获取所有数据,但是当我过滤标题行上的数据并使用相同的属性 dataview.getItems() 时,它会返回所有行不是过滤器行数据。

function bindSlickGrid(myOBJ) {

            var options = {
                enableCellNavigation: true,
                enableColumnReorder: true, multiColumnSort: true, showHeaderRow: true, headerRowHeight: 30
                , explicitInitialization: true

            };






            dataView = new Slick.Data.DataView();


            grid = new Slick.Grid("#myGrid", dataView, myColList, options);


            dataView.onRowCountChanged.subscribe(function (e, args) {
                grid.updateRowCount();

                grid.render();
            });

            dataView.onRowsChanged.subscribe(function (e, args) {
                grid.invalidateRows(args.rows);
                grid.render();




            });


            $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
                var columnId = $(this).data("columnId");
                if (columnId != null) {
                    columnFilters[columnId] = $.trim($(this).val());
                    dataView.refresh();


                }


            });



            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.init();



            dataView.beginUpdate();
            dataView.setItems(myOBJ);
            dataView.setFilter(function (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;
            });
            dataView.endUpdate();




            //Sort data 
            grid.onSort.subscribe(function (e, args) {
                var cols = args.sortCols;

                myOBJ.sort(function (dataRow1, dataRow2) {
                    for (var i = 0, l = cols.length; i < l; i++) {
                        var field = cols[i].sortCol.field;
                        var sign = cols[i].sortAsc ? 1 : -1;
                        var value1 = dataRow1[field], value2 = dataRow2[field];
                        var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
                        if (result != 0) {
                            return result;
                        }
                    }
                    return 0;
                });
                grid.invalidate();
                grid.render();


**console.log(dataview.getItems() )**
            });

最佳答案

这篇文章很旧,但我也在寻找这样的解决方案。

然而,我遇到的几乎每一篇文章都向我指出了您的解决方案。

我通过为过滤后的行添加一个 getter 来让它工作:

function getFilteredItems(){
    return filteredItems;
}

数据 View 中有一个名为filteredItems的变量。 记得还要添加

“getFilteredItems”:getFilteredItems

$.extend(this, { ...

关于jquery - 从 Slickgrid 中的 Dataview 获取过滤后的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23129836/

相关文章:

php - 自动完成搜索查询mysql

javascript - 使用 JavaScript 和浏览器中保存的 cookie 获取网站的 HTML 代码

jquery - 使用 jqprint 打印 Canvas 元素

javascript - 在 HTML canvas 上绘制的视频只能在 chrome 中播放,即使使用 webm

javascript - 如何将 Html 表更改为链接

sql-server - 将两列转换为键值 json 对象?

javascript - 加载动态 HTML - 服务器端或客户端

javascript - jQuery - 使用数据属性过滤表

angular - 清除过滤器 Angular 6

java - 如何在 HBase 表中查找在特定列中具有特定值的所有行