/** 配置:知识点管理 */
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. W3School-CSS 定位 (Positioning) 实例

    CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...

  2. [Java入门笔记] 面向对象编程基础(三):成员变量和局部变量

    在类中,变量根据定义的位置不同,可以分为成员变量和局部变量.

  3. Python字符串str的方法使用

    #!usr/bin/env python# -*-coding:utf-8-*-#字符串通常用双引号或单引号来表示:'123',"abc","字符串"#str字 ...

  4. 1 张图秒懂 Nova 16 种操作 - 每天5分钟玩转 OpenStack(44)

    前面我们讨论了 Instance 的若干操作,有的操作功能比较类似,也有各自的适用场景,现在是时候系统地总结一下了. 如上图所示,我们把对 Instance 的管理按运维工作的场景分为两类:常规操作和 ...

  5. day1学习

    python 2 和 3 的区别 1.用户输入的命令:python 2 中是raw_input(""):python 3 中是input(""). 2.默认字符 ...

  6. 长见识了,知道了collected和Graphite 这两个东东

    今天下午的讨论会议中,听到了两个名词collected和Graphite这是神马东东,以前在bingo的时候也没听说过,开完会下去查了下.原来他两是监控系统的啊.以前也从来没做过系统监控方面的项目,这 ...

  7. Chrome浏览器设置默认编码

    设置-->高级设置-->网络内容-->自定义字体(滚动条拉到最底部)-->编码

  8. MySql access denied for user错误

    MySql access denied for user错误 | 浏览:2812 | 更新:2014-11-27 11:16 MySql access denied for user错误 方法/步骤 ...

  9. monkeyrunner之电脑安装驱动(五)

    在Monkeyrunner做自动化测试时,可以使用模拟器,当然也可以选择用真机.不过,要想通过电脑来安装软件,操作手机,则必须先安装手机驱动,而且一般手机连接电脑之后,电脑会自动开始下载驱动.不过也经 ...

  10. cefsharp设置网页接受语言Accept-Language

    1.设置浏览器的请求控制器 webView.RequestHandler = new RequestHandler(); 2.新建RequestHandler类继承IRequestHandler接口, ...