zTree拖拽效果
程序员文章站
2022-07-15 11:51:22
...
最近好久没更新博客了，今天来一篇。以前都在做android的小软件，现在我想想还是做web吧。感觉自己还是比较喜欢做web，将来找工作也希望web方向的。因为我觉得1，android如果要学的深的话多少会和c等底层语言打交道，这些貌似很高深，没大牛指导感觉即使很努力，估计也没用。2，html5也出来了，即使分成两套标准了，可是也是趋势，估计以后的android应用如果不是和硬件交互的，估计都会做成网页的形式，这样其他平台也顺便可以用了，节约成本。3个人比较喜欢web。
废话不多了。。最近做东西要用到zTree，就花了点时间看了下zTree 的API和demo。发现demo里的拖拽很帅，同时也是我需要的效果，就顺了过来，改成了自己需要的效果。
代码如下：
<script type="text/javascript">
var MoveTest = {
errorMsg: "请选择正确的用户",
curTarget: null,
curTmpTarget: null,
noSel: function() {
try {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
} catch(e){}
},
dragTree2Dom: function(treeId, treeNodes) {
return !treeNodes[0].isParent;
},
prevTree: function(treeId, treeNodes, targetNode) {
return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
},
nextTree: function(treeId, treeNodes, targetNode) {
return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
},
innerTree: function(treeId, treeNodes, targetNode) {
return targetNode!=null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId;
},
dropTree2Dom: function(e, treeId, treeNodes, targetNode, moveType) {
var domId = "dom_" + treeNodes[0].getParentNode().id;
if (moveType == null) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var id=treeNodes[0].getParentNode().id;
var shopid=treeNodes[0].id;
//删除数据
$.post("deleteShopUser.action",{id:id/100000,shopid:shopid/10000000000},function(data)
{
if(data==1)
{
zTree.removeNode(treeNodes[0]);
MoveTest.updateType();
}
})
}
},
dom2Tree: function(e, treeId, treeNode) {
var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
if (!target) return;
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), parentNode;
if (treeNode != null && treeNode.id>=100000&&treeNode.id<10000000000) {
parentNode = treeNode;
parentNode.isParent = true;
//添加数据;
$.post("addShopUser.action",{id:parentNode.id/100000,shopid:target.attr("domId")},function(data)
{
if(data==0)
{
alert("用户: "+parentNode.name+" 已经可管理店铺: "+target.text());
return;
}
else
{
if (tmpTarget) tmpTarget.remove();
if (!!parentNode) {
var nodes = zTree.addNodes(parentNode, {id:target.attr("domId")+"0000000000", name: target.text(),icon:'../IMAGES/shop.png'});
zTree.selectNode(nodes[0]);
} else {
alert(MoveTest.errorMsg);
}
MoveTest.updateType();
MoveTest.curTarget = null;
MoveTest.curTmpTarget = null;
}
});
}
},
updateType: function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getNodes();
for (var i=0, l=nodes.length; i<l; i++) {
var usernodes=nodes[i].children;
for(var j=0;j<usernodes.length;j++)
{
var num = usernodes[j].children ? usernodes[j].children.length : 0;
usernodes[j].name = usernodes[j].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
zTree.updateNode(usernodes[j]);
}
}
},
bindDom: function() {
$(".domBtnDiv").bind("mousedown", MoveTest.bindMouseDown);
},
bindMouseDown: function(e) {
var target = e.target;
if (target!=null && target.className=="domBtn") {
var doc = $(document), target = $(target),
docScrollTop = doc.scrollTop(),
docScrollLeft = doc.scrollLeft();
curDom = $("<span class='dom_tmp domBtn'>" + target.text() + "</span>");
curDom.appendTo("body");
curDom.css({
"top": (e.clientY + docScrollTop + 3) + "px",
"left": (e.clientX + docScrollLeft + 3) + "px"
});
MoveTest.curTarget = target;
MoveTest.curTmpTarget = curDom;
doc.bind("mousemove", MoveTest.bindMouseMove);
doc.bind("mouseup", MoveTest.bindMouseUp);
doc.bind("selectstart", MoveTest.docSelect);
}
if(e.preventDefault) {
e.preventDefault();
}
},
bindMouseMove: function(e) {
MoveTest.noSel();
var doc = $(document),
docScrollTop = doc.scrollTop(),
docScrollLeft = doc.scrollLeft(),
tmpTarget = MoveTest.curTmpTarget;
if (tmpTarget) {
tmpTarget.css({
"top": (e.clientY + docScrollTop + 3) + "px",
"left": (e.clientX + docScrollLeft + 3) + "px"
});
}
return false;
},
bindMouseUp: function(e) {
var doc = $(document);
doc.unbind("mousemove", MoveTest.bindMouseMove);
doc.unbind("mouseup", MoveTest.bindMouseUp);
doc.unbind("selectstart", MoveTest.docSelect);
var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
if (tmpTarget) tmpTarget.remove();
if ($(e.target).parents("#treeDemo").length == 0) {
if (target) {
target.removeClass("domBtn_Disabled");
target.addClass("domBtn");
}
MoveTest.curTarget = null;
MoveTest.curTmpTarget = null;
}
},
bindSelect: function() {
return false;
}
};
var setting = {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
prev: MoveTest.prevTree,
next: MoveTest.nextTree,
inner: MoveTest.innerTree
}
},
async: {
enable: true,
url:"userList.action"
},
data: {
keep: {
parent: true,
leaf: true
},
simpleData: {
enable: true
}
},
callback: {
beforeDrag: MoveTest.dragTree2Dom,
onDrop: MoveTest.dropTree2Dom,
onMouseUp: MoveTest.dom2Tree
},
view: {
selectedMulti: false
}
};
$(document).ready(function(){
$.post("shopList.action", function(data) {
var jsondata=strCut(data);
$.each(jsondata,function(index)
{
var obj=jsondata[index];
var shop="<span class='domBtn' domId='"+obj.id+"'>"+obj.name+"</span>"
$("#dom_1").append(shop);
});
$.fn.zTree.init($("#treeDemo"), setting);
MoveTest.updateType();
MoveTest.bindDom();
});
});
</script>
html
<div> <ul id="treeDemo" class="ztree"></ul> </div> <div class="domBtnDiv"> <div id="dom_1" class="categoryDiv"></div> </div>
css
.dom_line {margin:2px;border-bottom:1px gray dotted;height:1px}
.domBtnDiv {display:block;padding:2px;border:1px gray dotted;
background-color:powderblue;float:left;margin-top:10px;margin-left:10px;}
.categoryDiv {display:inline-block; width:600px;height:450px;}
.domBtn {display:inline-block;cursor:pointer;padding:2px;
margin:2px 10px;border:1px gray solid;background-color:#FFE6B0}
.dom_tmp {position:absolute;font-size:12px;}
ajax调用了addShopUser.action和deleteShopUser.action返回值都为1，这你们可以自己模拟。只要访问两个路径，回调值为1就行了。还有userList.action是返回树的数据，格式如"[{id:1,name:'fhy1',pId:0,open:true}, {id:2,name:'我的店铺',pId:1} ]"
当然你要导入zTree的相关js和jquery相关js。附件里有。当然附件里有原来的demo，路径是JQuery zTree v3.3\demo\cn\super\dragWithOther.html。你也可以自己根据需要，改成不同了。
附效果图一张：
- JQuery_zTree_v3.3.zip (709.9 KB)
- 下载次数: 83
