最近好久没更新博客了,今天来一篇。以前都在做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。你也可以自己根据需要,改成不同了。
附效果图一张: