jQuery树形控件zTree使用小结

2020-05-23 06:17:32易采站长站整理

<li id="m_stop" onclick="treeStop()">收起所有</li>
</ul>
</div>

实现zTree右键单击事件回调函数 


//右键单击回调函数
function OnRightClick(event, treeId, treeNode) {
$("#treeZo").hide();
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY); //根据鼠标位置显示右键操作面板
} else if (treeNode && !treeNode.noR) {
zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
}
$("#treeZo").show();
}
//根据节点类型,控制右键操作菜单哪些可用哪些不可用
function showRMenu(type, x, y) {
$("#rMenu ul").show();
if (type == "root") {
$("#m_del").hide();
$("#m_edit").hide();
$("#m_left").hide();
$("#m_right").hide();
$("#m_up").hide();
$("#m_down").hide();
$("#m_add").addClass('mboder');
} else {
$("#m_del").show();
$("#m_edit").show();
$("#m_left").show();
$("#m_right").show();
$("#m_up").show();
$("#m_down").show();
$("#m_add").removeClass('mboder');
}
rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });
$("body").bind("mousedown", onBodyMouseDown);
}
//以藏右键面板
function hideRMenu() {
if (rMenu) rMenu.css({ "visibility": "hidden" });
$("body").unbind("mousedown", onBodyMouseDown);
}
//单击页面其他位置 隐藏右键面板
function onBodyMouseDown(event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
rMenu.css({ "visibility": "hidden" });
}
}

新增节点 


//增加节点
function addTreeNode() {
hideRMenu();
var name = new Date().getTime(); //利用时间戳生成节点名称,保证节点名称唯一
var newNode = {
name: name
};
if (zTree.getSelectedNodes()[0]) {
newNode.checked = zTree.getSelectedNodes()[0].checked;
newNode.pid = zTree.getSelectedNodes()[0].id;
zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
} else {
zTree.addNodes(null, newNode);
}
var node = zTree.getNodeByParam("name", name, null); //得到新增加的节点
zTree.selectNode(node); //选中新增加的节点
zTree.editName(node); //让新增加的节点处于编辑状态
}

编辑节点


function editTreeNode() {
var nodes = zTree.getSelectedNodes(); //得到选中节点集合
if (nodes && nodes.length > 0) {