前面的话: zTree 是一个依靠 jQuery 实现的多功能 "树插件". 优异的性能, 灵活的配置, 多种功能的组合是 zTree 最大优点. 专门适合项目开发, 尤其是 树状菜单, 树状数据.
ztree 官方文档: http://www.treejs.cn/v3/api.php
想要实现的效果:
需要的功能:
1: 首先实现一颗 jQuery 的 ztree 的树形菜单, 这个很简单, 直接引用官方文档即可
2: 点击新建组的按钮, 会出现一个 input 对话框, 填写想要新建的名称, 在树形菜单上添加了一个父节点菜单.
3: 可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面.
下面开始撸代码:
1: 首先要引入一些必要的文件, 可自己在官方文档里面下载.
- <!-- 树形菜单 -->
- <link rel="stylesheet" href="../../common/ztree/CSS/zTreeStyle/zTreeStyle.css">
- <script type="text/javascript" src="../../js/jquery-1.9.1.js" />
- </script>
- <script src="../../common/ztree/js/jquery.ztree.all.min.js">
- </script>
2:html 界面, 有新建组的按钮和盛放树形菜单的容器, 还有填写文件名的 input 框以及提交按钮.
- <div class="">
- <div>
- <button id="add"> 新建组 </button>
- </div>
- <div>
- <ul id="ztree" class="ztree"></ul>
- </div>
- <div id="addgroup" style="display: none">
- <input type="text" id="group" name="group">
- <button id="submit"> 提交 </button>
- </div>
- </div>
3:CSS, 这里的 CSS 样式是自己对于官方文档的一些修改, 放了一些必要的图标, 更加的生动形象.
- #add{
- width:80px;
- height:30px;
- background:#2299ee;
- color:#ffffff;
- border:none;
- margin-top:10px;
- margin-bottom:10px;
- }
- .ztree li span.button.icon01_ico_close {
- margin-right: 2px;
- background: url(../../images/ztree/close.PNG) no-repeat scroll 0 0 transparent;
- vertical-align: top;
- *vertical-align: middle
- }
- .ztree li span.button.icon01_ico_open {
- margin-right: 2px;
- background: url(../../images/ztree/open.PNG) no-repeat scroll 0 0 transparent;
- vertical-align: top;
- *vertical-align: middle
- }
- .ztree li span.button.icon02_ico_docu {
- margin-right: 2px;
- background: url(../../images/ztree/woman.PNG) no-repeat scroll 0 0 transparent;
- vertical-align: top;
- *vertical-align: middle
- }
- .ztree li span.button.icon03_ico_docu {
- margin-right: 2px;
- background: url(../../images/ztree/man.PNG) no-repeat scroll 0 0 transparent;
- vertical-align: top;
- *vertical-align: middle
- }
4: 重点在于 JS, 主要分为初始化 ztree 功能; 添加分组功能; ztree 结构设置功能;
- $(function() {
- var zTreeObj;
- // 初始化 ztree
- initTree();
- function initTree() {
- $.get(path() + "/ztree/init", function(data) {
- for ( var i in data) {
- if (data[i].token == "3")
- data[i].nocheck = true;
- }
- zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);
- });
- }
- // 点击显示 div
- $("#add").click(function() {
- $("#addgroup").show();
- })
- // 添加分组
- $("#submit").click(function() {
- $.Ajax({
- url : path() + '/ztree/group/' + $("#group").val(),
- type : 'post',
- success : function(data) {
- $("#addgroup").hide();
- // 重新加载
- initTree();
- },
- error : function(data) {
- alert("添加分组失败!!")
- }
- });
- })
- // ztree 结构设置
- var setting = {
- check : {
- enable : true,
- chkStyle : "radio",
- radioType : "all"
- },
- async : {// 异步加载数据操作
- enable : true,
- url : path() + "/ztree",
- autoParam : [ "id" ],
- type : "get",
- // dataFilter : ajaxDataFilter,// 用于对 Ajax 返回数据进行预处理的函数
- dataType : "json"
- },
- edit : {
- enable : true,
- showRemoveBtn : false,// 设置是否显示删除按钮
- showRenameBtn : setRenameBtn,// 设置是否显示重新命名按钮
- drag : {
- isCopy : false,
- isMove : true,
- prev : true,
- next : true,
- inner : true
- }
- },
- data : {
- keep : {
- parent : true
- // 保持父节点的状态
- },
- simpleData : {
- enable : true,
- idKey : "id",
- pIdKey : "pId"
- }
- },
- callback : {
- beforeDrag : beforeDrag,
- beforeDrop : zTreeBeforeDrop,
- onDrop : onDrop,
- onRename : zTreeOnRename,
- }
- };
- function setRenameBtn(treeId, treeNode) {
- return treeNode.isParent;
- }
- function zTreeOnRename(event, treeId, treeNode, isCancel) {
- if (treeNode.name == '')
- return;
- var params = {
- id : treeNode.id,
- name : treeNode.name,
- }
- $.Ajax({
- url : path() + '/ztree/group',
- contentType : 'application/json',
- type : 'post',
- data : JSON.stringify(params),
- error : function(data) {
- alert("操作失败!!")
- }
- });
- }
- function beforeDrag(treeId, treeNodes) {
- for (var i = 0, l = treeNodes.length; i < l; i++) {
- if (treeNodes[i].token == "3") {
- return false;
- }
- }
- return true;
- }
- function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
- if (targetNode.token != '3') {
- return false;
- }
- return true;
- }
- function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
- if (moveType == null)
- return;
- var params = {
- id : treeNodes[0].id,
- pId : targetNode.id,
- token : moveType,
- }
- // 设置父节点
- $.Ajax({
- url : path() + '/ztree',
- contentType : 'application/json',
- type : 'put',
- data : JSON.stringify(params),
- error : function(data) {
- alert("操作失败!!")
- }
- });
- }
- // 获取项目路径
- function path() {
- var currentPath = Windows.document.location.href;
- var pathName = Windows.document.location.pathname;
- var pos = currentPath.indexOf(pathName);
- var localhostPath = currentPath.substring(0, pos);
- var projectName = pathName.substring(0,
- pathName.substr(1).indexOf('/') + 1);
- return (localhostPath + projectName);
- }
- })
好了, 到此为止, 一个可以添加新的节点和拖拽树形菜单的功能就实现了.
热门推荐: 全栈工程师开发常用插件, 工具类库, 视频, 资料 300G 资源汇总
来源: http://www.jianshu.com/p/bfa67325719c