jtopo 折叠与展开子节点

如果是只想简单的折叠和展开拓扑图的所有子节点，不对子节点的折叠状态做记录的话很简单。通过去递归遍历所有子节点，然后设置节点的显示属性 visible 就可以了。

如果需要记录子节点的折叠状态，我们可以通过一个对象来记录状态，下面是简单的实现：

var foldOpenStatus = {};            // 记录折叠状态
function foldOpen(e){               // 折叠展开var thisNode = e.target.text;   // 第一层以当前节点名称为 key 区分折叠状态var tarlink = e.target.outLinks;if(tarlink == undefined){return}if(tarlink.length != 0 && tarlink[0].visible === true){var status = [];for (var i = 0; i < tarlink.length; i++){status[i] = {node: tarlink[i].nodeZ.visible, link: tarlink[i].visible};foldOpenStatus[thisNode] = status;tarlink[i].nodeZ.visible = false;tarlink[i].visible = false;// 下一层还有节点if( tarlink[i].nodeZ.outLinks.length != 0){ dbfold(tarlink[i].nodeZ.outLinks, foldOpenStatus[thisNode][i]);}}}else if(tarlink.length != 0 && tarlink[0].visible === false){for (var k = 0; k < tarlink.length; k++){tarlink[k].nodeZ.visible =  foldOpenStatus[thisNode][k].node;tarlink[k].visible = foldOpenStatus[thisNode][k].link;// 下一层还有节点if( tarlink[k].nodeZ.outLinks.length != 0){dbOpen(tarlink[k].nodeZ.outLinks, foldOpenStatus[thisNode][k]);}}}function dbfold(dblink,foldStatus){var status = [];  // 下层以 status 为 key 记录for(var j = 0; j < dblink.length; j++){status[j] = {node: dblink[j].nodeZ.visible, link: dblink[j].visible};foldStatus.status = status;dblink[j].nodeZ.visible = false;dblink[j].visible = false;if( dblink[j].nodeZ.outLinks.length != 0){ dbfold(dblink[j].nodeZ.outLinks, foldStatus.status[j]);}}}function dbOpen(dblink, openStatus){for(var j = 0; j < dblink.length; j++){dblink[j].nodeZ.visible = openStatus.status[j].node;dblink[j].visible = openStatus.status[j].link;if( dblink[j].nodeZ.outLinks.length != 0){ dbOpen(dblink[j].nodeZ.outLinks, openStatus.status[j]);}}}
}

使用姿势：


var thatX,thatY,thisX,thisY;
scene.addEventListener('mousedown', function(e){if(e.button == 0){thatX = e.offsetX;thatY = e.offsetY;}
});
scene.addEventListener('mouseup', function(event) {if(event.button == 0){thisX = event.offsetX;thisY = event.offsetY;var distanceX = Math.abs(thisX - thatX);var distanceY = Math.abs(thisY - thatY);if(distanceX > 20 || distanceY > 20){ // 区分拖拽和单击事件}else if(event.target && event.target.elementType == "node"){event.target.removeEventListener("click");event.target.addEventListener("click",function(event){foldOpen(event); // 折叠与展开子节点功能});}}
});

需要注意，在节点创建的时候需要添加 click 事件监听，哪怕什么也不做：

function addNode(text){var node = new JTopo.Node(text);node.addEventListener("click",function(event){// 此事件不可删除});scene.add(node);return node;
}

下面是一个完整的使用例子：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title> jtopo 子节点折叠展开 + 子节点环形布局 DEMO </title><style>body{padding: 0;margin: 0;}.controlLeftBtn{width: 50px;height: 31px;cursor: pointer;position: absolute;}</style>
</head>
<body><div><canvas  id="canvas" width="1707" height="826"></canvas></div>
<script type="text/javascript" src="js/jtopo-min.js"></script>
<script>// 高度响应式let canvasDom = document.querySelector("#canvas");canvasDom.setAttribute('height',document.documentElement.clientHeight - 5);canvasDom.setAttribute('width',document.documentElement.clientWidth - 3);// 拓扑图数据var myData = [{"hostName":"SWITCH_192_168_123_43","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"SWITCH_192_168_123_63","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"SWITCH_192_168_123_64","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223"}]}]},{"hostName":"SWITCH_192_168_123_63","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"SWITCH_192_168_123_64","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223"}]},{"hostName":"SWITCH_192_168_123_64","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223"}]}]}]},{"hostName":"SWITCH_192_168_123_63","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"SWITCH_192_168_123_64","hostType":"2","hostHModel":"MS3228","hostStatus":"1","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223","list":[{"hostName":"AP192-168-123-62","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-47","hostType":"1","hostStatus":"1","hostHModel":"MP223"},{"hostName":"AP192-168-123-61","hostType":"1","hostStatus":"1","hostHModel":"MP223"}]}]}]}]}]}]},{"hostName":"AP192-168-123-32","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-32","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-32","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-32","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-32","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-32","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-51","hostType":"1","hostHModel":"MP223","hostStatus":"1"},{"hostName":"AP192-168-123-37","hostType":"1","hostHModel":"MP223","hostStatus":"1"}];// 画图drawTopo(myData);function drawTopo(data){var _strokeColor = '129,169,129';         // 线条颜色var _strokeColorFalut = '210,129,129';    // 离线线条颜色// 分离不同类型的节点var swiArrHasList = []; // 存在下层节点的交换机var justArr = [];       // 不存在下层节点的交换机或者 APfor(var i=0;i<data.length;i++){if(data[i].hostType == '2' && data[i].list ){ // 交换机，有下层节点swiArrHasList.push(data[i]);}if((data[i].hostType == '2' && !data[i].list) || (data[i].hostType == '1') ){ // 交换机，没有下层节点 或者 apjustArr.push(data[i])}}// 开始画图var canvas = document.getElementById('canvas');var stage = new JTopo.Stage(canvas);var scene = new JTopo.Scene();var thatX,thatY,thisX,thisY;scene.addEventListener('mousedown', function(e){if(e.button == 0){thatX = e.offsetX;thatY = e.offsetY;}});scene.addEventListener('mouseup', function(event) {if(event.button == 0){thisX = event.offsetX;thisY = event.offsetY;var distanceX = Math.abs(thisX - thatX);var distanceY = Math.abs(thisY - thatY);if(distanceX > 20 || distanceY > 20){ // 区分拖拽和单击事件if(event.target && event.target.elementType == "node"){event.target.removeEventListener("click");if (event.target && event.target.layout) {JTopo.layout.layoutNode(scene, event.target, true);}}}else if(event.target && event.target.elementType == "node"){event.target.removeEventListener("click");event.target.addEventListener("click",function(event){foldOpen(event);});}}});// 流式布局（水平、垂直间隔)var flowLayout = JTopo.layout.FlowLayout(100, 40); stage.wheelZoom = 1.25; // 滚轮缩放scene.alpha = 1;      // 通道透明度scene.backgroundColor = '54,57,63';stage.add(scene);function addNode(text){var node = new JTopo.Node(text);scene.add(node);node.addEventListener("click",function(event){// 此事件不可删除});// 修改节点选中样式node.paintSelected = function (a){  0 != this.showSelected && (a.save(), a.beginPath(), a.strokeStyle = "rgba(218,221,221, 0.7)", a.fillStyle = "rgba(218,221,221,0.7)", a.arc( 0, 0, this.width/2 + 3, 0, Math.PI*2, false), a.fill(), a.stroke(), a.closePath(), a.restore())};return node;}function addLink(nodeA, nodeZ, linkColor){var link = new JTopo.Link(nodeA, nodeZ);link.strokeColor = linkColor ||'204,204,204';link.lineWidth = 1;scene.add(link);return link;}// 不存在下层节点的设备，通过容器布局if(justArr.length != 0 ){var containerJustArr = new JTopo.Container('Just Container');containerJustArr.textPosition = 'Top_Center';containerJustArr.dragable = false;containerJustArr.fontColor = '180,180,180';containerJustArr.font = '14pt 微软雅黑';containerJustArr.alpha = 0; // 容器显示containerJustArr.fillColor = '242,242,242';containerJustArr.borderColor = '50,50,50';containerJustArr.borderRadius = 10; // 圆角containerJustArr.layout = flowLayout; // 不指定布局的时候，容器的布局为自动(容器边界随元素变化）scene.add(containerJustArr);var _justLen = justArr.length;var justcontainerW = Math.round(Math.sqrt(_justLen))*(110+20)/2; // 根据节点格式计算盒子宽度var justcontainerH = Math.round(Math.sqrt(_justLen))*(100+20);// 如果只有不存在下层节点的设备if(swiArrHasList.length == 0 ){ justcontainerW = Math.round(Math.sqrt(_justLen))*(110+20)*1.5;justcontainerH = Math.round(Math.sqrt(_justLen))*(100+20)/1.5;}containerJustArr.setBound(100, 100, justcontainerW, justcontainerH);for(var _ja = 0; _ja<justArr.length; _ja++){var justNode = addNode(justArr[_ja].hostName);scene.add(justNode);containerJustArr.add(justNode)}}// 存在下层节点的设备使用环形布局if(swiArrHasList.length != 0){var _hasListLen = swiArrHasList.length;var centerRadius = 500;var thisHostLayer = getHostLayerNum(_hasListLen); // 获取每个中心交换机的层数function getHostLayerNum(_hasListLen){var next = 0;var hostArr = [];for(var _w=0; _w<_hasListLen; _w++){hostArr[_w] = 0;getLayerNum(swiArrHasList[_w],1,_w)}// 获取每个中心交换机的层数function getLayerNum(node,num,_w){ //  节点，层数，第几个中心节点if(node.list){num++;for(var _l=0; _l<node.list.length; _l++){getLayerNum(node.list[_l],num,_w);}}else{next = num;if(num > hostArr[_w]){hostArr[_w] = num;}next = 0;}}return hostArr;}var positionArr = [];var justLen = justArr.length || 1;var listNodeTop = 50 * justLen;for(var i = 0; i < _hasListLen; i++){  // 画中心交换机var listNode = addNode(swiArrHasList[i].hostName);var nextLevelLen = swiArrHasList[i].list ? swiArrHasList[i].list.length : 0;var centerRadius = nextLevelLen ? (nextLevelLen * 300)/(2 * Math.PI) : 130;var listRadius = 0;if(swiArrHasList[i].list ){ // 画下层设备console.log("================ level "+ (thisHostLayer[i]-1) +"=================");listRadius = dragListDevice(thisHostLayer[i]-1, swiArrHasList[i].list, listNode);}// 中心交换机的位置listNode.setLocation(listRadius * (thisHostLayer[i]-1), listNodeTop);listNode.layout = {type: 'circle', radius: centerRadius + listRadius};scene.add(listNode);JTopo.layout.layoutNode(scene, listNode, true);  // 圆形布局}// 画下层设备function dragListDevice(layerNum, list, listNode){var circleRadius = 130;for(var i = 0; i < list.length; i++){var nextLevelLen = list[i].list ? list[i].list.length : 0;circleRadius = nextLevelLen ? (nextLevelLen * 150)/(2 * Math.PI) : 130; var dlNode = addNode(list[i].hostName);// 如果存在下层设备if( list[i].list && layerNum-1){circleRadius += dragListDevice(layerNum-1, list[i].list, dlNode);}dlNode.layout = {type: 'circle', radius: circleRadius };var dlLink = addLink(listNode, dlNode);dlLink.strokeColor = list[i].hostStatus == 1 ? _strokeColorFalut :  _strokeColor;scene.add(dlNode);scene.add(dlLink);}return circleRadius}}stage.centerAndZoom(); //缩放并居中显示
//      stage.zoomIn();}function rd(n,m){ // JS获取n至m随机整数var c = m-n+1;return Math.floor(Math.random() * c + n);}var foldOpenStatus = {}; // 记录折叠状态function foldOpen(e){ // 折叠展开var thisNode = e.target.text; // 以当前节点名称为 keyvar tarlink = e.target.outLinks;if(tarlink == undefined){return}if(tarlink.length != 0 && tarlink[0].visible === true){var status = [];for (var i = 0; i < tarlink.length; i++){status[i] = {node: tarlink[i].nodeZ.visible, link: tarlink[i].visible};foldOpenStatus[thisNode] = status;tarlink[i].nodeZ.visible = false;tarlink[i].visible = false;// 下一层还有节点if( tarlink[i].nodeZ.outLinks.length != 0){ dbfold(tarlink[i].nodeZ.outLinks, foldOpenStatus[thisNode][i]);}}}else if(tarlink.length != 0 && tarlink[0].visible === false){for (var k = 0; k < tarlink.length; k++){tarlink[k].nodeZ.visible =  foldOpenStatus[thisNode][k].node;tarlink[k].visible = foldOpenStatus[thisNode][k].link;// 下一层还有节点if( tarlink[k].nodeZ.outLinks.length != 0){dbOpen(tarlink[k].nodeZ.outLinks, foldOpenStatus[thisNode][k]);}}}function dbfold(dblink,foldStatus){var status = [];for(var j = 0; j < dblink.length; j++){status[j] = {node: dblink[j].nodeZ.visible, link: dblink[j].visible};foldStatus.status = status;dblink[j].nodeZ.visible = false;dblink[j].visible = false;if( dblink[j].nodeZ.outLinks.length != 0){ dbfold(dblink[j].nodeZ.outLinks, foldStatus.status[j]);}}}function dbOpen(dblink, openStatus){for(var j = 0; j < dblink.length; j++){dblink[j].nodeZ.visible = openStatus.status[j].node;dblink[j].visible = openStatus.status[j].link;if( dblink[j].nodeZ.outLinks.length != 0){ dbOpen(dblink[j].nodeZ.outLinks, openStatus.status[j]);}}}}</script>
</body>
</html>

jtopo 折叠与展开子节点相关推荐

iview的树形控件的使用尤其是点击文字展开子节点的方法
点击文字展开子节点的方法: this.$set(selectedNode, "expand", !selectedNode.expand);  & ...
echarts树状图点击展开子节点_CPU眼里的结构设备树节点及属性详解
1 设备树(device tree)简介DTSpec定义一个devicetree的约束来描述硬件设备,boot引导程序将设备树传递给用户程序的内存空间中,并传递给用户相应设备树的指针.设备树为一个树形 ...
vb treeview 展开子节点_详解最长公共子序列问题，秒杀三道动态规划题目
学算法认准 labuladong 后台回复进群一起力扣? 读完本文,可以去力扣解决如下题目: 1143.最长公共子序列(Medium) 583. 两个字符串的删除操作(Medium) 712.两个字符 ...
vb treeview 展开子节点_C# / VB.NET 在PPT中创建、编辑PPT SmartArt图形
本文介绍通过C#和http://VB.NET程序代码来创建和编辑PPT文档中的SmartArt图形.文中将分两个操作示例来演示创建和编辑结果. 使用工具:Spire.Presentation for ...
vb treeview 展开子节点_电路的一般分析法(01)—节点电压法及其算例
这里是一则小广告: 关注作者请点击这里哦:zdr0 我的专栏里面不仅有学习笔记,也有一些科普文章,相信我的专栏不会让您失望哦-大家可以关注一下:数学及自然科学记得点赞加收藏哦- 创作不易,请赞赏一下 ...
echarts树状图点击展开子节点_Echarts树形图展开和收缩
一.实现效果收缩效果: 展开效果: 二.实现代码展开/收缩切换 ; var dom = document.getElementById("container"); var m ...
ztree配置async异步加载子节点，展开不触发请求的问题解决记录
普通渲染方式如果是数据量不大,普通加载,按照ztree的数据格式,直接渲染就行 //这是我自己使用的数据格式 var zNodes = [{childs: [{ directory: false, ...
双击treeView的节点时使不展开不折叠子节点
有时候我们对树控件的双击默认操作不太满意,比如我们在双击一有子节点的节点的时候不希望打开或关闭它的子节点而想执行一个特定的操作,这时怎么来写呢,我这里有一个办法可以做到这一点: using Syste ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
el-tree实现类似windows文件列表，并支持折叠、展开和重命名
el-tree实现类似windows文件列表,并支持折叠.展开和重命名 1.需求: 后台管理系统的左侧导航菜单中文件管理下是个文件夹列表树, UI给的设计稿是这样的实现:左侧用了element的el ...

jtopo 折叠与展开子节点

jtopo 折叠与展开子节点

jtopo 折叠与展开子节点相关推荐

最新文章

热门文章