前端本地实现搜索排序

排序实现： 首先有一个排序选择框（按某个属性进行排序），排序的触发方法：

Sort = value => {
    console.log(value);
    var sortObj = this.state.defaultData.sort(this.compare(value));
    this.setState({ tabledata: sortObj });
  };

compare = property => {
    return function(objF, objS) {
      var valueF = objF[property];
      var valueS = objS[property];
      return valueS - valueF; // 升序
    };
  };
this.state.defaultData // 须要排序的所有数据
this.state.tabledata// 排序后展现的数据
复制代码

搜索实现： 首先有一个搜索框，输入点击触发搜索：

IPSearch = value => {
    console.log(value);
    if (value.length > 0) {
      var arr = [];
      this.state.defaultData.map(item => {
        if (item.Ip.split(value).length > 1) {
          arr.push(item);
        }
      });
      this.setState({ tabledata: arr });
    } else {
      this.setState({ tabledata: this.state.defaultData });
    }
  };
this.state.defaultData // 须要搜索的所有数据
this.state.tabledata// 搜索后展现的数据
//无输入时显示所有数据
复制代码

根据数据类型筛选出须要显示的数据： 首先咱们须要拿出数据的数据类型：

selectData = () => {
    const env = [];
    const idc = [];
    this.state.tabledata.map(item => {
      env.push(item.Env);
      idc.push(item.Idc);
    });
    var envset = Array.from(new Set(env));
    var idcset = Array.from(new Set(idc));
    this.setState({ idcList: idcset, envList: envset });
  };
//利用Set方法去重
复制代码

筛选：

Idc = value => {
    var arr = [];
    this.state.defaultData.map(item => {
      if (item.Idc === value) {
        arr.push(item);
      }
    });
    this.setState({ tabledata: arr });
  };

  Env = value => {
    var arr = [];
    this.state.defaultData.map(item => {
      if (item.Env === value) {
        arr.push(item);
      }
    });
    this.setState({ tabledata: arr });
  };
复制代码