此处 是默认的按钮:
var setting = { async: { enable: true, url:getPath()+"/manager/buildinfo/typeTree", dataFilter: null }, view: { addHoverDom: addHoverDom,//当用户鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同zTree内部的编辑,删除按钮 removeHoverDom: removeHoverDom//移出节点时,显示隐藏状态同zTree内部的编辑、删除按钮 }, data: { simpleData: { enable: true } } }; //鼠标在节点获取焦点显示添加按钮 function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0){ return; } if (treeNode.editNameFlag || $("#delBtn_"+treeNode.tId).length>0){ return; } if (treeNode.editNameFlag || $("#updBtn_"+treeNode.tId).length>0){ return; } //删除 if(treeNode.isShowDeleteBut){ var delStr = "<span class='' id='delBtn_" + treeNode.tId + "' title='删除建筑信息' style='color:red;' onclick='deleteNode(\""+deleteOperate(treeNode.id)+"\",\""+treeNode.name+"\")'>删除</span>"; sObj.after(delStr); } //修改 if(treeNode.isShowUpdateBut){ var updStr = "<span class='' id='updBtn_" + treeNode.tId + "' title='修改建筑信息' style='color:red;' onclick='updateNode(\""+deleteOperate(treeNode.id)+"\")'>修改</span>"; sObj.after(updStr); } //添加 if(treeNode.isShowInsertBut){ var addStr = "<span class='' id='addBtn_" + treeNode.tId + "' title='添加建筑信息' style='color:red;' onclick='addNode(\""+deleteOperate(treeNode.id)+"\",\""+treeNode.name+"\")';>添加</span>"; sObj.after(addStr); } }; //隐藏按钮 function removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); $("#updBtn_"+treeNode.tId).unbind().remove(); $("#delBtn_"+treeNode.tId).unbind().remove(); }; //添加 function addNode(id,name){ var url = getPath()+"/manager/buildinfo/toAddJsp?structureid="+id; location.href = url; } //修改 function updateNode(id){ var url = getPath()+"/manager/buildinfo/toUpdateJsp"; location.href = url+"?id="+id+"&isAdd=2"; } //删除 function deleteNode(id,name){ layer.confirm('您确定要删除 -->'+ name + "吗?", function(){ var url = getPath()+"/manager/buildinfo/deleteBuildInfo"; var param = {"id":id,"time" : Math.random()}; $.post(url,param,function(data){ if("error" == data){ layer.alert('对不起,你所删除的建筑信息,再被其他地方所使用,您不能删除!', 3); return false; }else if("success" == data){ layer.msg('删除成功!', 2, -1); location.href =getPath()+ "/manager/peizhiManager/buildinfo/buildinfoTree.jsp"; }else if("syncError" == data){ layer.msg('删除操作失败!', 2, -1); } }); }); } $(document).ready(function(){ //加载树结构数据 $.fn.zTree.init($("#treeDemo"), setting); });
样式如下:
<div class="content_wrap" id="treeDiv" style="display: block;"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div>
数据格式 JSON
[ {"name":"四川大学","id":"1a","pId":"0a","open":false,"checked":true,"isShowDeleteBut":true,"isShowUpdateBut":true,"isShowInsertBut":true,"isBuildInfoNodeId":false,"isBuildStructureId":false}, {"name":"四川大学南校区","id":"2a","pId":"1a","open":false,"checked":false,"isShowDeleteBut":true,"isShowUpdateBut":true,"isShowInsertBut":true,"isBuildInfoNodeId":false,"isBuildStructureId":false}, {"name":"电子科技大学","id":"3a","pId":"0a","open":false,"checked":false,"isShowDeleteBut":true,"isShowUpdateBut":true,"isShowInsertBut":true,"isBuildInfoNodeId":false,"isBuildStructureId":false}, {"name":"电子科技大学北校区","id":"4a","pId":"3a","open":false,"checked":false,"isShowDeleteBut":true,"isShowUpdateBut":true,"isShowInsertBut":true,"isBuildInfoNodeId":false,"isBuildStructureId":false}, {"name":"成都财经大学","id":"5a","pId":"0a","open":false,"checked":false,"isShowDeleteBut":true,"isShowUpdateBut":true,"isShowInsertBut":true,"isBuildInfoNodeId":false,"isBuildStructureId":false}, {"name":"成都财经大学南校区","id":"6a","pId":"5a","open":false,"checked":false,"isShowDeleteBut":true,"isShowUpdateBut":true,"isShowInsertBut":true,"isBuildInfoNodeId":false,"isBuildStructureId":false} ]
数据自己在后台直接通过一个 对象封装就OK了
import java.util.List; /** * 站点树,节点对象 * @author ibm * */ public class ZTreeNode { private String name; private String id; private String pId; private List<ZTreeNode> childList; private String icon; //是否是打开状态 默认不打开 private boolean open = false; //判断是否选中 private boolean checked = false; //判断是否是可选的 如果为 true 则此节点不可选 private boolean nocheck = false; //控制是否显示 增删改按钮 默认都是不显示 private boolean isShowDeleteBut = false; private boolean isShowUpdateBut = false; private boolean isShowInsertBut = false; //判断是否是建筑信息节点Id private boolean isBuildInfoNodeId; //判断是否是建筑结构节点Id private boolean isBuildStructureId; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getpId() { return pId; } public void setpId(String pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public List<ZTreeNode> getChildList() { return childList; } public void setChildList(List<ZTreeNode> childList) { this.childList = childList; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public boolean isOpen() { return open; } public void setOpen(boolean open) { this.open = open; } public boolean isShowDeleteBut() { return isShowDeleteBut; } public void setShowDeleteBut(boolean isShowDeleteBut) { this.isShowDeleteBut = isShowDeleteBut; } public boolean isShowUpdateBut() { return isShowUpdateBut; } public void setShowUpdateBut(boolean isShowUpdateBut) { this.isShowUpdateBut = isShowUpdateBut; } public boolean isShowInsertBut() { return isShowInsertBut; } public void setShowInsertBut(boolean isShowInsertBut) { this.isShowInsertBut = isShowInsertBut; } public boolean isBuildInfoNodeId() { return isBuildInfoNodeId; } public void setBuildInfoNodeId(boolean isBuildInfoNodeId) { this.isBuildInfoNodeId = isBuildInfoNodeId; } public boolean isBuildStructureId() { return isBuildStructureId; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } public void setBuildStructureId(boolean isBuildStructureId) { this.isBuildStructureId = isBuildStructureId; } public boolean isNocheck() { return nocheck; } public void setNocheck(boolean nocheck) { this.nocheck = nocheck; } }
以上直接是操作数据库的 比较简单的实现。
相关推荐
ZTree右键增删改功能! html文件可直接运行!
ztree 支持右键 增、删、改操作,容易上手,右键弹出窗口式增加节点,方便扩展。
使用了zTree框架,完成树形结构。实现增删改,链接到底层数据库
springmvc+spring+mybatis里整合ztree实现增删改 带数据库文件
对ztree进行增删改,包括需要引入的easyui,bootstrap等等,在里面都有
ztree连接数据库的一些增删该查
然后删除就变得简单了 用的是模糊删除 如删除节点2 code 码为上级code 实际节点code即0 1 需要拼接 上 当前节点的id 2 然后+% 模糊删除 节点2的子节点 还需一步删除节点2 代码如下 一目了然 如果删除的节点...
基于ztree官网开发文档自己根据项目页面需要自己学习了几天做出来的一个增删改 数据库也在里边
本实例详细讲述了如何通过zTree实现满足项目需求Tree数据分层显示要求,通过zTree灵活的自定义属性,轻松完成Tree的改造
ztree树增删改查 ztree树增删改查 ztree树增删改查
这个demoo里面包含,使用ztree做的一个自定义控件。已经ztree常用方法、异步获取数据等的一个解决方案。
ztree全套的增删改查实例,包括编辑排序子节点操作,demo仅供参考,希望给需要的朋友带来帮助,谢谢支持!
(附数据库脚本)jQuery Ztree实例 已实现从数据库读取数据 已实现树节点的展示 已实现点击事件
使用SSH对zTree实现增删改,动态从数据库获得,并带有数据库可以直接查看掩饰效果,数据库是mysql
不错的树形菜单,连接mysql数据库,可实现增删改功能,绑定菜单URL等等。
ztree3.1插件,根据项目需要,添加了一些需要的控件,比如增、删、改等,数据库是oracle10g。如有疑问请给我留言。
Ztree操作 AJAX
关联sqlserver 2005,实现ztree对数据库的基本增删改操作,实现基础的树形控件功能。
主要内容:关于ztree3.5读取数据库数据转为节点显示成树,以及对节点增删改的异步操作。 特色:集成了一个挺方便也实用的弹出层插件tipsWindown,有兴趣的可以学下,调用很方便。 整合了ssh,jar包没有整理,直接...
asp + access 树操作 使用zTree开发,支持数据增加、修改、删除、拖拽操作改变结点的顺序和父子关系。里面带数据库 将目录放在网站根目录下可以直接运行