ztree高级配置之新增节点

功能展示：

实现代码：

js:

var zTree;

var setting = {

edit: {

enable: true,

selectedMulti: false,

},

view: {

dblClickExpand: false,

showLine: true,

selectedMulti: false,

addHoverDom: addHoverDom,

removeHoverDom: removeHoverDom,

},

data: {

key: {

name: "Name",

},

simpleData: {

enable: true,

idKey: "id",

pIdKey: "parentId",

rootPId: "0"

}

},

callback: {

beforeRename: bfRename,

onRename: onRename,

beforeRemove: beforeRemove,

onRemove: onRemove,

view: {

dblClickExpand: false,

showLine: true,

selectedMulti: false,

addHoverDom: addHoverDom,

removeHoverDom: removeHoverDom,

},

}

}

function bfRename( treeId, treeNode, newName, isCancel) {

//新名称为空时提示名称不能为空

if ( newName. length == 0) {

setTimeout( function () {

var zTree = $. fn. zTree. getZTreeObj( "first");

zTree. cancelEditName();

alert( "节点名称不能为空.");

}, 200);

return false;

}

var Cnodes = getPeerNodes( treeNode);

//获取当前节点的同级兄弟节点，不包含本节点

function getPeerNodes( targetNode) {

if ( targetNode == null) {

return null;

} else {

if ( targetNode. getParentNode() != null) {

return targetNode. getParentNode(). children;

}

return null;

}

}

console. log( Cnodes);

for ( var n in Cnodes) {

if ( Cnodes[ n]. Name == newName) {

if ( Cnodes[ n]. id == treeNode. id) return;

setTimeout( function () {

var zTree = $. fn. zTree. getZTreeObj( "first");

zTree. cancelEditName();

alert( "编目名称已存在！");

}, 200)

return false;

}

}

return true;

};

function onRename( e, treeId, treeNode, isCancel) {

if ( isCancel) return;

}

function beforeRemove( treeId, treeNode) {

if ( confirm( "删除 " + treeNode. Name + "?"))

return true;

else

return false;

};

function onRemove( e, treeId, treeNode) {

};

function find_name( num, nodes) {

for ( var n in nodes) {

var name = "new_node" + num;

// console.log(nodes[n].name);

if ( nodes[ n]. name == name) {

num = num + 1;

return num;

}

else if ( nodes[ n]. bmid == name) {

num = num + 1;

return num;

};

};

return name;

}

//生成id

function make_id() {

var s = [];

var hexDigits = "0123456789abcdef";

for ( var i = 0; i < 36; i++) {

s[ i] = hexDigits. substr( Math. floor( Math. random() * 0x10), 1);

}

s[ 14] = "4";

s[ 19] = hexDigits. substr(( s[ 19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01

s[ 8] = s[ 13] = s[ 18] = s[ 23] = "-";

var uuid = s. join( "");

uuid = uuid. replace( /-/ g, "");

return uuid;

};

function getTime() {

var now = new Date(),

y = now. getFullYear(),

mt = now. getMonth() + 1,

d = now. getDate(),

h = now. getHours(),

m = now. getMinutes(),

s = now. getSeconds()

return ( y + "-" + mt + "-" + d + " " + h + ":" + m + ":" + s);

};

function addHoverDom( treeId, treeNode) {

// console.log(treeNode.name);

var sObj = $( "#" + treeNode. tId + "_span");

if ( treeNode. editNameFlag || $( "#addBtn_" + treeNode. tId). length > 0) return;

var addStr = "";

sObj. after( addStr);

var btn = $( "#addBtn_" + treeNode. tId);

if ( btn) btn. bind( "click", function () {

// var nodes = zTree.transformToArray(zTree.getNodes());

// 返回值不是字符串时进入循环

var nname = find_name( 1, zNodes);

while (! isNaN( nname)) {

nname = find_name( nname, zNodes);

// console.log(nname);

};

name = nname;

var id = make_id();

for ( var n in zNodes) {

if ( zNodes[ n]. id == id) {

}

}

var createTime = getTime();

random = Math. ceil( Math. random() * 100);

var creator = "unknow";

var new_node = {

"id" :id,

"Name" : name,

"parentId" : treeNode. id,

"creator" : "",

"createTime" : "createTime",

"bmid" : name,

"fullbmid" : name

};

var zTree = $. fn. zTree. getZTreeObj( "first");

zTree. addNodes( treeNode, new_node);

zNodes. push( new_node);

});

}

function removeHoverDom( treeId, treeNode) {

$( "#addBtn_" + treeNode. tId). unbind(). remove();

};

var zNodes = [

{

"id" : 0,

"Name" : "A组",

"parentId" : - 1,

},

{

"id" : 265,

"Name" : "俄罗斯",

"parentId" : 0,

},

{

"id" : 266,

"Name" : "埃及",

"parentId" : 0,

},

{

"id" : 267,

"Name" : "乌拉圭",

"parentId" : 0,

},

{

"id" : 268,

"Name" : "沙特阿拉伯",

"parentId" : 0,

},

{

"id" : 2,

"Name" : "B组",

"parentId" : - 2,

},

{

"id" : 21,

"Name" : "葡萄牙",

"parentId" : 2,

},

{

"id" : 22,

"Name" : "西班牙",

"parentId" : 2,

},

{

"id" : 23,

"Name" : "摩洛哥",

"parentId" : 2,

},

{

"id" : 24,

"Name" : "伊朗",

"parentId" : 2,

},];

$( document). ready( function () {

$. fn. zTree. init( $( "#first"), setting, zNodes);

var zTree = $. fn. zTree. getZTreeObj( "tree");

});

html:

< html >

< head >

< link rel= "stylesheet" type= "text/css" href= "./css//metroStyle/metroStyle.css" />

< style type= "text/css" >

.main {

text-align: center;

/*让div内部文字居中*/

background-color: #fff;

border-radius: 20px;

width: 300px;

height: 350px;

margin: auto;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

< / style >

head >

< body >

< title >ztree高级功能1 title >

< div class= "main" >

< div class= "box-body" >

< ul id= "first" class= "ztree" style= "width:100%" > ul >

div >

div >

body >

html >

< script type= "text/javascript" src= "./jquery.min.js" > < / script >

< script type= "text/javascript" src= "./jquery.ztree.all.min.js" > < / script >

< script type= "text/javascript" src= "./myztree.js" > < / script >