/** 配置:知识点管理 */
var setting = {
view: {
showIcon: false,
addDiyDom: addPrevDom,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
beforeExpand: beforeExpand
},
edit: {
drag: {
isCopy: false,
isMove: true
},
enable: true,
editNameSelectAll: true,
removeTitle: '删除知识点',
renameTitle: '修改知识点名称',
}
};

setting

回调函数:

/** 添加根节点前科目标记 */
function addPrevDom(treeId, treeNode) {
if (treeNode.level == 0) {
var aObj = $("#" + treeNode.tId + "_a");
var prevStr = "<span>[数学]</span>";
aObj.before(prevStr);
}
} /** 节点拖拽 */
function beforeDrag(treeId, treeNodes) {
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
curDragNodes = null;
return false;
} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
curDragNodes = null;
return false;
}
}
curDragNodes = treeNodes;
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
return targetNode ? targetNode.drop !== false : true;
} /** 修改节点名称 */
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
var zTree = $.fn.zTree.getZTreeObj("manageTree");
zTree.cancelEditName();
return false;
}
return true;
} /** 删除节点 */
function beforeRemove(treeId, treeNode) {
var _modal = $("#model-delete");
$(".tips-delete",_modal).children("span").text(treeNode.name);
_modal.modal("show");
//确定按钮事件
$("#btn-do-delete").click(function() {
var zTree = $.fn.zTree.getZTreeObj("manageTree");
zTree.removeNode(treeNode);
_modal.modal("hide");
});
return false;
} /** 添加鼠标经过显示编辑图标 */
var newCount = 1;
function addHoverDom(treeId, treeNode) {
//最底层节点不能添加子节点
if (treeNode.level > 2) {
return;
}
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("manageTree");
zTree.addNodes(treeNode, {
pId: treeNode.id,
name: "新节点" + (newCount++)
});
return false;
});
};
/** 移除鼠标经过事件 */
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
}; /** 展开所有子节点 */
function beforeExpand(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("manageTree");
zTree.expandNode(treeNode, true, true, false);
return false;
}

ztree.js的使用整理的更多相关文章

  1. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  2. 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  3. JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...

  4. Js Date泣血整理

    原文:Js Date泣血整理 JS Date 对象用于处理日期和时间. 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值. ...

  5. vue.js面试题整理

    Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...

  6. SVG.js 元素操作整理(二)-Transform

    一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...

  7. SVG.js 元素操作整理(一)

    一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect( ...

  8. 开发类似"音速启动"的原创工具简码"万能助手"的过程中对ztree.js与win标准控件treeview、HTMLayout树形框等优缺点的比较

    在开发类似"音速启动"的桌面快捷方式管理软件简码"万能助手"的早期规划中,曾经考虑过几种树形框方案: ztree.js.win标准控件treeview.HTML ...

  9. 【前端芝士树】Vue.js面试题整理 / 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

随机推荐

  1. YourSQLDba将数据库置于紧急模式的原因浅析

    从SQL SERVER 2000 上迁移了一个数据库到SQL SERVER 2008 R2上,暂且用DataBaseName代替迁移的真实的数据库名(后面的资料也会将数据库真实的名字用DataBase ...

  2. Mysql存储过程和函数区别介绍

    存储过程是用户定义的一系列sql语句的集合,涉及特定表或其它对象的任务,用户可以调用存储过程,而函数通常是数据库已定义的方法,它接收参数并返回某种类型的值并且不涉及特定用户表. 存储过程和函数存在以下 ...

  3. jQuery 中的 39 个技巧

    1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <sc ...

  4. Ubuntu上通过nginx部署Django笔记

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式.今天在Ubuntu上使用Nginx部署Django服务,虽然不是第一次搞这个了,但是发现还是跳进了好多坑,g ...

  5. PHP实现堆排序

    经验 工作了,面试我工作这家公司时被技术面打击得不行,因为自己的数据结构等基础学得实在太差,虽然原来是想做设计师的说...不过看在PHP写得还凑合的份上能来实习了,但还是决心恶补一下基础. 其实自己之 ...

  6. amCharts图表中的JavaScript中文注释引起的浏览器兼容性问题

    近期用amCharts做图表.一切都很顺利,然后演示的时候掉链子了,平时开发的时候都是用的火狐和谷歌,加上这种图表框架本来就号称兼容性极好,也没有在ie上测试,演示的机器上恰巧用的是ie11,发现一个 ...

  7. 复制粘贴出来的悲剧----spring实现文件下载和HttpStatus.CREATED

    今天真是被自己的懒惰和复制粘贴给坑惨了... 网上有这么一个spring下载文件的最佳实践: @RequestMapping("download") public Response ...

  8. 阅读Real-Time O(1) Bilateral Filtering 一文的相关感受。

    研究双边滤波有很长一段时间了,最近看了一篇Real-Time O(1) Bilateral Filtering的论文,标题很吸引人,就研读了一番,经过几天的攻读,基本已理解其思想,现将这一过程做一简单 ...

  9. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  10. 更新chrom遇到flash过期解决办法

    更新chrom遇到flash过期解决办法 百度最新adobe flash player ppapi最新版 下载并安装,重启浏览器即可