前端本地實現搜索排序

排序實現： 首先有一個排序選擇框（按某個屬性進行排序），排序的觸發方法：

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 });
  };
複製代碼