[Not solved by Quasar, but manual coding]Auto expand for lazy QTree node

maxxiris

I am using lazy node for QTree. Everything is fine until I want to auto expand for lazy QTree node

I try

<q-tree
  :nodes="donvi"
  
  node-key="label"
  @lazy-load="onLazyLoad"
  :expanded="['Node 1',  'Node 2']"
  :selected.sync="selected"
  
  />

where Node 1 and Node 2 is lazy node, and It does not expand.

Hope anyone could help. Tks alot

maxxiris

I just dont want to reinvent the wheel, so hope QTree has some hidden API to do it (cant find in docs). If any dev around here could tell me yes or no, it ll be great.

If answer is NO, I will try to write my own recursive lazy to load tree node

Tks for any info

maxxiris

I come to my own solution like this

Setting for tree

<q-tree ref='tree'
  :nodes="treeData"
  
  node-key="id"
  @lazy-load="onLazyLoad"
  :selected.sync="selected"
  :expanded.sync="expanded"
  
  />

Declare treeData and treeChange for watching if there changing in loading tree node

export default {
  data () {


    return {
      treeData : [],
      treeChange: 0,
    }
    
  },

in mount, load array of tree need to be load (in order) and assign root node

  mounted: async function() {

    /* LOAD TREE ROOT NODE */

    this.firstLoadTree = true; //For checking if firstload of tree
    this.currentLoadNode = [150000,150138,150143,150299];  //List of node to be read, in order 
   
    let res = await axios({
        method: 'get',
        url: '/api/index.php?option=com_api&cat=core&controller=tree&task=getRoot',
    })
    this.rootId = parseInt(res.data.rootId) //get RootId
    this.treeData = [{label:res.data.rootName, id: this.rootId, lazy: true }]; // First node assign
    this.treeChange++; //Inform changing in tree

  },

lazy function

   onLazyLoad ({ node, key, done, fail }) {

      let parent_id = node.id

      axios({
          method: 'get',
          url: '/api/index.php?option=com_hoso&view=treeview&task=treeview&format=raw&id='+parent_id,
      })
      .then(res => {
        // If no children tree return
        if(res.data == null){
          done([])
          return
        }

        // Process to create tree
        let donvis = res.data;  //tree node data
        let treeNodes = [];  
        let path,icon,lazy;      

        for(let i = 0; i < donvis.length; i++){
          

          let id = parseInt(donvis[i].id);

          // Define Tree ARRAY for draw tree
          treeNodes [i] = {
             label: donvis[i].data, 
             lazy: true, 
             id: id,
             parent_id: parent_id,
          }
        }
                
        done(treeNodes ) //Draw tree
        this.treeChange++; //Marking tree change
        return null;
                  
      }) 
 
    }

Watch varible for tree change and load lazy tree in order

 watch: {

    treeChange: function(){


      this.$nextTick(function () { //Wait until all child component render

        let rootId = this.rootId      

        if(this.firstLoadTree == true){ //If first load Tree 
          
          this.firstLoadTree = false;

          if(this.currentLoadNode.length > 0){ 

                        
            if( this.currentLoadNode[0] == rootId){ //if firstnode == root, expand first and remove first node
              this.$refs.tree.setExpanded(rootId, true); //Expand tree first, then remove first               
              this.currentLoadNode.shift(); 
              
            }else{ //empty current loadNode array set then expand root if first loadnode not root

              this.currentLoadNode = []; 
              this.$refs.tree.setExpanded(rootId, true); 

            }       

          }else{ //if there is no load node, just load the root
            this.$refs.tree.setExpanded(rootId, true);
          }

        }else{ //Second and after lazy load when first node is root

          if(this.currentLoadNode.length > 0){ 

              this.$refs.tree.setExpanded(this.currentLoadNode[0], true); 
              this.currentLoadNode.shift();

          }
        }

      })

    },//end treeChange watch

  }

WHAT DO NEXT

Above just proof of concept, we need to do more:

Save lazy node to cookie or store
Load from cookie, store
Create iniTree switch to deferentiate between normal lazy load or tree inits node (from loadNode) and normal user click to decide save node to cookie or store

WHAT I HOPE FROM QUASAR QTREE

QTree add attribute like “lazy node” and we simply put array here for lazy loading node in order

maru

This post is deleted!

No More Posting New Topics!