最近好久没更新博客了,今天来一篇。以前都在做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。你也可以自己根据需要,改成不同了。
附效果图一张:
- 大小: 19.4 KB
分享到:
相关推荐
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
ztree 异步加载 拖拽 右键菜单 功能
zTree文件夹演示选择菜单效果 zTree文件夹演示选择菜单效果 zTree文件夹演示选择菜单效果 zTree文件夹演示选择菜单效果
这个demo实现了简单的ztree和jsPlumbToolkit两个插件的结合
ztree实现左右两棵树的节点移动,左边移动到右边,在右边树上添加节点,左边树上删除节点,右移左,逻辑一致
zTree -- jQuery 树插件
ztree脚本、ztree下载、包含ztree文件、ztree的pdf教程、ztree的chm教程
可以拖拽的树 ,支持拉入文本框里面的,简单代码开发
Ztree的实例应用,基于jquery实现文件夹折叠效果,如何实现文件夹层级功能,ztree实现文件夹效果,ztree的灵活应用,带检索功能的ztree文件夹折叠效果, 依赖的样式组件: css/zTreeStyle/zTreeStyle.css 依赖的js...
ztree使用说明
zTree组件api,官方可用chm版(zTree api)
前端框架ztree前端框架ztree
最新版的ztree插件源码zTree-zTree_v3.5.17!
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
bootstrap整合select2和ztree实现下拉框带树结构,select2+ztree下拉效果
里面三个压缩包的代码,ztree filter demo ztree的一些代码,供写ztree的人查看使用。
基于最新版本ztree而开发的下拉树插件,还拥有搜索功能
ztree官网参考文档,及对应的demo可以参考学习ztree树是如何实现的
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。... 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
非常好看的ztree样式,可以使用不同图标,可以兼容IE6,Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 兼容 IE6 check 演示 CheckBox演示 Radio演示 异步加载演示 事件演示 编辑演示 默认...