table前端多条件筛选

• 定义方法

/**
 * _callback [function] 【搜索完成之后的回调函数】
 * _data [array] 【table数据】
 * /
function tableSearch(_callback, _data) {
  //克隆对象
  this.clone_obj = function(data){
    var d;
    if($.type(data) == 'array' ){
      d = [];
      for(i in data){
          d[i] = data[i];
      }
    }else if($.type(data) == 'object'){
      d = {};
      for(i in data){
          d[i] = data[i];
      }
    }else{
      d = data;
    }
    return d;
  }
  
  //根据键值删除指定的元素
  this.delete_val_by_key = function(keys, arr){
    for(var j=0,i=0; i<keys.length; i++){
      arr.splice(keys[i-j], 1);
      j++;
    }
    return arr;
  }
  
  this.callback = _callback;
  this.result = [];
  this.search_param = null;
  this.r  = [];
  this.data = [];
  if(this.data.length == 0){
    var data = _data;
    this.data = this.clone_obj(data);
  }
  //console.log(this.data.length);
  
    //初始化result
  this.init_result = function(){
    this.result = this.clone_obj(this.data);
  }
  
  //初始化 r
  this.init_r = function(){
    this.r = [];
  }
 
  //设置筛选参数
  this.set_search_param = function(search_param){
      this.search_param = search_param;
  }
    
  //筛选规则
  /*模糊筛选*/
  this.vagueSearch = function(str, column){
  this.init_r();
    var re = new RegExp(str, "i");
    // var is = [];
    for(var i=0; i<this.result.length; i++){
      // 由于获取td内容的时候，有时候会有一些标签字符串，所以这里我定义了一个search_item的class，如果有这个class的标签，则只需要检测该标签内的内容就可以
      var checkStr = this.result[i][column];
      var checkObj = $(checkStr);
      if (checkObj.length > 0) { // 标签字符串
        if (checkObj.hasClass('search_item')) {
          checkStr = checkObj.html();
        } else if (checkObj.find('.search_item').length > 0) {
          checkStr = checkObj.find('.search_item').html();
        }
      }
      if(re.test(checkStr)){
        this.r.push(this.clone_obj(this.result[i]));
        // is[is.length] = i;
      }
    }
  
    // this.result = this.delete_val_by_key(is, this.result);
    this.result = this.clone_obj(this.r);
  }
 
  /*区间查找*/
  this.betweenSearch = function(start, end, column){
    this.init_r();
    // var is = [];
    for(var i=0; i<this.result.length; i++){
      var checkStr = this.result[i][column];
      var checkObj = $(checkStr);
      if (checkObj.length > 0) { // 标签字符串
        if (checkObj.hasClass('search_item')) {
          checkStr = checkObj.html();
        } else if (checkObj.find('.search_item').length > 0) {
          checkStr = checkObj.find('.search_item').html();
        }
      }
      if(checkStr >= start && checkStr <= end){
  
        this.r.push(this.clone_obj(this.result[i]));
        // is[is.length] = i;
      }
    }
    // this.result = this.delete_val_by_key(is, this.result);
    this.result = this.clone_obj(this.r);
  }
 
  /*根据参数选择规则筛选*/
  this.select = function(params){
    //var rule_name = params.rule_name;
  
    switch(params.rule_name){
        case 'between':
    //console.log(this.result);
            this.betweenSearch(params.start, params.end, params.column);
            break;
        case 'vague':
            this.vagueSearch(params.str, params.column);
            break;
    }
  }
 
  /*清空 result */
  this.clearResult = function(){
      this.result = [];
  }
 
  //执行筛选
  this.search = function(){
    this.init_result();
    this.init_r();

    if(this.search_param){
        if($.type(this.search_param) == 'array'){
            for(var i=0; i <= this.search_param.length; i++){
      if(this.search_param[i]){
        this.select(this.search_param[i]);
      }
            }
        }else{
            this.select(this.search_param);
        }
    }
  
    //重新加载数据
    if (typeof this.callback == 'function') {
      this.callback(this.result);
    }
    this.clearResult();
    this.init_r();
  }
}

• 首先，初始化筛选对象

/**
 * 搜索完之后的回调函数，根据筛选后的数据重新渲染table
 * _data是筛选之后的数据
 * /
function table_reload(_data){
  var table = $('.table_content tbody');
  var str = '';
  for (var i = 0,len =_data.length; i < len; i++) {
    str += '<tr>';
    var temp_data = _data[i];
    for (var j = 1,len1 = temp_data.length; j < len1; j++) {
      str += '<td>' + temp_data[j] + '</td>';
    }
    str += '</tr>';
  }
  table.html(str);
}

var data = [];
var table_search = null; // table筛选对象
var table_searchParam = []; // 搜索参数
// 遍历表格获取数据，如果知道数据就不需要这一步
$('.table_content tr').each(function(){
    var index = $(this).index();
    data[index] = [];
    $(this).find('td').each(function(){
      data[index].push($(this).html());
    })
  })
  table_search = new tableSearch(table_reload, data); // 初始化table的搜索对象

• 监控筛选输入框

// 处理搜索参数
function goto_search(_index, _str){
  if (table_searchParam == []) {
    table_searchParam.push({rule_name:'vague',column:_index, str: _str});
  } else {
    var is_deal = false;
    for (var i = 0; i < table0_searchParam.length; i++) {
      if (table_searchParam[i].column == _index) {
        if (_str == '') {
          table_searchParam.splice(i, 1);
        } else {
          table_searchParam[i].str = _str;
        }
        is_deal = true;
      }
    }
    if (!is_deal) {
      table_searchParam.push({rule_name:'vague',column:_index, str: _str});
    }
  }
  table_search.set_search_param(table_searchParam);
  table_search.search();
}

// input输入框输入内容的时候触发筛选
$('.search_table input').on('input propertychange', function(){
   var index = $(this).closest('td').index()
   goto_search(index, $(this).val());
 });

// 如果有重置筛选的按钮，这里重置触发input的事件
$('.search_table .clear_seach').click(function(){
    // $(this).prev('input').val('').trigger("input");
    // 这里就不触发input事件了，直接调用goto_search
    $(this).prev('input').val('');
    var index = $(this).closest('td').index();
    goto_search(index, '')
  })