`
sungang_1120
  • 浏览: 323916 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

使用Ztree 默认的增删改操作 和 自定义增删改按钮(是操作数据库实例,比较简单的修改了下)

阅读更多

 

此处 是默认的按钮:

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;
	}
}

 

 

以上直接是操作数据库的  比较简单的实现。

 

  • 大小: 14.6 KB
  • 大小: 25.8 KB
分享到:
评论

相关推荐

    ztree 支持右键 增删改操作

    在描述中提到的“ztree支持右键增删改操作”意味着ZTree允许用户通过鼠标右键点击节点来执行添加、删除和修改等操作,极大地提升了用户的交互体验和工作效率。 **ZTree的基本概念:** 1. **节点(Node)**:ZTree的...

    ZTree右键增删改功能!

    ZTree右键增删改功能! html文件可直接运行!

    ztree全套的增删改查实例,包括编辑排序子节点操作,源码仅供参考

    ZTree是一款基于JavaScript的树状菜单插件,广泛应用于网页中的数据展示和操作。它具有丰富的API接口和灵活的配置选项,支持动态加载、多选、拖拽、搜索、权限控制等多种功能。在这个"ztree全套的增删改查实例"中,...

    使用zTree框架完成树形框架链接到数据库实现增删改

    在实现“使用zTree框架完成树形框架链接到数据库实现增删改”的过程中,主要涉及以下几个步骤: 1. **数据获取**:首先,需要从数据库获取树形结构的数据。通常,这可以通过执行SQL查询完成,将结果转化为JSON格式...

    springmvc+spring+mybatis里整合ztree实现增删改

    本项目"springmvc+spring+mybatis里整合ztree实现增删改"即是一个典型的案例,它结合了Spring MVC、Spring以及MyBatis这三大核心组件,用于构建后端业务逻辑,并通过ZTree这一前端组件来实现数据的可视化展示和交互...

    ztree增删改

    在本项目"ztree增删改"中,我们将探讨如何使用ZTree实现数据的添加、删除和修改操作,同时也会涉及与其他前端框架如EasyUI和Bootstrap的集成。 首先,要使用ZTree,我们需要在HTML文件中引入相关的JavaScript库和...

    ztree连接数据库的一些增删该查

    通过理解这些基础知识,开发者能够熟练地将zTree与数据库结合,实现数据的增删改查操作,构建出功能强大的树形数据展示和管理界面。在实际应用中,根据项目需求灵活调整配置,结合数据库操作,zTree可以发挥出极大的...

    zTree自定义状态图标实现

    在IT领域,尤其是在前端开发中,zTree是一个广泛使用的JavaScript库,它专门用于构建树状结构的组件。本文将深入探讨如何利用zTree的自定义属性功能,来满足项目中对于Tree数据分层显示的独特需求,并展示如何实现...

    ztree添加自定义控件

    1. **配置自定义节点**: 在初始化`ZTree`时,我们可以为每个节点添加自定义属性,比如`data`对象中的`button`字段,用于存放自定义按钮的相关信息,如文字、图标和点击事件处理函数。 2. **编写HTML结构**: 在树...

    Ztree_简单使用_增删改

    **Ztree 简单使用及增删改详解** ZTree 是一款优秀的 jQuery 树插件,它在 Web 应用中广泛用于展示层级结构的数据,例如目录树、组织架构等。ZTree 提供了丰富的 API 和灵活的配置选项,使得开发者能够轻松地实现...

    zTree增删改查右击菜单

    然后删除就变得简单了 用的是模糊删除 如删除节点2 code 码为上级code 实际节点code即0 1 需要拼接 上 当前节点的id 2 然后+% 模糊删除 节点2的子节点 还需一步删除节点2 代码如下 一目了然 如果删除的节点...

    使用ZTree做的自定义控件和普通使用ZTree的Demo

    这个名为"使用ZTree做的自定义控件和普通使用ZTree的Demo"的项目,旨在展示如何将ZTree集成到.NET Asp环境中,并且通过自定义方式扩展其功能,同时演示了异步获取数据的实现。 首先,我们来看ZTree的基本使用。...

    (附数据库脚本)jQuery Ztree实例

    **jQuery Ztree 实例详解** jQuery Ztree 是一个基于 jQuery 的强大的树形插件,它提供了丰富的树状视图功能,适用于多种应用场景,如文件管理、组织结构展示、导航菜单等。在这个实例中,我们已经结合了数据库脚本...

    Ztree增删改查

    **ZTree 增删改查详解** ZTree 是一个基于 jQuery 的树形插件,广泛应用于网页端的树状数据展示与操作。它提供了丰富的API接口和灵活的配置选项,使得开发者能够轻松实现对树节点的数据操作,包括增、删、改、查等...

    ztree实现的基本功能和数据库交互

    ZTree是一款基于JavaScript的树形菜单插件,广泛应用于网页中的数据展示和操作。通过ZTree,我们可以构建出可交互、可拖拽、可右键菜单的树状结构,极大地提升了用户界面的交互体验。本篇文章将深入探讨ZTree的基本...

    zTree 3.0 实例下载

    此外,还可以学习到如何通过JavaScript动态操作zTree,例如添加、删除、修改节点,以及如何利用zTree提供的API进行数据的获取和设置。 在实际项目中,根据需求,开发者可以参考这些实例,结合自身项目的特性和需求...

    asp树操作实例(增删改拖拽)

    通过以上步骤,你可以构建出一个完整的基于ASP和Access的zTree树形操作实例,不仅支持基本的增删改操作,还能够通过拖拽功能灵活地调整树的结构。这个示例对初学者理解ASP动态网页开发以及zTree的使用非常有帮助,...

    Ztree操作 AJAX

    根据给定的信息,本文将详细解析“Ztree操作 AJAX”的相关内容。主要分为以下几个部分:Ztree的基本介绍、AJAX的基本概念、如何结合Ztree与AJAX进行数据交互、示例代码解析以及可能遇到的问题和解决方案。 ### ...

    Django引用ztree实现数据库表导入树状目录

    在本例中,我们需要从数据库中读取数据表,这可以通过Django的ORM(对象关系映射)系统实现,它允许我们以Python对象的方式操作数据库。 3. ZTree插件: ZTree是一款基于JavaScript的树形插件,适用于Web前端展示...

Global site tag (gtag.js) - Google Analytics