标签：function 控件 layer getIndex treeNode 自定义 metro tId var
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTree_v3/css/demo.css" type="text/css">
<link rel="stylesheet" href="zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<link rel="stylesheet" href="./layuiadmin/layui/css/layui.css" media="all">
<script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="zTree_v3/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
dblClickExpand: true,//双击允许展开节点
expandSpeed: "fast",
fontCss: {},
nameIsHTML: false,
selectedMulti: false,
showIcon: true,
showLine: true,
showTitle: true,
txtSelectedEnable: false
},
check: {
enable: false
},
data: {
simpleData: {
enable: true//数据结构定义为simpleData
}
},
edit: {
enable: true,//拖拽必须开启edit
drag: {
isCopy: false,//拖拽时, 设置是否允许复制节点
isMove: true,//拖拽时, 设置是否允许移动节点
prev: false, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作
next: false,//拖拽到目标节点时，设置是否允许移动到目标节点后面的操作
inner: true,//拖拽到目标节点时，设置是否允许成为目标节点的子节点
},
showRenameBtn: false,//隐藏自带的修改按钮
showRemoveBtn: false,//隐藏自带的删除按钮
},
callback: {
// onRightClick: zTreeOnRightClick
// onClick: zTreeOnclick,//单击节点
// onDblClick: zTreeOnDblClick,//双击节点
beforeDrag: zTreeBeforeDrag,//拖拽前
// beforeDrop: zTreeBeforeDrop,//放置前
// onDrop: zTreeOnDrop,//放置
}
};
var zNodes =[
{ id:1, pId:0, name:"pNode 1", open:true},
{ id:11, pId:1, name:"pNode 11"},
{ id:12, pId:1, name:"pNode 12"},
{ id:2, pId:0, name:"pNode 2"},
{ id:21, pId:2, name:"pNode 21", open:true},
{ id:22, pId:2, name:"pNode 22"},
{ id:23, pId:2, name:"pNode 23"},
{ id:3, pId:0, name:"pNode 3", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
$(function(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(true);
});
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
if ($(".add,.down,.up").length>0) return;
var menubtn = '';
var addicon = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新增' onfocus='this.blur();'></span>";//添加按钮
var editicon = "<span class='button edit' id='editBtn_" + treeNode.tId + "' title='编辑' onfocus='this.blur();'></span>";//编辑按钮
var removeicon = "<span class='button remove' id='removeBtn_" + treeNode.tId + "' title='删除' onfocus='this.blur();'></span>";//删除按钮
var downicon = "<span class='button down' id='downBtn_" + treeNode.tId + "' title='向下' onfocus='this.blur();'></span>";//向下按钮
var upicon = "<span class='button up' id='upBtn_" + treeNode.tId + "' title='向上' onfocus='this.blur();'></span>";//向上按钮
if(treeNode.pId == null){
if(treeNode.getIndex() == 0){
menubtn = addicon+editicon+removeicon+downicon;
}else if(treeNode.getNextNode() == null){
menubtn = addicon+editicon+removeicon+upicon;
}else{
menubtn = addicon+editicon+removeicon+downicon+upicon;
}
}else{
if(treeNode.getIndex() == 0){
menubtn = editicon+removeicon+downicon;
}else if(treeNode.getNextNode() == null){
menubtn = editicon+removeicon+upicon;
}else{
menubtn = editicon+removeicon+downicon+upicon;
}
}
sObj.after(menubtn);
// 新增操作
var addbtn = $("#addBtn_"+treeNode.tId);
if (addbtn) addbtn.bind("click", function(){
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type:2,
shadeClose:true,
shade: 0.8,
maxmin:true,
closeBtn: 1,
area:['50%','500px'],
title:['新增','15px'],
content: "add.html",
end: function () {
layer.closeAll();
location.reload();
}
})
})
return false;
});
// 编辑操作
var editbtn = $("#editBtn_"+treeNode.tId);
if (editbtn) editbtn.bind("click", function(){
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type:2,
shadeClose:true,
shade: 0.8,
maxmin:true,
closeBtn: 1,
area:['50%','500px'],
title:['编辑','15px'],
content: "edit.html",
end: function () {
layer.closeAll();
location.reload();
}
})
})
return false;
});
// 删除操作
var removebtn = $("#removeBtn_"+treeNode.tId);
if (removebtn) removebtn.bind("click", function(){
layui.use('layer', function(){
var layer = layui.layer;
layer.confirm('确定要删除吗？', {
btn: ['确定','取消']
}, function(){
layer.msg('已删除', {icon: 1});
}, function(){
layer.msg('已取消');
});
})
return false;
});
// 向下操作
var downbtn = $("#downBtn_"+treeNode.tId);
if (downbtn) downbtn.bind("click", function(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
if(treeNode.pId == null){
treeObj.moveNode(nodes[treeNode.getIndex()+1], nodes[treeNode.getIndex()], "next");
}else{
treeObj.moveNode(treeNode.getParentNode().children[treeNode.getIndex()+1], treeNode.getParentNode().children[treeNode.getIndex()], "next");
}
return false;
});
// 向上操作
var upbtn = $("#upBtn_"+treeNode.tId);
if (upbtn) upbtn.bind("click", function(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
if(treeNode.pId == null){
treeObj.moveNode(nodes[treeNode.getIndex()-1], nodes[treeNode.getIndex()], "prev");
}else{
treeObj.moveNode(treeNode.getParentNode().children[treeNode.getIndex()-1], treeNode.getParentNode().children[treeNode.getIndex()], "prev");
}
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
$("#editBtn_"+treeNode.tId).unbind().remove();
$("#removeBtn_"+treeNode.tId).unbind().remove();
$("#downBtn_"+treeNode.tId).unbind().remove();
$("#upBtn_"+treeNode.tId).unbind().remove();
};
function zTreeOnRightClick(event, treeId, treeNode) {
console.log(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
function zTreeBeforeDrag(treeId, treeNodes) {
if(treeNodes[0].pId == null || treeNodes[0].pId){
console.log(节点不允许拖放);
return false;
}
};
//-->
</SCRIPT>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree" style="width: 500px!important; height: auto; padding: 30px; background: #fff; border: none;overflow-y: auto;"></ul>
</div>
</div>
</BODY>
</HTML>
layui文档
https://layuion.com/docs/
ztree文档
https://treejs.cn/v3/api.php
标签：function,控件,layer,getIndex,treeNode,自定义,metro,tId,var 来源： https://www.cnblogs.com/xiaofengzheng/p/16501915.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。