标签:js
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官网下载。
ztree使用系列二(整合ztree的一些功能和demo演示),布布扣,bubuko.com
ztree使用系列二(整合ztree的一些功能和demo演示)
标签:js
原文地址:http://blog.csdn.net/huangaigang6688/article/details/27237119