holiber / sl-vue-tree

Customizable draggable tree component for Vue.js
MIT License
344 stars 79 forks source link

I need filter function #55

Open FactAttacker opened 5 years ago

FactAttacker commented 5 years ago

Hello. I'm not very good at English and please acknowledge. and It's good module. Can you make a filter function on this? I think it is better.

thankyou!

holiber commented 5 years ago

Hi. Can you add more description about what do you mean by filter function?

TranceGeniK commented 5 years ago

Hi, went here for that too

I know it can be made outside the scope of sl-vue-tree but I believe it could be useful for people to have a text field which can act as a "search" filter

It would hide all nodes (except parents of nodes which are shown) that don't match the text in the field, kind of what we can see in multiselect fields.

I hope my message makes sense ^^

TranceGeniK commented 5 years ago

Here's a method to customize to your needs @FactAttacker

filterNodes() {    
      function copy(o) {
        return Object.assign({}, o);
      }

      let f = (o) => {
        if (o[this.nodeKeyToFilter].toLowerCase().
            includes(this.filter.toLowerCase())) return true;

        if (o.children) {
          return (o.children = o.children.map(copy).filter(f)).length;
        }
      };

      this.filteredNodes = this.nodes.map(copy).filter(f);
    },
richcoleman-alphatrust commented 4 years ago

Here's a method to customize to your needs @FactAttacker

filterNodes() {    
      function copy(o) {
        return Object.assign({}, o);
      }

      let f = (o) => {
        if (o[this.nodeKeyToFilter].toLowerCase().
            includes(this.filter.toLowerCase())) return true;

        if (o.children) {
          return (o.children = o.children.map(copy).filter(f)).length;
        }
      };

      this.filteredNodes = this.nodes.map(copy).filter(f);
    },

Can you explain how this would be utilized along with the sl-vue-tree control?

richcoleman-alphatrust commented 4 years ago

Here's a method to customize to your needs @FactAttacker

filterNodes() {    
      function copy(o) {
        return Object.assign({}, o);
      }

      let f = (o) => {
        if (o[this.nodeKeyToFilter].toLowerCase().
            includes(this.filter.toLowerCase())) return true;

        if (o.children) {
          return (o.children = o.children.map(copy).filter(f)).length;
        }
      };

      this.filteredNodes = this.nodes.map(copy).filter(f);
    },

Can you explain how this would be utilized along with the sl-vue-tree control?

Never mind - once I wrapped my head around it, I figured it out.