通过后台定义获取顶级节点

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - select menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false
},
check: {
enable: true
},
callback: {
onRightClick: OnRightClick
}
};

var zNodes =[
{id:1, name:"无右键菜单 1", open:true, noR:true,
children:[
{id:11, name:"节点 1-1", noR:true},
{id:12, name:"节点 1-2", noR:true}

]},
{id:2, name:"右键操作 2", open:true,
children:[
{id:21, name:"节点 2-1"},
{id:22, name:"节点 2-2"},
{id:23, name:"节点 2-3"},
{id:24, name:"节点 2-4"}
]},
{id:3, name:"右键操作 3", open:true,
children:[
{id:31, name:"节点 3-1"},
{id:32, name:"节点 3-2"},
{id:33, name:"节点 3-3"},
{id:34, name:"节点 3-4"}
]}
];

/*function OnRightClick(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {
var parentTId = sNodes[0].parentTId;
if(parentTId==null){
showRMenu();
}

}

}
*/
function OnRightClick(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {
var parentTId = sNodes[0].parentTId;
//我门后台人员把所有的顶级节点设置id为0;这样轻而易举就可以拿到顶层节点了
if(treeNode.pid==0){
showRMenu();
}

}

}
function showRMenu(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
function shoucang() {

}

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
rMenu = $("#rMenu");
});
//-->
</SCRIPT>
<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
margin: 1px 0;
padding: 0 5px;
cursor: pointer;
list-style: none outside none;
background-color: #DFDFDF;
}
</style>
</HEAD>

<BODY>


<ul id="treeDemo" class="ztree"></ul>

<div id="rMenu">
<ul>
<li id="m_add" onclick="shoucang();">收藏</li>
</ul>
</div>
</BODY>
</HTML>

转载于:https://www.cnblogs.com/lppswkf/p/7877745.html

在Element UI库中的`el-tree`组件中,动态添加父节点通常涉及到在后台获取数据或者用户交互时需要实时更新树形结构。这可以通过以下步骤实现: 1. **初始化数据**: 首先,在数据加载完成时,构建基础的树形结构。可以设置初始的数据结构为每个节点都只有子节点,而不包含父节点信息。 ```js const initialData = [ { id: 'parent1', children: [] }, // 其他根节点... ]; ``` 2. **添加方法**: 定义一个函数,当需要添加新节点并且指定其父节点时,你可以遍历当前树并找到正确的父节点,然后将新节点添加到该父节点的children数组中。如果需要创建新的顶级节点,则直接添加到顶层列表里。 ```js function addNode(parentId, newNode) { const parentNode = initialData.find(node => node.id === parentId); if (parentNode) { parentNode.children.push(newNode); } else { initialData.push({ id: newNode.id, children: [] }); } } ``` 3. **事件处理**: 当从用户界面触发添加操作时,比如点击按钮或输入值,调用`addNode`方法,并传递所需的父节点ID和新节点对象。 4. **更新视图**: 由于`el-tree`依赖于Vue的响应式系统,当你修改了节点数据,它会自动更新UI。所以,只要确保数据模型正确更新,UI就会跟随变化。 5. **虚拟滚动**(如果有需求):如果你的应用需要处理大量数据,考虑使用`el-tree`的虚拟滚动功能,以优化性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值