整合ztree的一些功能和demo演示

ztree官网上有详细的API和演示demo，这里就不详细介绍了，只对用到的一些功能进行说明一下。

1、用到的几个js文件

jquery-1.4.4.min.js（jQuery的核心js）

jquery.ztree.core-3.5.js（ztree的核心js）

jquery.ztree.excheck-3.5.js（ztree的复选框功能js）

jquery.ztree.exedit-3.5.js（ztree的编辑功能js）

2、用的css文件

zTreeStyle.css（只有这一个css文件，控制ztree样式，当然可以在这个文件里扩展自己需要的样式）

3、用到的图片

zTree v3.x 将主要图标都合并为一个图片，利用图片切割方式显示图标

4、数据定义

use the simple data format（{"id":1, "pId":0, "name":"test1"}）

5、页面demo代码如下：

<link rel="stylesheet" href="css/zTreeStyle.css" />
<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" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript">
var dragId;var zTree_Menu;
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false,
showLine: false,
selectedMulti: false,
showIcon: false
},
edit: {
enable: true,
showRemoveBtn: setRemoveBtn,
removeTitle:"删除分类",
renameTitle:"编辑分类",
drag: {
prev: true,
next: true,
inner: false
},
editNameSelectAll: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeClick: beforeClick,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename,
beforeDrop: beforeDrop
}
};
//采用简单数据模式 (Array)
var zNodes =[
{ id:1, pId:0, name:"拖拽 1"},
{ id:11, pId:1, name:"拖拽 1-1"},
{ id:111, pId:11, name:"拖拽 1-1-1"},
{ id:12, pId:1, name:"拖拽 1-2"},
{ id:121, pId:12, name:"拖拽 1-2-1"},
{ id:122, pId:12, name:"拖拽 1-2-2"},
{ id:1221, pId:121, name:"拖拽 1-2-2-1"},
{ id:123, pId:12, name:"拖拽 1-2-3"},
{ id:1231, pId:123, name:"拖拽 1-2-3-1"},
{ id:1232, pId:123, name:"拖拽 1-2-3-2"},
{ id:1233, pId:123, name:"拖拽 1-2-3-3"},
{ id:2, pId:0, name:"拖拽 2"},
{ id:21, pId:2, name:"拖拽 2-1"},
{ id:22, pId:2, name:"拖拽 2-2"},
{ id:23, pId:2, name:"拖拽 2-3"},
{ id:3, pId:0, name:"拖拽 3"},
{ id:31, pId:3, name:"拖拽 3-1"},
{ id:32, pId:3, name:"拖拽 3-2"},
{ id:33, pId:3, name:"拖拽 3-3"}
];
function beforeDrag(treeId, treeNodes) {//用于捕获节点被拖拽之前的事件回调函数
return false;
}
function beforeEditName(treeId, treeNode) {//用于捕获节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return true;
}
function beforeRemove(treeId, treeNode) {//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除分类 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {//用于捕获删除节点之后的事件回调函数
}
function beforeRename(treeId, treeNode, newName) {//更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
if (newName.length == 0) {
alert("分类名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function(){zTree.editName(treeNode)}, 10);
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {//用于捕获节点编辑名称结束之后的事件回调函数
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {//用于当鼠标移动到节点上时，显示用户自定义控件
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='添加分类' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
return false;
});
}
function setRemoveBtn(treeId, treeNode) {//父分类去掉删除功能
return !treeNode.isParent;
<span style="white-space:pre"> </span>}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
function beforeDrag(treeId, treeNodes) {//拖拽时执行
for (var i=0,l=treeNodes.length; i<l; i++) {
dragId = treeNodes[i].pId;
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {//拖拽释放后执行
if(targetNode.pId == dragId){
return true;
}else{
return false;
}
}
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化ztree
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
$("#selectAll").bind("click", selectAll);
});
</SCRIPT>
</head>
<body>
<div class="widget-box">
<div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
<h5>分类管理</h5>
</div>
<div class="widget-content tab-content" >

<div class="content_wrap" >
<div class="zTreeDemoBackground ">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>

</div>
</div>
</body>
</html>

以上代码可以直接运行，不过需要下载相关js、css和图片，可以直接到ztree官网下载。

--------------------- 本文来自黄爱岗的CSDN 博客，全文地址请点击：https://blog.csdn.net/huangaigang6688/article/details/27237119?utm_source=copy

整合ztree的一些功能和demo演示相关推荐

14、阿里云短信Demo演示、Http的Get请求和Post请求演示、httpClient工具类演示、发送短信模块搭建、搭建用户中心模块、完成user注册基本功能、验证码存入redis、短信验证码注册
阿里云短信Demo演示一.前端部分无前端. 二.后端部分 1.创建发送短信测试模块SmsSendDemo,不用使用骨架. 2.在pom文件中引入依赖坐标 <dependency>< ...
Autoware入门学习（三）——Autoware软件功能使用介绍（1/3）及demo演示
文章目录 1 Autoware 的官方 demo 演示 1.1 数据下载(点击链接or指令均可) 1.2 Demo 运行 2 Autoware 软件功能使用介绍(1/3) 2.1 Quick Star ...
零基础AJAX入门（含Demo演示源文件）
零基础AJAX入门(含Demo演示源文件) 作者:一点一滴的Beer 个人主页:http://www.cnblogs.com/beer 摘要:因为笔者的大四毕业设计是做WebGIS系统,用过Web版 ...
C#.NET通过Socket实现平行主机之间网络通讯（含图片传输的Demo演示）
C#.NET通过Socket实现平行主机之间网络通讯(含图片传输的Demo演示) 作者:一点一滴的Beer http://beer.cnblogs.com/ 在程序设计中,涉及数据存储和数据交换的时候 ...
ThinkPHP框架整合phpqrcode生成二维码DEMO
ThinkPHP框架发展到今天功能已经变得是非常强大了,但是ThinkPHP框架中没有二维码相关的库,因此我们可以通过整合phpqrcode来完成生成二维码的功能.想使用phpqrcode首先就要把p ...
实时计算pv/uv Demo演示
简介:本文由阿里巴巴高级技术专家邓小勇(静行)分享,主要用 Demo 演示如何通过实时计算 Flink 实时计算pv/uv的场景. 作者 | 邓小勇(静行),阿里巴巴高级技术专家本文由阿里巴巴高级技 ...
mui 实现a锚点定位 (demo演示)【建议：仅作为参考】
mui 实现<a>锚点定位(演示) - [建议:仅作为参考] 更改了js部分的源码class类名,可对比官方代码,匹配学习. 重要说明: 本案例,改编自"官方demo演示地址 · ...
CnBlogs博文demo演示技巧比较：jsfiddle完胜
一.简介如果你是一名前端博主,你希望通过代码+演示来透彻的讲解一些技巧,并且无缝嵌入你的博客,那么jsfiddle是一个很好的选择. 本文将比较博客园前端dev们各种演示方式,大家可以挑选自己喜欢的 ...
【MAX7800实现KWS20 demo演示】
[MAX7800实现KWS20 demo演示] 1. 概述 2. 关键字定位演示 2.1 构建固件: 2.2 选择板卡 2.3 MAX78000 EVKIT 2.3.1 MAX78000 EVKIT下 ...
jvm-sandbox：基础了解及demo演示
文章目录一.基础准备-被测应用二.代码编写-自定义Module 三.jvm-sandbox安装及基础命令四.jvm-sandbox demo演示 4.1.改变方法返回 4.2.异常注入五.资源 ...

整合ztree的一些功能和demo演示

整合ztree的一些功能和demo演示相关推荐

最新文章

热门文章