前端本地實(shí)現(xiàn)搜索排序

排序?qū)崿F(xiàn):
首先有一個(gè)排序選擇框(按某個(gè)屬性進(jìn)行排序),排序的觸發(fā)方法:

 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 // 需要排序的全部數(shù)據(jù)
this.state.tabledata// 排序后展示的數(shù)據(jù)

搜索實(shí)現(xiàn):
首先有一個(gè)搜索框,輸入點(diǎn)擊觸發(fā)搜索:

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 // 需要搜索的全部數(shù)據(jù)
this.state.tabledata// 搜索后展示的數(shù)據(jù)
//無輸入時(shí)顯示全部數(shù)據(jù)

根據(jù)數(shù)據(jù)類型篩選出需要顯示的數(shù)據(jù):
首先我們需要拿出數(shù)據(jù)的數(shù)據(jù)類型:

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 });
  };
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瘟栖,一起剝皮案震驚了整個(gè)濱河市菠赚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖柿冲,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異兆旬,居然都是意外死亡假抄,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門爵憎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慨亲,“玉大人,你說我怎么就攤上這事宝鼓⌒炭茫” “怎么了?”我有些...
    開封第一講書人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵愚铡,是天一觀的道長蛉签。 經(jīng)常有香客問我,道長沥寥,這世上最難降的妖魔是什么碍舍? 我笑而不...
    開封第一講書人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮邑雅,結(jié)果婚禮上片橡,老公的妹妹穿的比我還像新娘。我一直安慰自己淮野,他們只是感情好捧书,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著骤星,像睡著了一般经瓷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上洞难,一...
    開封第一講書人閱讀 51,624評(píng)論 1 305
  • 那天舆吮,我揣著相機(jī)與錄音,去河邊找鬼队贱。 笑死色冀,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的柱嫌。 我是一名探鬼主播呐伞,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼慎式!你這毒婦竟也來了伶氢?” 一聲冷哼從身側(cè)響起趟径,我...
    開封第一講書人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎癣防,沒想到半個(gè)月后蜗巧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蕾盯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年幕屹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片级遭。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡望拖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出挫鸽,到底是詐尸還是另有隱情说敏,我是刑警寧澤,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布丢郊,位于F島的核電站盔沫,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏枫匾。R本人自食惡果不足惜架诞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望干茉。 院中可真熱鬧谴忧,春花似錦、人聲如沸角虫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽上遥。三九已至搏屑,卻和暖如春争涌,著一層夾襖步出監(jiān)牢的瞬間粉楚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來泰國打工亮垫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留模软,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓饮潦,卻偏偏與公主長得像燃异,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子继蜡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說閱讀 10,983評(píng)論 6 13
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,103評(píng)論 1 32
  • 1回俐、窗體 1逛腿、常用屬性 (1)Name屬性:用來獲取或設(shè)置窗體的名稱,在應(yīng)用程序中可通過Name屬性來引用窗體仅颇。 ...
    Moment__格調(diào)閱讀 4,549評(píng)論 0 11
  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的忘瓦。 ??事件搁廓,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,493評(píng)論 1 11
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,128評(píng)論 0 21