ztree 更新配置后重新渲染树_zTree实现节点修改的实时刷新功能

一、应用场景

在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。

二、项目实践

比如要在test1234节点下新建子节点,首先要选中test1234节点,添加成功后,根据test1234结点的TID去后台请求对应子节点数据,实现动态刷新。删除节点类似。

三、代码实现

1、初始化时必须设置配置

async:{

enable:true,

url:"../admin/scriptManager/loadNodeByID.htm",

autoParam:["id"],

dataType:"json",

},

view: {

selectedMulti: false

}

}

2、刷新方法

/**

* 刷新当前节点

*/

function refreshNode() {

/*根据 treeId 获取 zTree 对象*/

var zTree = $.fn.zTree.getZTreeObj("scriptTree"),

type = "refresh",

silent = false,

/*获取 zTree 当前被选中的节点数据集合*/

nodes = zTree.getSelectedNodes();

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用zTree实现一级节点后面增加一个按钮靠右显示的完整代码: HTML代码: ```html <ul id="tree" class="ztree"></ul> ``` CSS样式: ```css .ztree li button { float: right; margin-right: 10px; } ``` JavaScript代码: ```javascript var zNodes = [ { id:1, pId:0, name:"节点1", open:true }, { id:11, pId:1, name:"节点1-1" }, { id:12, pId:1, name:"节点1-2" }, { id:13, pId:1, name:"节点1-3" }, { id:2, pId:0, name:"节点2", open:true }, { id:21, pId:2, name:"节点2-1" }, { id:22, pId:2, name:"节点2-2" }, { id:23, pId:2, name:"节点2-3" }, { id:3, pId:0, name:"节点3", open:true }, { id:31, pId:3, name:"节点3-1" }, { id:32, pId:3, name:"节点3-2" }, { id:33, pId:3, name:"节点3-3" } ]; var setting = { view: { addDiyDom: function(treeId, treeNode) { if (treeNode.level === 1) { var button = document.createElement('button'); button.innerHTML = '操作'; button.onclick = function() { alert('点击了操作按钮'); }; var aObj = $("#" + treeNode.tId + "_a"); aObj.append(button); } } }, data: { simpleData: { enable: true } } }; $(document).ready(function(){ $.fn.zTree.init($("#tree"), setting, zNodes); }); ``` 在上面的代码中,我们通过zTree的`addDiyDom`回调函数,在渲染节点时,判断当前节点的层级是否为1(即一级节点),如果是,则创建一个按钮元素,并绑定点击事件,最后将按钮元素添加到节点的`<a>`标签中。CSS样式中,我们将按钮元素的`float`属性设置为`right`,使其靠右显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值