【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。

测试支持火狐，谷歌，IE10等。

主要使用ztree，拥有复选框，增加，修改，删除功能，这些是要连接后台的，自己再修改下就可以用。

效果如下图：

点击增加后会出现

代码如下：

<!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-3.5.js"></script><script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script><script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script><script type="text/javascript"><!--var setting = {view: {dblClickExpand: false},data: {simpleData: {enable: true}},check: {enable: true},callback: {onRightClick: OnRightClick}};var zNodes = [{ id: 1, pId: 0, name: "随意勾选 1", open: true },{ id: 11, pId: 1, name: "随意勾选 1-1", open: true },{ id: 111, pId: 11, name: "随意勾选 1-1-1" },{ id: 112, pId: 11, name: "随意勾选 1-1-2" },{ id: 12, pId: 1, name: "随意勾选 1-2", open: true },{ id: 121, pId: 12, name: "随意勾选 1-2-1" },{ id: 122, pId: 12, name: "随意勾选 1-2-2" },{ id: 2, pId: 0, name: "随意勾选 2", checked: true, open: true },{ id: 21, pId: 2, name: "随意勾选 2-1" },{ id: 22, pId: 2, name: "随意勾选 2-2", open: true },{ id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true },{ id: 222, pId: 22, name: "随意勾选 2-2-2" },{ id: 23, pId: 2, name: "随意勾选 2-3" }];function OnRightClick(event, treeId, treeNode) {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);}}function showRMenu(type, x, y) {$("#rMenu ul").show();if (type == "root") {$("#m_del").hide();$("#m_check").hide();$("#m_unCheck").hide();} else {$("#m_del").show();$("#m_check").show();$("#m_unCheck").show();}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 showRMenu(type, x, y) {$("#rMenu").show();if (type == "root") {$("#rMenu").hide();} else {$("#m_del").show();$("#m_modify").show();}//0000000,0000001,0000002,不可以删除修改  zTree = $.fn.zTree.getZTreeObj("treeDemo");nodes = zTree.getSelectedNodes();treeNode = nodes[0];if (treeNode != null) {treeID = treeNode.id;if (treeID == '00000000' || treeID == '00000001' || treeID == '00000002') {$("#m_modify").hide();$("#m_del").hide();}}rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });$("body").bind("mousedown", onBodyMouseDown);}//隐藏右鍵function hideRMenu() {alert();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" });}if (!(event.target.id == "rMenu2" || $(event.target).parents("#rMenu2").length > 0)) {$("#rMenu2").css({ "visibility": "hidden" });}}//鼠标点击事件不在节点上时隐藏右键菜单   $(function () {$("body").bind("mousedown",function (event) {if (!(event.target.id == "rMenu2" || $(event.target).parents("#rMenu2").length > 0)) {$("#rMenu2").hide();}});});/*******************新增  start*********************///显示新增function showRMenu2(x, y) {$("#rMenu2").show();$("#rMenu2").css({ "top": y + "px", "left": x + "px", "visibility": "visible" });$("body").bind("mousedown", onBodyMouseDown);}var addCount = 1;//新增树节点function addTreeNode() {$("#rMenu").hide();//显示新增divvar tag = 0;$("#treeDemo").mousemove(function (e) {if (tag == 0) showRMenu2(e.pageX, e.pageY);$("#caption_bbs").focus();tag = tag + 1;});}//新增执行后台function addTree() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = zTree.getSelectedNodes();$.ajax({type: "post",url: "/cslv/documentation.do",dataType: 'json',data: {action: "addTree",parentid: nodes[0].id,nodename: $("#caption_bbs").val()},success: function (json) {//强行加载父节点var treeObj = $.fn.zTree.getZTreeObj("treeDemo");var nodes = treeObj.getSelectedNodes();treeObj.reAsyncChildNodes(null, "refresh", true);if (json == 0) alert("操作失败！");},error: function () {alert('Error loading HTML document');}});$("#rMenu2").css({ "visibility": "hidden" });$("#caption_bbs").val("");}/*******************新增  end*********************//*******************修改  start*********************/function editName() {$("#rMenu").hide();zTree = $.fn.zTree.getZTreeObj("treeDemo");nodes = zTree.getSelectedNodes();zTree.editName(nodes[0]);}//捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作function onRename(treeId, treeNode, newName) {zTree = $.fn.zTree.getZTreeObj("treeDemo");nodes = zTree.getSelectedNodes();treeId = "treeDemo";treeNode = nodes[0];newName = nodes[0].name;if (newName.length == 0) {alert("节点名称不能为空.");return false;}$.ajax({type: "post",url: "/cslv/documentation.do",dataType: 'json',data: {action: "modifyTree",id: nodes[0].id,nodename: newName},success: function (json) {alert('操作成功！');},error: function () {alert('Error loading HTML document');}});return true;}/*******************修改  end*********************/function removeTreeNode() {hideRMenu();var nodes = zTree.getSelectedNodes();if (nodes && nodes.length > 0) {if (nodes[0].children && nodes[0].children.length > 0) {var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";if (confirm(msg) == true) {zTree.removeNode(nodes[0]);}} else {zTree.removeNode(nodes[0]);}}}function checkTreeNode(checked) {var nodes = zTree.getSelectedNodes();if (nodes && nodes.length > 0) {zTree.checkNode(nodes[0], checked, true);}hideRMenu();}function resetTree() {hideRMenu();$.fn.zTree.init($("#treeDemo"), setting, zNodes);}function setCheck() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = zTree.transformToArray(zTree.getNodes());//设置跟节点不显示复选框for (var i = 0; i < nodes.length; i++) {var id = nodes[i].id;for (var j = 0; j < nodes.length; j++) {if (id == nodes[j].pId) {node = zTree.getNodeByParam("id", id, null);node.nocheck = true;zTree.updateNode(node);}}}}//初始化树var zTree, rMenu;$(document).ready(function () {$.fn.zTree.init($("#treeDemo"), setting, zNodes);setCheck();zTree = $.fn.zTree.getZTreeObj("treeDemo");rMenu = $("#rMenu");});//-->function submit() {var tree = $.fn.zTree.getZTreeObj("treeDemo");var nodes = tree.transformToArray(tree.getCheckedNodes(true));var nodesArr = new Array();var aHtml = "";for (var i = 0; i < nodes.length; i++) {nodesArr[i] = nodes[i].name;if (i / 5 == 1) {aHtml += "<br/>"}aHtml += "<input type='checkbox' name='checkbox' value='" + nodes[i].id + "' checked>" + nodes[i].name;}$("#text").val(nodesArr.join(","));document.getElementById("ckDiv").innerHTML = aHtml;}</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;}div#rMenu2{position: absolute;visibility: hidden;background-color: #555;text-align: left;padding: 2px;}div#rMenu2 ul{margin: 1px 0;padding: 0 5px;cursor: pointer;list-style: none outside none;background-color: #DFDFDF;}</style>
</head>
<body><div class="content_wrap"><input id="text" type="text" value="" size="200"><div id="ckDiv"></div><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul><input id="text" type="button" οnclick="submit()" value="确定"></div></div><!-- 隐藏新增 --><div id="rMenu2"><ul><li>名称：<input type="text" class="input_tx" id="caption_bbs" style="width: 100px; height: 16px;" /><a class="orange" οnclick="addTree();">确定</a> </li></ul></div><!-- 右键树 --><div id="rMenu"><ul><li id="m_add" οnclick="addTreeNode();">增加 </li><li id="m_modify" οnclick="editName()">修改 </li><li id="m_del" οnclick="removeTreeNode();">删除 </li></ul></div>
</body>
</html>

注释很详细了。源文件完美运行地址：

http://download.csdn.net/detail/hateson/6041101

转帖请注明原帖地址：http://blog.csdn.net/hateson/article/details/10655043

【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。相关推荐

ztree指定节点设置复选框
ztree指定节点设置复选框首先,需引入ztree的js文件 <script src="../../assets/ztree/js/jquery.ztree.core-3.5.mi ...
ztree 点击文字也可以选中前面的复选框
分享一个小方法,实现ztree 点击文字,也可以选中前面的复选框 radio 或者 checkbox 在设置树的时候,加上这句话 callback: { onClick: functio ...
Ztree树的复选框和获取选择的节点实例和代码
0 zTree简介树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree ...
oracle 用户表数目，表大小，视图数目及表空间等查询增加修改删除操作
oracle 用户表数目,表大小,视图数目及表空间等查询增加修改删除操作查看当前用户的缺省表空间 SQL>select username,default_tablespace fromuser ...
HIVE 增加修改删除字段
HIVE 增加修改删除字段非分区表增加字段修改字段(修改字段名称.类型.注释.顺序) 删除字段分区表新增字段修改字段(change column) 替换字段(replace column) ...
ztree autoCheckTrigger=true时子节点复选框选中导致父节点onCheck触发多次问题处理
ztree实现复选框功能,并且子节点选中时,父节点自动选中,子节点取消选中(若所有子节点都没有选中)则父节点也会自动取消选中,check配置如下: check: {enable: true,chk ...
zTree点击文字勾选复选框
1.问题背景系统利用zTree插件生成下拉复选树,点击文字勾选复选框 2.实现源码 <!DOCTYPE html><html><head> <title&g ...
zTree复选框案例
一.配置树参数 //1.获取setting值 function getSetting(){var setting = {view: {dblClickExpand: true,selectedMult ...
solr-cloud 集群动态增加、删除节点
本次讲述动态增加节点基于上一章集群搭建的基础上来讲:https://blog.csdn.net/u013490585/article/details/86494476 上一章的例子中用了3台zk,4台 ...
关于JFace带复选框的树
树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...

【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。

【JAVASCRIPT】使用ztree树，实现右键增加，修改，删除节点。带有复选框。相关推荐

最新文章

热门文章