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



  • 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



  • 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



  • 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



  • This post is deleted!

Log in to reply