环境:vue 2.9.3; webpack;
插件:z-tree,jquery(cnpm install xxxx)
问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集都是空。
目标:点击第一级查询当前父节点的子集,并展开父节点下面的子节点。
实现方式:el-tree(element-ui里面的树形控件)、z-tree
el-tree
使用这个方法可以获取当前点击节点的数据row,根据row的属性判断当前节点是不是父节点,如果是父节点就请求接口,在当前节点push子节点的数据,但是push的时候还是有点蛋疼,直接插入某个位置并不好操作,虽然最后还是实现了(添加的索引位置),但是并不适用,导致第一次点击父节点并不会直接展开,因为第一次是请求数据,所以不会展开,第二次点击就会展开,因为数据已经push进去了,但是很显然不行,很不人性化。
我不知道是我处理的方式不对还是咋的,鉴于时间,我也没有细致看el-tree的动态加载数据,所以跳过这里。
z-tree
引入z-tree和样式
import 'ztree' import 'ztree/css/metroStyle/metroStyle.css' import $ from 'jquery'
配置信息
shuyusetting:{ view: { showLine: false }, data: { simpleData: { enable: true } }, callback: { onClick: this.shuyuOnClick, //点击函数 onExpand: this.shuyuOnExpand, // 展开内容 } },
引用z-tree
<div style="cursor: pointer;min-height: 200px; max-height:300px; overflow-y: auto" > <ul id="shuyuSelect" class="ztree" style=" width: 230px; height: 30%;overflow:auto;cursor: pointer; " ></ul> // 注意id,下面需要用到id </div>
初始化控件,显示最顶级数据
var params=new Object();
this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, { headers: { 'X-AUTH-TOKEN': this.token } }).then((res) => { var data = JSON.parse(res.data); //console.log(data); if (!!data&&data.status=="1") { $.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data); // 初始化数据 id需要和上面一样 第二个是配置信息 第三个是顶层的数据
// console.log(this.knowledgetreedata); } else { return false; } }, (err) => { console.log(err); });
接下来是两个对应配置的函数
shuyuOnClick(event, treeId, treeNode){ if(!treeNode.isParent){ // 判断当前节点不是父级节点 //根据自己的数据来 var acknowledgeid = treeNode.id; var params= {id:acknowledgeid}; this.$http.post(this.ip+'/xhhms/rest/interRemoteReportController/v1/getKnowledgeByid', params, { headers: {'X-AUTH-TOKEN': localStorage.getItem('token') } }).then((res) => { var data = JSON.parse(res.data); if (!!data&&data.status=="1") { //console.log(data.data); document.getElementById('edit-iframe').contentWindow.postMessage(JSON.stringify({"DescriptionToReport":data.data.description}),"*"); document.getElementById('edit-iframe').contentWindow.postMessage(JSON.stringify({"ConclusionToReport":data.data.conclusion}) ,"*"); this.description = data.data.description; this.conclusion = data.data.conclusion; } else { return false; } }, (err) => { console.log(err); }); }else{ // 是父级 请求子级增加内容 this.shuyuOnExpand(event, treeId, treeNode); } }, shuyuOnExpand(event, treeId, treeNode){ console.log("shuyuOnExpand"); var treeNodeId = treeNode.id; if(treeNodeId == 0){ return; }else{ var params={parentid:treeNodeId}; this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, { headers: {'X-AUTH-TOKEN': localStorage.getItem('token') } }).then((res) => { var data = JSON.parse(res.data); console.log("data"); if (!!data&&data.status=="1") { var tree = $.fn.zTree.getZTreeObj("shuyuSelect"); //重新渲染 if (!treeNode.zAsync){ tree.addNodes(treeNode, data.data); treeNode.zAsync = true; } else{ tree.reAsyncChildNodes(treeNode, "refresh"); //刷新内容 } } else { return false; } }, (err) => { console.log(err); }); } },
这是两个核心的函数。
## 如果需要展开第一行直接在初始化那里修改即可。
$.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data); var treeObj = $.fn.zTree.getZTreeObj("shuyuSelect"); var nodes = treeObj.getNodes(); treeObj.expandNode(nodes[0]); // 展开第一行