vue使用树形控件z-tree,动态添加数据,默认展开第一行
环境: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]); // 展开第一行
vue使用树形控件z-tree,动态添加数据,默认展开第一行的更多相关文章
- AX 用代码创建FORM动态加控件,重载动态添加的控件的方法。
eg. 范例:class\RFIDReadWriteForm/Build方法. formRun.controlMethodOverload(true); formRun.controlMethodOv ...
- ant -design vue a-tree 树形控件
话不多说,先上代码. <a-tree v-if="this.treeData && this.treeData.length > 0" ref=&quo ...
- 基于vue开发的element-ui树形控件报错问题解决
对没错,这次又是ElementUI的问题,在使用ElementUI中的 tree 树形控件时需要动态添加DOM元素,但是在使用文档中给出的案例的时候会报错. 案例:ElementUI树形控件 - 自定 ...
- 树形控件QTreeWidget
import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QApplication, QWidget, QTreeWidge ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- vue_elementUI_ tree树形控件 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...
- VS2010/MFC编程入门之三十一(常用控件:树形控件Tree Control 下)
前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例. 树形控件的创建 MFC为树形控件提 ...
- zTree 树形控件 ajax动态加载数据
很久没搞过树形控件了 , 再次接触看官网文档有点没懂,于是在网上找了个代码copy上,但数据是写死的,就想这在用ajax异步取出数据替换,下面是js代码 <SCRIPT type="t ...
- VS2010-MFC(常用控件:树形控件Tree Control 下)
转自:http://www.jizhuomi.com/software/203.html 前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件 ...
随机推荐
- git 项目配置用户名、邮箱的方法
git 项目配置用户名.邮箱的方法 单个仓库里,配置用户名.邮箱: git config user.name "姓名" git config user.email "邮箱 ...
- elasticsearch 基础 语法总结
1. es 使用 restful 风格的 api 备注: es 的 api 格式 基本是这个样 请求方式 /索引名/文档名/id?参数 ,但是 还有 很多不是这样的 请求,比如 ...
- VMware虚拟机里centos7下安装mysql5.6并授权远程连接Navicat
这节来安装Mysql5.6,并远程授权连接本地windows的Navicat,可以根据以下步骤安装.此文章为自己收藏,必要时拿出来直接用的,有需要的友友可以查看查看的.文章图片有借助于网络的. 1.新 ...
- CF 316G3 Good Substrings——广义后缀自动机
题目:http://codeforces.com/contest/316/problem/G3 对询问串和模式串一起建一个后缀自动机,做出在每个串上的 right 集合大小之后枚举自动机上的每个点看看 ...
- 在free bsd上跑JMeter 的 plugin "PerfMon Server Agent"
在free bsd上跑JMeter 的 plugin "PerfMon Server Agent" 目的: 在free bsd上跑JMeter 的 plugin "Per ...
- slice.indices()/collections.Counter笔记
关于slice.indices() >>> help(slice) Help on class slice in module builtins: class slice(objec ...
- MySQL程序之mysqldump详解
mysqldump命令详解 mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等 用法: ...
- ML: 聚类算法R包-对比
测试验证环境 数据: 7w+ 条,数据结构如下图: > head(car.train) DV DC RV RC SOC HV LV HT LT Type TypeName 1 379 85.09 ...
- Vivado HLS初识---阅读《vivado design suite tutorial-high-level synthesis》(6)
Vivado HLS初识---阅读<vivado design suite tutorial-high-level synthesis>(6) 1.创建工程与开启GUI 2.调试 查看关于 ...
- 单进程与 多进程关系及区别(多进程系统linux)
单进程编程:顺序执行 数据同步 复杂度低 用途单一 多进程编程:同时执行 数据异步 复杂度高 用途广泛 1. 多进程的优势在于任务的独立性,比如某个任务单独作为一个进程的话,崩溃只影响自己的服务,其他 ...