有时候我们需要知道在使用Handsontable时筛选掉了哪些数据，并对这些数据进行处理，可以使用afterFilter事件来进行相关操作。

　　Handsontable筛选掉的数据没有真的被删除，而是被隐藏了起来，我们需要知道这些被隐藏起来的行号，然后获得相关数据。

　　原始数据：

　　

　　相关代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>handsontable demo</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="handsontable/htstyle.css">

    <link rel="stylesheet" href="handsontable/htstyle-custom.css">

    <script src="handsontable/jquery-1.12.1.js"></script>

    <script src="handsontable/handsontable.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script>

        var data = [

            { riqi: '2017-01', address: '北京', goods: '冰箱', price: '3399', sales: 530, del: '' },

            { riqi: '2017-01', address: '天津', goods: '空调', price: '4299', sales: 522, del: '' },

            { riqi: '2017-01', address: '上海', goods: '洗衣机', price: '1299', sales: 544, del: '' },

            { riqi: '2017-01', address: '广州', goods: '彩电', price: '4599', sales: 562, del: '' },

            { riqi: '2017-01', address: '深圳', goods: '热水器', price: '1099', sales: 430, del: '' },

            { riqi: '2017-02', address: '重庆', goods: '笔记本电脑', price: '4999', sales: 666, del: '' },

            { riqi: '2017-02', address: '厦门', goods: '油烟机', price: '2899', sales: 438, del: '' },

            { riqi: '2017-02', address: '青岛', goods: '饮水机', price: '899', sales: 620, del: '' },

            { riqi: '2017-02', address: '大连', goods: '手机', price: '1999', sales: 500, del: '' }

        ];

        function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {

            Handsontable.renderers.TextRenderer.apply(this, arguments);

            if (prop == 'address') {

                td.style.color = '#32CD32';

            }

            else if (prop == 'price') {

                //格式化价格数据

                td.innerText = value != null ? numbro(value).format('0.00') : "";

            }

            else if (prop == 'sales') {

                //右对齐

                td.style.textAlign = 'right';

                td.innerText = value != null ? numbro(value).format('0,0.00') : "";

            }

            else if (prop == 'del') {

                //添加自定义的图片，并给图片的chick添加事件

                var escaped = Handsontable.helper.stringify(value),

                  imgdel;

                imgdel = document.createElement('IMG');

                imgdel.src = "handsontable/remove.png";

                imgdel.width = 20;

                imgdel.name = escaped;

                imgdel.style = 'cursor:pointer;';//鼠标移上去变手型

                Handsontable.dom.addEvent(imgdel, 'click', function (event) {

                    hot.alter("remove_row", row);//删除当前行

                });

                Handsontable.dom.empty(td);

                td.appendChild(imgdel);

                td.style.textAlign = 'center';

                return td;

            }

        }

        Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

        var hot = new Handsontable(document.getElementById('example'), {

            data: data,

            colHeaders: ['操作', '日期', '地点', '商品', '单价', '销量'], // 使用自定义列头

            rowHeaders: true,

            colWidths: 150, // 设置所有列宽为150像素

            filters: true,

            columnSorting: true,

            sortIndicator: true,

            autoColumnSize: true,

            manualColumnResize: true,

            undo: true,

            redo: true,

            wordWrap: true,

            copyable: true,

            mergeCells: false,

            manualRowResize: true,

            manualRowMove: true,

            manualColumnMove: false,

            renderAllRows: true,

            allowInsertRow: true,

            allowInsertColumn: false,

            fixedColumnsLeft: 1,

            columns: [{

                data: 'del',

                type: 'text'

            }, {

                data: 'riqi',

                type: 'date',

                dateFormat: 'YYYY-MM-DD'

            }, {

                data: 'address',

                type: 'text'

            }, {

                data: 'goods',

                type: 'text'

            }, {

                data: 'price',

                type: 'numeric'

            }, {

                data: 'sales',

                type: 'numeric'

            }],

            contextMenu: ['row_above', 'row_below', '---------', 'remove_row', '---------', 'undo', 'redo', '---------', 'make_read_only', '---------', 'alignment'],

            dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],

            cells: function (row, col, prop) {

                var cellProperties = {};

                cellProperties.renderer = "negativeValueRenderer";

                return cellProperties;

            },

        });

        //添加筛选成功后的触发事件

        hot.addHook('afterFilter', function () {

            var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号

            if (plugin.length <= 0) {

                return;

            }

            console.log(plugin);

            var DataArray = new Array();

            for (var i = 0; i < plugin.length; i++) {

                //通过行号获取数据

                DataArray.push(hot.getSourceDataAtRow(plugin[i]));

            }

            console.log(DataArray);

        });

    </script>

</body>

</html>

　　在操作中，我筛选掉了地点为北京的那一行，可以发现浏览器日志如下：

　　

　　

By QJL

Handsontable 筛选事件的更多相关文章

  1. handsontable插件事件

    Hook插件 afterChange (changes: Array, source: String):1个或多个单元格的值被改变后调用     changes:是一个2维数组包含row,prop,o ...

  2. handsontable前端excel学习笔记

    暂时没有好的中文资料,大概找了三遍随便看看,之后重点研究其github 1.Handsontable 学习笔记-Methods 2. Handsontable通用方法 3.handsontable的核 ...

  3. jquery+easy ui 实现表格列头筛选

    示例代码 1.筛选的下拉 <a href="javascript:void(0)" id="filterStatus" class="easyu ...

  4. SQL Server 扩展事件

    SQL Server 扩展事件(Extended Event)是用于服务器的常规事件处理系统,是追踪SQL Server系统运行状态的神器,同时也是一个日志记录工具,扩展事件完全可以取代SQL追踪(S ...

  5. jQuery 实战读书笔记之第六章：事件本质

    理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...

  6. Django多条件筛选查询

    转自:https://www.jianshu.com/p/a86281df530e Django多条件筛选查询 主模型只存在外键一对多关系 模型设计 # 快捷筛选状态 class Status(mod ...

  7. 前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）

    效果图一:多选 效果图二:选项筛选 最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. windows7查看最近使用记录

    1.看计算机在哪天运行过~运行了多久! C:\Windows\SchedLgU.txt 2.看你最近运行过什么程序: C:\Windows\Prefetch 3.看你最近打开过什么文件(非程序)和文件 ...

  9. SQL Server安全（11/11）：审核（Auditing）

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

随机推荐

  1. IE8兼容问题总结---trim()方法

    1.IE8不支持,jquery的trim()去空格的方法 错误表现 : 会报错,对象不支持此属性或方法; 解决办法 : 使用正则匹配空格 例如 : /^\s+|\s+$/greplace(/^\s+| ...

  2. maven中的传递依赖和传递依赖的解除

    例如创建三个maven工程A B C pom文件分别为 A <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns: ...

  3. 来了解并防范一下CSRF攻击提高网站安全

    看一下我从网上找的原理图,结合举例描述,多看一遍你就知道怎么回事了. CSRF是什么呢?CSRF全名是Cross-site request forgery,是一种对网站的恶意利用,CSRF比XSS更具 ...

  4. (MonoGame从入门到放弃-3)-放弃MonoGame

    又一段时间过去了,这一章没内容了.我真的已经放弃MonoGame的学习了,MonoGame用起来感觉就是在自己实现2d游戏引擎一样,好多现代游戏引擎有的内容都没有...,我只是想做游戏,而不是给引擎添 ...

  5. 1×1卷积的用途（Network in Network）

    1×1卷积,又称为Network in Network 如果卷积的输出输入都只是一个平面,那么1x1卷积核并没有什么意义,它是完全不考虑像素与周边其他像素关系. 但卷积的输出输入是长方体,所以1x1卷 ...

  6. Python 实现单例模式的一些思考

    一.问题:Python中如何实现单例模式 单例模式指一个类只能实例化一个对象. 二.解决方案: 所有资料参考于: http://python.jobbole.com/87294/ https://ww ...

  7. python爬虫之基本知识

    随着数据的海量增长,我们需要在互联网上选取所需要的数据进行自己研究的分析和实验.这就用到了爬虫这一技术,下面就跟着小编一起初遇python爬虫! 一.请求-响应 在利用python语言实现爬虫时,主要 ...

  8. Web自动化之Headless Chrome测试框架集成

    使用Selenium操作headless chrome 推荐 简介 WebDriver是一个W3C标准, 定义了一套检查和控制用户代理(比如浏览器)的远程控制接口,各大主流浏览器来实现这些接口以便调用 ...

  9. javascript垃圾收集与性能问题

    一.垃圾收集 JavaScript具有自动垃圾收集功能,也就是说,执行环境会负责管理代码所占用的内存. 不同于C和类C语言,这些语言都需要手动监听内存的使用情况.JavaScript实现了自动管理内存 ...

  10. 获得某个月的天数（java, mysql, oracle）

    java方式: Calendar   cal   =   Calendar.getInstance(); cal.set(Calendar.YEAR,year); cal.set(Calendar.M ...