M
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
