前端树状结构搜索过滤解析

14 篇文章 0 订阅
5 篇文章 0 订阅

树状搜索参照element树过滤方法进行解析

假设后端传递树状结构为data

data: [
    {  
        id: 1,
        label: '一级 1',
        children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 11',
            }, {
              id: 10,
              label: '三级 12'
            },{
              id: 11,
              label: '三级 13'
        }]
    },{
            id: 12,
            label: '二级 1-2',
            children: [{
              id: 13,
              label: '三级 121'
            }, {
              id: 14,
              label: '三级 122'
            },{
              id: 15,
              label: '三级 123'
            }]
          }]
        }, {
        id: 2,
        label: '一级 2',
        children: [{
            id: 5,
            label: '二级 2-1'
        }, {
            id: 6,
            label: '二级 2-2'
        }]
    }, {
        id: 3,
        label: '一级 3',
        children: [{
            id: 7,
            label: '二级 3-1'
        }, {
            id: 8,
            label: '二级 3-2'
        }]
    }
]

过滤条件:显示节点中含有搜索值searchValue的结点

function filterNodeMethod(nodeData){
    return nodeData.label.indexOf(this.searchValue) !== -1;//结点名称中包含搜索值value返回true,否则返回false
}

搜索方法search:改变data数据

search(){
    let t = this.filterNodeMethod
    let array = []
    this.data.forEach((item)=>{
        n(item)
        if(item.visible){
            array.push(item)
        }
    })
      
     function n(r){
          var s = r.children ? r.children : []
          if (s.forEach(function(i) {
              i.visible = t(i)
              n(i)//递归
          }), !r.visible && s.length) {//做完前面的所有递归,当该节点的visible还是false,且children数组长度不为空,就去遍历children看里面的结点的visible有没有true的如果有那么说明这个结点也是true,把他变成true。
              let visible = false
              let pd = []
              s.forEach((e,index)=>{
                  if(e.visible){
                    visible = true
                    pd.push(e)
                  }
              })
            r.children = pd
            r.visible = visible
        } 
    }
    this.data = array
    console.log("this.data",this.data)
},

假设searchValue为3整颗树节点递归的顺序为:

一级1:false

二级1-1:false

三级11:false,三级12:false,三级13:true,由于这三个没有子节点,判断子节点长度为0所以不用做内部结点遍历判断状态,只要做完自身判断

由于二级1-1整个结点包括内部子节点全部做完判断,所以要遍历内部子结点(三级11:false,三级12:false,三级13:true)判断自身结点状态,二级1-1:true,并去除visible为false的子节点

二级1-2:false

三级121:false,三级122:false,三级123:true,,由于这三个没有子节点,判断子节点长度为0所以不用做内部结点遍历判断状态,只要做完自身判断

由于二级1-2整个结点包括内部子节点全部做完判断,所以要遍历内部子结点(三级121:false,三级122:false,三级123:true)判断自身结点状态,二级1-2:true,并去除visible为false的子节点

由于一级1整个结点包括内部子节点全部做完判断,所以要遍历内部子结点(二级1-1:true,二级1-2:true)判断自身结点状态,二级1:true

以下结点同理

 

如果是纯前端做搜索功能一旦改变data数据,再次获取全部数据要不重新请求,要不就要在初始把全部数据存储起来

看了element的做法是利用之前的visible作为判断依据来隐藏和显示结点,为false的隐藏,这也是一种方法,这样的话就不用对不符合要求的结点进行去除了

search(){
        let t = this.filterNodeMethod
        this.data.forEach((r)=>{
          n(r)
        })
        function n(r){
          var s = r.children ? r.children : []
          debugger
          if (s.forEach(function(i) {
              i.visible = t(i),
              console.log('visible',i.visible)
              n(i)
          }), !r.visible && s.length) {
              let visible = false
              s.forEach(function(e) {
                  if(e.visible){
                    visible = true
                  }
              })
              r.visible = visible
          } 
        }
        console.log("this.data",this.data)
      },

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值