从Slickgrid中的Dataview获取过滤数据

时间:2014-04-17 09:49:51

标签: 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() )**
            });

1 个答案:

答案 0 :(得分:4)

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

然而,我遇到的几乎所有帖子都指出了你的解决方案。

我通过为过滤的行添加一个getter来实现它:

function getFilteredItems(){
    return filteredItems;
}

在dataview中有一个名为filteredItems的变量。 记得还要添加

"getFilteredItems" : getFilteredItems

下的

$.extend(this, { ...