javascript - 与 Dynamitable 库精确匹配

Question

我有一个关于 https://github.com/Dynamitable/Dynamitable 的问题.

当我尝试过滤结果时，它不会显示完全匹配的结果。例如，当我在过滤框中输入 1 时，它会带来包括 1 在内的所有值。当我尝试过滤时，是否可以使其仅显示确切的数字？

感谢您的帮助!

Answer 1

在这里我更改了库并添加了您想要的精确匹配功能。查看分数过滤器输入，我添加了一个属性 searchType="exact"它将搜索包含此属性的那些输入的完全匹配

在 this.filter 中进行了更改

  this.filter = function filter(index, matches, searchType) {
       if (searchType != "exact" || matches.length<=0 )
       {        
        var regex = new RegExp(matches, 'i');
        dynamitableCore.getRows().each(function () {
            if(true !== regex.test(dynamitableCore.getValue(index, $(this)))) {
                $(this).hide();
            }
        });

       }else {
            // added this
            dynamitableCore.getRows().each(function () {
            var v = dynamitableCore.getValue(index, $(this));
            if(v != matches) {
                $(this).hide();
            }
        });

       }
        return this;
    };

!function($){ 'use strict';

    $.fn.dynamitable = function(options) {
    
        /**********************************************
         * dynamitable
         **********************************************/
        var dynamitable = this;
        
        /**********************************************
         * dynamitableCore
         **********************************************/
        var dynamitableCore = new (function($dynamitable) {
        
            /**********************************************
             * dynamitableCore.getIndex($field)
             *
             * get the index of a field
             *
             * return integer
             **********************************************/
            this.getIndex = function($field) {
                return $field.parents('tr').children('td, th').index($field);
            };
            
            /**********************************************
             * dynamitableCore.getBody()
             *
             * get the body of the table
             *
             * return dom
             **********************************************/
            this.getBody = function() {
                return $dynamitable.find('tbody');
            };
            
            /**********************************************
             * dynamitableCore.getRows()
             *
             * get all row inside the body of the table
             *
             * return dom
             **********************************************/
            this.getRows = function() {
                return this.getBody().children('tr');
            };
            
            /**********************************************
             * dynamitableCore.getField(index, $row)
             *
             * get a field
             *
             * return dom
             **********************************************/
            this.getField = function(index, $row) {
                return $row.children('td, th').eq(index);
            };
            
            /**********************************************
             * dynamitableCore.getValue(index, $row)
             *
             * get a field value
             *
             * return string
             **********************************************/
            this.getValue = function(index, $row) {
                return this.getField(index, $row).text();
            };
            
        })($(this));   
        
        /**********************************************
         * dynamitable.filterList
         *
         * list of filter selector
         *
         * array of string
         **********************************************/
        this.filterList = [];
        
        /**********************************************
         * dynamitable.displayAll()
         *
         * show all <tr>
         *
         * return dynamitable
         **********************************************/
        this.displayAll = function() {

            dynamitableCore.getRows().each(function() {
                $(this).show();
            });
          
            return this;
        };

        /**********************************************
         * dynamitable.filter(index, matches)
         *
         * hide all <tr> that doen't martch
         *
         * - index (integer): index of the colum to filter
         * - matches (string)  : string to search on the colum
         *
         * return dynamitable
         **********************************************/
        this.filter = function filter(index, matches, searchType) {
           if (searchType != "exact" || matches.length<=0 )
		   {		
            var regex = new RegExp(matches, 'i');
            dynamitableCore.getRows().each(function () {
                if(true !== regex.test(dynamitableCore.getValue(index, $(this)))) {
                    $(this).hide();
                }
            });
          
		   }else {
			   
                dynamitableCore.getRows().each(function () {
			    var v = dynamitableCore.getValue(index, $(this));
                if(v != matches) {
                    $(this).hide();
                }
            });
			   
		   }
            return this;
        };
        
        /**********************************************
         * dynamitable.addFilter(selector)
         *
         * add filter event on element inside the table heading
         *
         * - selector (string) : selector of the element that trigger the event
         *
         * return dynamitable
         **********************************************/
        this.addFilter = function addFilter(selector) {
        
            // add the selector on the filter list
            dynamitable.filterList.push(selector);
            
            // the filter
            var filterAction = function() {
            
                 dynamitable.displayAll();
                 
                 $(dynamitable.filterList).each(function(index, selector) {
                 
                    $(dynamitable).find(selector).each(function() {
                        var $this =  $(this);
						var searchType = $this.attr("searchType"); // eg string or decimal
                        dynamitable.filter(dynamitableCore.getIndex($this.parent('td, th')), $this.val(), searchType);  
                    });
                 
                 });
            };
            
            // attach the filter action to the selector
            $(selector).on('change keyup keydown', filterAction);
            
            // initialization
            filterAction();
            
            return this;
        }; 
        
        /**********************************************
         * dynamitable.addSorter(selector, order)
         *
         * add soter event on element inside the table heading
         *
         * - selector (string) : selector of the element that trigger the event
         * - order (string) :  sorting order [asc, desc]
         *
         * return dynamitable
         **********************************************/
        this.addSorter = function addSorter(selector, order) {

            $(dynamitable).find(selector).each(function() {
                var $this = $(this);
                
                var index = dynamitableCore.getIndex($this.parent('td, th'));
                
                $this.on('click', function() { dynamitable.sorter(index, order); });
            });
            
            return this;
        }; 
    
        /**********************************************
         * dynamitable.sorter(index, order)
         *
         * - index (integer): index of the colum to sorter
         * - order (string)  : sorting order [asc, desc]
         *
         * return dynamitable
         **********************************************/
        this.sorter = function sorter(index, order) {

           dynamitableCore.getBody().append(dynamitableCore.getRows().detach().sort(function(row_a, row_b) {

                var value_a = dynamitableCore.getValue(index, $(row_a));
                var value_b = dynamitableCore.getValue(index, $(row_b));
                
                var order_desc = ('desc' === order) ? true : false;
                
                // numeric order mode
                if(value_a.replace(/[^\d-]/g, '') !== '' && value_b.replace(/[^\d-]/g, '') !== '') {
                    value_a = parseFloat(value_a.replace(/[^\d,.\-\+]/g, ''));
                    value_b = parseFloat(value_b.replace(/[^\d,.\-\+]/g, ''));
                }
                
                if(value_a === value_b) {
                    return 0;
                }

                return (value_a > value_b) ? order_desc ? 1 : -1 : order_desc ? -1 : 1;

            }));
            
            return this;
        };
          
        return this;
    };
    
    /**********************************************
     * Dynamitable trigger
     **********************************************/
    $(document).find('.js-dynamitable').each(function(){
    
        $(this).dynamitable()
            .addFilter('.js-filter')
            .addSorter('.js-sorter-asc', 'asc')
            .addSorter('.js-sorter-desc', 'desc')
        ;
    });

}(jQuery);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dynamitable</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <style>
            <!--
            .glyphicon {
                cursor: pointer;
            }
            
            input, select{
                width: 100%;
            }
            
            .second, .glyphicon-chevron-down, .glyphicon-chevron-up{
                color: red;
            }

            -->
        </style>
    </head>
    <body>
        <div class="col-xs-12  col-sm-12 col-md-10 col-md-offset-1 col-lg-10  col-lg-offset-1">
        
            <h1><span class="first">Dynami</span><span class="second">table</span></h1>
            
            <div class="table-responsive">
            
                <!-- Initialization 
                * js-dynamitable => dynamitable trigger (table)
                -->
                <table class="js-dynamitable     table table-bordered">
                    
                    <!-- table heading -->
                    <thead>
                    
                        <!-- Sortering
                        * js-sorter-asc => ascending sorter trigger
                        * js-sorter-desc => desending sorter trigger
                        -->
                        <tr>
                            <th>Name
                                <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                                <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                             </th>
                            <th>Email
                                <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                                <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                             </th>
                            <th>Age
                                <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                                <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                             </th>
                            <th>Account
                                <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                                <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                            </th>
                            <th>Scoring
                                <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                                <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                            </th>
                        </tr>
                        
                        <!-- Filtering
                        * js-filter => filter trigger (input, select)
                        -->
                        <tr>
                            <th>
                                <!-- input filter -->
                                <input  class="js-filter  form-control" type="text" value="">
                            </th>
                            <th>
                                <!-- select filter -->
                                <select class="js-filter  form-control">
                                    <option value=""></option>
                                    <option value="@dynamitable.com">dynamitable.com</option>
                                    <option value="@sample.com">Sample</option>
                                </select>
                            </th>
                            <th><input class="js-filter  form-control" type="text" value=""></th>
                            <th><input class="js-filter  form-control" type="text" value=""></th>
                            <th><input class="js-filter  form-control" searchType="exact" type="text" value=""></th>
                        </tr>
                    </thead>
                    
                    <!-- table body -->
                    <tbody>
                        <tr>
                            <td>Freddy Krueger</td>
                            <td>freddy.krueger@sample.com</td>
                            <td class="text-right">122</td>
                            <td class="text-right">2300$</td>
                            <td class="text-right">+15</td>
                        </tr>
                        <tr>
                            <td>Clint Eastwood</td>
                            <td>clint.eastwood@sample.com</td>
                            <td class="text-right">62</td>
                            <td class="text-right">48 500$</td>
                            <td class="text-right">+12</td>
                        </tr>
                        <tr>
                            <td>Peter Parker</td>
                            <td>peter.parker@dynamitable.com</td>
                            <td class="text-right">22</td>
                            <td class="text-right">210$</td>
                            <td class="text-right">-5</td>
                        </tr>  
                        <tr>
                            <td>Bruce Wayne</td> 
                            <td>bruce.wayne@dynamitable.com</td>                  
                            <td class="text-right">42</td>  
                            <td class="text-right">-8500$</td>         
                            <td class="text-right">+2</td>                        
                        </tr>
                        <tr>
                            <td>Jackie Chan</td>
                            <td>jackie.chan@sample.com</td>
                            <td class="text-right">32</td>
                            <td class="text-right">-250.55$</td>
                            <td class="text-right">0</td>  
                        </tr>
                        
                        <tr>
                            <td>Bruce Lee</td>
                            <td>bruce.lee@sample.com</td>
                            <td class="text-right">32</td>
                            <td class="text-right">510$</td>
                            <td class="text-right">-7</td> 
                        </tr>
                         
                    </tbody>
                    
                </table>
            </div>
        </div>
        
        <!-- jquery -->
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        
        <!-- dynamitable -->
      
    </body>
</html>