赞
踩
这个是在有关系图谱的基础上新加的一个衍生功能
1.配置节点展开/关闭按钮
defaultExpandHolderPosition:right,
2.展开/关闭按钮点击事件
:on-node-expand="onNodeExpand"
下面代码是 点击按钮后生成下级节点和节点校验(是否已经动态加载数据)
<setJsonData ref="graphRef" :on-node-expand="onNodeExpand" /> methods:{ onNodeExpand(node, e) { // // 判断是否已经动态加载数据了 if (node.data.childrenLoaded) { console.log('这个节点的子节点已经加载过了') return } // 根据具体的业务需要决定是否需要从后台加载数据 if (!node.data.isNeedLoadDataFromRemoteServer) { console.log('是否需要从后台加载数据') alert('未查到更多相关信息!') return } this.loadChildNodesFromRemoteServer(node, (new_data) => { this.g_loading = false this.$refs.graphRef .getInstance() .appendJsonData(new_data, (graphInstance) => { // 这些写上当图谱初始化完成后需要执行的代码 }) this.$refs.graphRef.refresh() }) }, loadChildNodesFromRemoteServer(node, callback) { //这里就是调用的下级节点接口 let url = '自行添加' _this .$http({ url: url, method: 'get', }) .then((result) => { let data = { rootId: _this.graphData.rootId, } data.nodes.forEach((item) => { //这里是确保每个下级节点都有打开关闭按钮 item.expandHolderPosition = 'right' item.expanded = false }) //callback:当设置完成后的回调函数,可以为空; callback(data) }) } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。