/** 配置:知识点管理 */
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. .NET应用架构设计—适当使用活动记录模式代替领域模型模式

    阅读目录: 1.背景介绍 2.简单介绍领域模型模式.活动记录模式 3.活动记录模式的简单示例及要点 4.总结 1.背景介绍 对软件开发方法论有兴趣的博友应该发现最近“领域驱动设计”慢慢的被人发现被人实 ...

  2. Unity在Android和iOS中如何调用Native API

    本文主要是对unity中如何在Android和iOS中调用Native API进行介绍. 首先unity支持在C#中调用C++ dll,这样可以在Android和iOS中提供C++接口在unity中调 ...

  3. java实现REST方式的webService

    一. 简介 WebService有两种方式,一是SOAP方式,二是REST方式.SOAP是基于XML的交互,WSDL也是一个XML文档, 可以使用WSDL作为SOAP的描述文件:REST是基于HTTP ...

  4. swift判断是否真机or模拟器

    之前一直用的这种,不知道为什么不怎么靠谱 #if TARGET_IPHONE_SIMULATOR//模拟器 #else//真机 #endif 现在用这种: if Platform.isSimulato ...

  5. Linux Process VS Thread VS LWP

    Process program program==code+data; 一个进程可以对应多个程序,一个程序也可以变成多个进程.程序可以作为一种软件资源长期保存,以文件的形式存放在硬盘 process: ...

  6. jquery选择器demo

    大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 转载:SqlServer数据库性能优化详解

    本文转载自:http://blog.csdn.net/andylaudotnet/article/details/1763573 性能调节的目的是通过将网络流通.磁盘 I/O 和 CPU 时间减到最小 ...

  8. markdown编辑器

    经过一番探索终于找到两个可以实时预览的markdown编辑器 一,sublime text 3 + MarkDown Editing + OmniMarkupPreviwer 安装方法网上均有,这里要 ...

  9. 观察者模式(Observer和Observable实现)

    package com.wzy.java8.thread; import java.util.Observable; import java.util.Observer; public class D ...

  10. quartz-1.8.5 Demo

    最近在研究Spring中的定时任务功能,最好的办法当然是使用Quartz来实现.对于一个新手来说,花了我不少时间,这里我写个笔记,给大家参考. 我使用的是Maven来管理项目,需要的Jar包我给大家贴 ...