Tree树状图的动态增删查改(中)新增节点

一、 新增节点

1、 新增的基本功能样式可以在tree里面的案例找到,我这里用的添加节点是子节点,父节点其实是不用插件里面那个添加的。只要配置合适,给子节点添加子节点,该节点就会自动变成父节点的,前提是取消节点锁定。

2、
下面三个a标签分别是添加、修改和删除,把id等值写对了就能对树进行编辑操作了。
在这里插入图片描述

3、 只要上面的HTML样式写对了,点击了a标签它插件就会自己调用下面的add方法,新增节点后,在data那里获取值传到控制器,再通过从控制器返回的id来添加到刚新增的节点上,这一步非常关键,如果没有成功返回id到节点上,后面对刚新增的节点进行修改或删除操作时就会失效,并且刷新下页面又可以了,这个问题就是新增后的节点没有id造成的。

//新增节点
        var newCount = 1;
        function add(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
             isParent = e.data.isParent,
             nodes = zTree.getSelectedNodes(),
             treeNode = nodes[0];
            name = "新建分类" + (newCount++);
            if (treeNode.id == 403) {
                return layer.msg(
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Visual Studio 调用 Echarts 树状图的 HTML 文件,并新增一个节点,可以按照以下步骤进行操作: 1. 在 Visual Studio 创建一个 Web 应用程序项目。 2. 在项目添加一个 HTML 文件,将 Echarts 树状图代码复制到文件。 3. 在代码找到数据源,将要新增节点数据添加到数据源。 4. 在代码找到绘图函数,调用绘图函数重新绘制树状图。 下面是一个简单的示例代码,可以帮助你实现向 Echarts 树状图添加一个节点: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 树状图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); var option = { series: { type: 'tree', data: [{ name: '节点1', children: [{ name: '节点2' }] }], top: '1%', left: '7%', bottom: '1%', right: '20%', symbolSize: 7, label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 9 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } }; // 绘制树状图 myChart.setOption(option); // 添加一个节点 option.series.data[0].children.push({ name: '节点3' }); // 重新绘制树状图 myChart.setOption(option); </script> </body> </html> ``` 在这个示例代码,我们首先创建了一个包含一个节点和一个子节点树状图。然后,在代码找到了数据源和绘图函数,并向数据源添加了一个新的节点。最后,我们调用了 `setOption` 函数重新绘制了树状图,这样就可以看到新的节点了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值