ztree增删改和拖动

╰+哭是因爲堅強的太久メ 2022-08-07 09:52 172阅读 0赞

页面：<ul style="width: 500px;" id="treeDemo" class="ztree"></ul>

js：function loadClassList(parentId)\{

var setting = \{  
async: \{  
enable: true,  
url:"../classifi/getClassifiList.action",  
   autoParam:\["id"\],  
otherParam: \["parentId",parentId\],  
dataFilter: filter  
\},  
  
view: \{expandSpeed:"",  
addHoverDom: addHoverDom,  
removeHoverDom: removeHoverDom,  
selectedMulti: false  
\},  
edit: \{  
enable: true  
\},  
data: \{  
simpleData: \{  
enable: true  
\}  
\},  
callback: \{  
beforeRemove: beforeRemove,  
beforeRename: beforeRename,  
onRemove: zTreeOnRemove,  
onRename: zTreeOnRename,  
onDrop: zTreeOnDrop  
\}  
\};  
  
  
  
  
function filter(treeId, parentNode, childNodes) \{  
if(typeof(childNodes)=="object")\{  
return childNodes;  
\}else\{  
$("\#treeDemo").append("<div id='addNode'>添加</div>");  
$("\#addNode").click(function()\{  
$.ajax(\{  
url:"../classifi/addClassiFi.action?parentId="+$(".select\_area option:selected").attr("value")+"&name=new\_node",  
success:function(data)\{  
add\_class\_tree($(".select\_area option:selected").attr("value"));  
\}  
\});  
\});  
  
return null;  
\}  
  
\}  
/\*\*\*  
\* treeNodes:移动的节点  
\* targetNode:接收移动节点的节点  
\*/  
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) \{//移动之后的事件  
   var node = targetNode ? (targetNode.id) : "isRoot";//获得父节点  
var parentId;  
if(node=="isRoot")\{//判断是否为根节点  
parentId=$("\#select\_area option:selected").attr("value");  
\}else\{  
parentId=node;  
\}  
var url2="../classifi/updateClass.action?parentId="+parentId+"&id="+treeNodes\[0\].id+"&name="+treeNodes\[0\].name;  
url2 = encodeURI(url2);  
url2 = encodeURI(url2);  
$.ajax(\{  
url:url2,  
success:function(data)\{  
alert("修改成功！");  
\}  
\});  
\};  
  
function beforeRemove(treeId, treeNode) \{//点击删除按钮后的事件，弹出确认按钮  
var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
zTree.selectNode(treeNode);  
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");  
\}   
  
function zTreeOnRemove(event, treeId, treeNode) \{//确定删除之后  
var node = treeNode.getParentNode();//获得父节点  
var parentId;  
if(node==null)\{//判断是否为根节点  
parentId=$("\#select\_area option:selected").attr("value");  
\}else\{  
parentId=node.id;  
\}  
$.ajax(\{  
url:"../classifi/deleteClass.action?parentId="+parentId+"&id="+treeNode.id,  
success:function(data)\{  
alert("删除成功！");  
add\_class\_tree($(".select\_area option:selected").attr("value"));  
\}  
\});  
\}  
  
function beforeRename(treeId, treeNode, newName) \{//修改名字之前  
if (newName.length == 0) \{  
alert("节点名称不能为空.");  
return false;  
\}  
return true;  
\}  
function zTreeOnRename(event, treeId, treeNode, isCancel) \{//确认修改名字  
var node = treeNode.getParentNode();//获得父节点  
var parentId;  
if(node==null)\{//判断是否为根节点  
parentId=$("\#select\_area option:selected").attr("value");  
\}else\{  
parentId=node.id;  
\}  
var url2="../classifi/updateClass.action?parentId="+parentId+"&id="+treeNode.id+"&name="+treeNode.name;  
url2 = encodeURI(url2);  
url2 = encodeURI(url2);  
$.ajax(\{  
url:url2,  
success:function(data)\{  
alert("修改成功！");  
\}  
\});  
\}  
  
function addHoverDom(treeId, treeNode) \{//鼠标移入节点，添加三个编辑按钮  
var sObj = $("\#" + treeNode.tId + "\_span");  
if (treeNode.editNameFlag || $("\#addBtn\_"+treeNode.tId).length>0) return;  
var addStr = "<span class='button add' id='addBtn\_" + treeNode.tId  
\+ "' title='add node' οnfοcus='this.blur();'></span>";  
sObj.after(addStr);  
var btn = $("\#addBtn\_"+treeNode.tId);  
if (btn) btn.bind("click", function()\{  
var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
$.ajax(\{  
url:"../classifi/addClassiFi.action?parentId="+treeNode.id+"&name=new\_node",  
success:function(data)\{  
zTree.addNodes(treeNode, \{id:data, pId:treeNode.id,name:"new\_node"\});  
\}  
\});  
return false;  
\});  
\};  
  
function removeHoverDom(treeId, treeNode) \{//鼠标离开节点，移除三个编辑按钮  
$("\#addBtn\_"+treeNode.tId).unbind().remove();  
\};  
  
  
$(document).ready(function()\{  
$.fn.zTree.init($("\#treeDemo"), setting);  
\});  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关增删改查

-- ---------------------------- -- Table structure for `user` -- -----------

迷南。/ 2023年06月03日 12:53/ 0 赞/ 37 阅读

相关 java mvc增删改查_springmvc之增删改查

spring框架的好处，就是能用注解干的事情，就不用写代码。代码分离，各司其职。 1.导包，还是4大核心架包，加上web和webmvc 加日志记录 logging. 2.配

港控/mmm°/ 2022年11月03日 11:20/ 0 赞/ 351 阅读

相关增删改查

package cn.itcast.jdbc; import java.sql.Connection; import java.sql.Res

╰+攻爆jí腚メ/ 2022年08月09日 00:46/ 0 赞/ 430 阅读

相关 ztree增删改和拖动

页面：<ul style="width: 500px;" id="treeDemo" class="ztree"></ul> js：function loadClassLis

╰+哭是因爲堅強的太久メ/ 2022年08月07日 09:52/ 0 赞/ 173 阅读

相关 oracle和hibernate增删改查

一、打开oracle数据库，启动scott账户 1.在我的电脑--管理--服务和应用程序--服务中开启这两个服务 ![20170101144539541][] 2.打卡P

妖狐艹你老母/ 2022年07月13日 08:11/ 0 赞/ 270 阅读

相关 Ztree 节点的增删改

<script src="/Scripts/zTree_v3/js/jquery.ztree.all-3.5.js" type="text/javascript" ><

短命女/ 2022年07月12日 04:19/ 0 赞/ 302 阅读

相关使用zTree制作简单异步加载树形结构,支持增删改拖动

ztree版本 v3.5.34,数据交互格式为json. ztreeAPI : [点击打开链接][Link 1] <!DOCTYPE html> <HTML> <H

超、凢脫俗/ 2022年05月30日 00:11/ 0 赞/ 120 阅读

相关 JDBC增删改

执行新增操作 <table style="margin-left:53.95pt;width:410.35pt;"> <tbody> <tr> <td st

以你之姓@/ 2022年05月14日 06:07/ 0 赞/ 241 阅读

相关 MongoDB增删改

查看当前数据库 > show dbs admin 0.000GB config 0.000GB local 0.000GB

浅浅的花香味﹌/ 2022年04月06日 16:16/ 0 赞/ 327 阅读

相关增删改查

在settings里面的INSTALLED\_APPS添加上你所创建的应用。 INSTALLED_APPS = [ 'django.contrib.admin', '

矫情吗；*/ 2022年01月05日 09:57/ 0 赞/ 548 阅读