easyui树的拖拽排序功能

easyui树中有拖拽功能

树结构如下:

一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求:

(1)行政区域没有子节点,点击text加载部门;(2)点击部门的text,如果有下级部门则加载部门,没有则加载人员;(3)树都有拖拽排序功能

1、前台页面:

<script type="text/javascript" src = "js/lib/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src = "js/lib/jquery.easyui.min.js"></script>
<div data-options="region:'center'">
<ul id="orgs_tree" class="easyui-tree" ></ul>
</div>
var orgs_tree_default = {
url : 'servlet/SearchServlet?dispatch=0',
animate : true,
onClick:function(node){
var url = "servlet/SearchServlet?dispatch=1";//默认加载地区的树
var isDeptTree = false;
var unit_id ;
//根据行政区划获取单位列表
$.getJSON(url,{regions_id:node.attributes.regions_id},function(data){
if(data.length > ){ }else if(data.length == ){ }else{
//点击部门树的text,加载树
$("#dept_tree").tree({
url:"servlet/SearchServlet?dispatch=2&unit_id=" + unit_id+"&id=0", //默认加载部门的树
onBeforeExpand:function(node,param){
$("#dept_tree").tree("options").url="servlet/SearchServlet?dispatch=2&unit_id=" + unit_id+"&id="+node.id;
},
onSelect:function(node){ //当点击text的时候,展开子节点
$(this).tree("expand",node.target);
}
});
}
});
},
onDrop:function(target, source, point){ //行政区域树的拖拽功能
var node = $("#orgs_tree").tree("getNode",target); // 将DOM对象转换为node
//组装参数
var param = {
//目标节点属性
targetId : node.attributes.regions_id ,
targetSort : node.attributes.regions_sort , //源节点属性
sourceId : source.attributes.regions_id ,
sourceSort : source.attributes.regions_sort, //操作方式3种,append:变更父节点,top:平级-上 bottom:平级-下
point : point}; //更新数据库,这个后台需要用到存储过程
var url = "servlet/ManagerServlet?dispatch=0";
$.post(url,param,function(data){
alert("success");
});
}
};

2、java后台调用方法

最新文章

  1. 深入浅出node(1) Node简介
  2. 为了解决mysqlbing翻译表字段问题而分析frm文件(持续更新)
  3. Android之旅---广播(BroadCast)
  4. 关于64位WIN7下正确建立JAVA开发环境(转
  5. UVa 10253 - Series-Parallel Networks
  6. [转]linux之date命令
  7. HttpWatch网络抓包工具的使用
  8. Debian上安装TightVNC Server
  9. Nodejs进阶:MD5入门介绍及crypto模块的应用
  10. bzoj 4765 普通计算姬(树状数组 + 分块)
  11. JAVA多线程之wait/notify
  12. 要学的东西太多了,还想学习opencv
  13. python控制流 If-else
  14. Android远程桌面助手(B1309)
  15. jdbc 连接各种数据库 CRUD
  16. Chrome浏览器中autocomplete=&quot;off&quot;不起作用解决方案
  17. SearchScore
  18. Vue项目本地run与build后样式不同,build后样式不生效
  19. setState()之后使用state的问题
  20. 利用反射创建User类的对象

热门文章

  1. VS2010在WIN7下安装报错“下列组件安装失败”如何解决
  2. Codeforces Round #383 【总结】
  3. unity3d 在UGUI中制作自适应调整大小的滚动布局控件
  4. 编译keepalived 方法
  5. springboot2.x 的 RedisCacheManager变化
  6. 101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树
  7. [在读] javascript权威指南第六版
  8. 安卓 使用LruCache 加载图片 遇到的问题
  9. Eclipse集成Maven环境(出现jar的解析或者缺失问题)(或者出现Invalid classpath publish/export dependency /common. Project entries not supported)的统一整理
  10. Apache——DBUtils框架ResultSetHandler接口使用