目录树数据绑定有两种方式,同步和异步。
同步:一次性返回所有组织树数据,一次绑定;
异步:点击节点,只返回该节点的第一级子节点数据进行绑定,其他节点数据需要点击对应的父节点获取;
同步树和异步树进行更新的方式自然也不同;比如实现如下增删改查上下移动操作
如果是同步树:对目录树进行增删改查操作后,要实现及时刷新效果,需要重新请求一次接口,然后通过设置展开属性 展开到编辑节点即可;
如果是异步树:目录树实现增删改查操作,要及时刷新效果,只能通过触发点击父节点load函数实现;怎么实现及时刷新效果呢;
实现原理:在每次点击父节点,请求数据时,将resolve保存下来;增删改查操作后,通过执行resolve请求,重新请求父节点接口即可;思路如下
-
定义一个仓库变量,存储所有父节点resolve
// 存储所有父节点的对象(为实现实时刷新异步目录树) parentResolves: {}
- 第一次加载节点时,将resolve保存到仓库变量
// 其他节点
getOtherNode (node, resolve) {
let params = {
indexCode: node.data.indexCode,
camera: false
}
this.parentResolves[node.data.indexCode] = resolve //保存到仓库变量
this.asyncRequestTree(params, resolve)
},
- 定义局部刷新函数
// 局部刷新异步目录树
refreshPartFavGroup (parentIndexCode) {
let resolve = this.parentResolves[parentIndexCode]
this.asyncRequestTree({
indexCode: parentIndexCode,
camera: false
}, resolve)
},
- 更新目录后,调用局部刷新
// 删除收藏目录 deleteGroup () { if (this.clickedNode) { let _node = this.clickedNode let params = { indexCode: _node.data.indexCode } deleteFavGroup(params).then(res => { let msgType = res.msg === 'SUCCESS' ? 'success' : 'error' vueUtils.messageDialog(this, msgType, res.msg) msgType === 'success' ? this.refreshPartFavGroup(this.clickedNode.parent.data.indexCode) : (function () {})() this.clickedNode = null }) } else { vueUtils.messageDialog(this, 'warning', '必须选择一个目录') } },
这样可以实现局部刷新效果
-