从Slickgrid中的Dataview中获取已过滤的数据 [英] Get Filtered data from Dataview in Slickgrid

问题描述

我正在使用光滑网格的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）; 
 
 $ b dataView.onRowCountChanged.subscribe（e，args）{
 grid.updateRowCount（）; 
 
 grid.render（）; 
}）; 
 
 dataView.onRowsChanged.subscribe（e，args）{
 grid.invalidateRows（args.rows）; 
 grid.render（）; 
 
 
 
 
}）; 
 
 $ b $（grid.getHeaderRow（））。delegate（：input，change keyup，function（e）{
 var columnId = $（this）。 data（columnId）; 
 if（columnId！= null）{
 columnFilters [columnId] = $ .trim（$（this）.val（））; 
 dataView.refresh ）; 
 
 
} 
 
 
}）; 
 
 
 $ b 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（函数（item）{
（columnFilters中的var columnId）{
 if（columnId！== undefined&& columnFilters [columnId]！==） {
 var c = grid.getColumns（）[grid.getColumnIndex（columnId）]; 
 if（item [c.field]！= columnFilters [columnId]）{
 return false; 
} 
} 
} 
返回true; 
}）; 
 dataView.endUpdate（）; （b，b，b，b，b，b，b，b， sortCols; 
 
 myOBJ.sort（function（dataRow1，dataRow2）{
 for（var i = 0，l = cols.length; i <1; 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; 
 
 $ / code $ / $ p 
 
 
这是一个在dataview中名为filteredItems的变量。 
记得也要添加
 
 $ p $ getFilteredItems $ getFilteredItems 
 $ 
 
 
 $ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ c> 




I am using dataView property of slick grid to set data in slick grid. I applied header row filter. I want fetch filtered data on external button click. I am able to get all data by using dataview.getItems(), but when I filter data on header row and use same property dataview.getItems() it return all rows not the filter row data.

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

解决方案

This post is old, but i was also looking for a solution like this.

However almost every post i came across pointed me to your solution as well.

I got it to work by adding a getter for the filtered rows:

function getFilteredItems(){
    return filteredItems;
}

theres a variable called filteredItems in the dataview. remember to also add

"getFilteredItems" : getFilteredItems

under

$.extend(this, { ...

这篇关于从Slickgrid中的Dataview中获取已过滤的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！