ztree.js的使用整理
/** 配置:知识点管理 */
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的使用整理的更多相关文章
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...
- Js Date泣血整理
原文:Js Date泣血整理 JS Date 对象用于处理日期和时间. 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值. ...
- vue.js面试题整理
Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...
- SVG.js 元素操作整理(二)-Transform
一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...
- SVG.js 元素操作整理(一)
一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect( ...
- 开发类似"音速启动"的原创工具简码"万能助手"的过程中对ztree.js与win标准控件treeview、HTMLayout树形框等优缺点的比较
在开发类似"音速启动"的桌面快捷方式管理软件简码"万能助手"的早期规划中,曾经考虑过几种树形框方案: ztree.js.win标准控件treeview.HTML ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
随机推荐
- MongoDB学习笔记~ObjectId主键的设计
回到目录 说一些关于ObjectId的事 MongoDB确实是最像关系型数据库的NoSQL,这在它主键设计上可以体现的出来,它并没有采用自动增长主键,因为在分布式服务器之间做数据同步很麻烦,而是采用了 ...
- 【hive】——Hive基本操作
阅读本文章可以带着下面问题:1.与传统数据库对比,找出他们的区别2.熟练写出增删改查(面试必备) 创建表:hive> CREATE TABLE pokes (foo INT, bar STRIN ...
- 【hive】——Hive初始了解
1.没有接触,不知道这个事物是什么,所以不会产生任何问题.2.接触了,但是不知道他是什么,反正我每天都在用.3.有一定的了解,不够透彻.那么hive,1.我们对它了解多少?2.它到底是什么?3.hiv ...
- qt5.4.0编译错误
error1: 进程"C:\Qt\Qt5.4.0\Tools\QtCreator\bin\jom.exe"退出,退出代码 2 solution:去工具->选项->构建和 ...
- android开发之onCreate( )方法详解
这里我们只关注一句话:This is where you should do all of your normal static set up.其中我们只关注normal static,normal: ...
- Windows10 会不会成为微软的新起点?
Because if you change the way you see the world, you can change the world you see. 如果你改变看世界的方式,你就能改变 ...
- 整理几篇比较好的AndroidUI动画开发文章
第一篇,写的比较详细,新手可以看得懂: http://www.360doc.com/content/16/0128/08/30422106_531162539.shtml
- Apache2.4部署django出现403 Forbidden错误解决办法
前言:Apache2.4部署django出现403 Forbidden错误最好要结合apache中的错误日志来观察出现何种错误导致出现403错误 下午百度了一下午没找到解决办法,试了n种方法,简直坑爹 ...
- MMORPG大型游戏设计与开发(服务器 游戏场景 核心详述)
核心这个词来的是多么的高深,可能我们也因为这个字眼望而却步,也就很难去掌握这部分的知识.之所以将核心放在最前面讲解,也可以看出它真的很重要,希望朋友们不会错过这个一直以来让大家不熟悉的知识,同我一起进 ...
- postman使用之五:Runner的使用
1.首先在postman新建要批量运行的接口文件夹,新建一个接口,并设置好全局变量. 2.然后在Test里面设置好要断言的方法 如: tests["Status code is 200&qu ...