网站备案怎么转入it运维系统详细设计

网站备案怎么转入,it运维系统详细设计,wordpress在线邮箱验证码,外贸多语种网站推广下面直接给你最实用、最常见的树形菜单拖放控制#xff08;Draggable Droppable Tree#xff09;方法#xff0c;jQuery EasyUI 的 tree 组件内置支持拖拽节点#xff08;移动节点、排序、跨树拖拽#xff09;#xff0c;复制粘贴就能用#xff0c;领导最爱的“菜…下面直接给你最实用、最常见的树形菜单拖放控制Draggable Droppable Tree方法jQuery EasyUI 的tree组件内置支持拖拽节点移动节点、排序、跨树拖拽复制粘贴就能用领导最爱的“菜单排序、部门调动、分类拖拽调整层级”效果全都有方法1最简单最常用 - 开启基本拖放推荐现在就用这个3秒出效果!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleEasyUI 树形菜单 - 拖放控制/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodydivstylemargin:30px;divstylemargin-bottom:15px;ahrefjavascript:void(0)classeasyui-linkbutton c6iconClsicon-saveonclicksaveTreeOrder()保存排序/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-reloadonclick$(#dragTree).tree(reload)刷新/a/div!-- 关键dnd:true 开启拖放功能 --uliddragTreeclasseasyui-treedata-optionsurl:get_menu_data.php, !-- 可以静态标记或异步 -- animate:true, lines:true, dnd:true !-- 开启拖拽 --!-- 静态示例如果不用异步 --lidata-optionsiconCls:icon-settingspan系统管理/spanullispan用户管理/span/lilispan角色管理/span/lilispan部门管理/span/lilispan菜单管理/span/li/ul/lilidata-optionsiconCls:icon-productspan商品管理/span/lilidata-optionsiconCls:icon-orderspan订单管理/span/lilidata-optionsiconCls:icon-reportspan报表统计/span/li/ul/divscript// 保存拖拽后的树结构常用获取所有节点顺序和层级functionsaveTreeOrder(){varroots$(#dragTree).tree(getRoots);// 获取所有根节点vartreeData[];$.each(roots,function(i,root){treeData.push(getNodeData(root));});console.log(拖拽后的树结构,JSON.stringify(treeData,null,2));$.messager.alert(保存结果,preJSON.stringify(treeData,null,2)/pre,info);// 实际项目中$.post(save_menu_order.php, {tree: treeData});}// 递归获取节点完整结构id、text、childrenfunctiongetNodeData(node){vardata{id:node.id||null,text:node.text,iconCls:node.iconCls};varchildren$(#dragTree).tree(getChildren,node.target);if(children.length0){data.children[];$.each(children,function(j,child){data.children.push(getNodeData(child));});}returndata;}// 可选拖拽事件监听$(#dragTree).tree({onDrop:function(target,source,point){// point: append作为子节点、top插入到上方、bottom插入到下方console.log(节点 source.text 被拖放到 $(target).parent().find(span).text() 的 point);},onBeforeDrop:function(target,source,point){// 可以在这里做限制比如不允许某些节点拖拽// return false; // 阻止拖放returntrue;}});/script/body/html效果亮点拖拽节点可移动到其他节点的上方、下方或作为子节点三种放置方式拖拽时有清晰的插入线提示top/bottom/append支持同级排序、跨层级移动比如把“用户管理”拖到“商品管理”下面拖完后调用saveTreeOrder()获取完整树结构可直接保存到服务器方法2高级拖放控制限制拖拽规则$(#dragTree).tree({dnd:true,onBeforeDrag:function(node){// 禁止拖拽某些节点比如根节点if(node.id1){$.messager.alert(提示,根节点不允许拖拽);returnfalse;}returntrue;},onBeforeDrop:function(target,source,point){vartargetNode$(#dragTree).tree(getNode,target);// 禁止把自己拖到自己子节点里避免死循环if($(#dragTree).tree(isAncestor,source.target,target)){returnfalse;}// 只允许作为子节点不允许同级排序if(point!append){returnfalse;}// 只允许拖到有特定icon的节点下if(targetNode.iconCls!icon-folder){returnfalse;}returntrue;}});方法3行内拖拽排序只允许同级排序不允许跨层级onBeforeDrop:function(target,source,point){vartargetNode$(#dragTree).tree(getNode,target);varsourceParent$(#dragTree).tree(getParent,source.target);vartargetParent$(#dragTree).tree(getParent,target);// 只允许同级拖拽父节点相同if(sourceParenttargetParentsourceParent.targettargetParent.target){returnpointtop||pointbottom;// 只允许插入上下}returnfalse;}方法4两个树之间互相拖拽跨树拖放ulidtree1classeasyui-treedata-optionsdnd:true,url:tree1.json/ululidtree2classeasyui-treedata-optionsdnd:true,url:tree2.json/ulscript$(#tree1).tree({onDrop:function(target,source,point){// source.tree 表示来源树如果是跨树拖拽if(source.treesource.tree[0]!this){// 从tree2拖到tree1$(#tree1).tree(append,{parent:target,data:[$.extend({},source)]// 复制节点数据});$(source.tree).tree(remove,source.target);// 从原树删除}}});/script你现在直接复制方法1的完整代码运行就能看到一个支持自由拖拽排序的树形菜单了拖拽完成后点击“保存排序”就能获取完整的树结构JSON完美用于菜单排序、部门调整、分类管理等场景。想要我给你一个完整的示例异步树 拖拽排序 限制规则 保存到服务器 拖拽提示美化或者你告诉我你的具体需求比如“只允许同级排序”“不允许拖到叶子节点”“拖拽后自动展开”我2分钟发你精准代码复制就能跑快说说你想怎么控制拖放我手把手帮你搞定5分钟内看到超级专业的树形菜单拖拽效果