easyui树节点拖拽排序的存储过程

本文介绍了如何使用EasyUI实现树结构的拖拽排序功能,并结合Oracle存储过程处理拖动后的顺序更新。在行政区域与部门的层级结构中,通过点击节点加载不同层级内容,并支持所有节点的拖拽排序。拖拽操作后,后台通过存储过程更新数据表中节点的顺序信息。

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 = $("#orgs_tree").tree(orgs_tree_default);

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 > 1){
						
					}else if(data.length == 0){
						
					}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后台调用方法
public String dragRegionsSort(int target_id, int target_sort,
			int source_id, int source_sort,String operation) {
		String result = "排序成功";
		conn= this.getConnection();
		CallableStatement statement = conn.prepareCall("{call PRO_UPDATE_REGION_SORT(?,?,?,?,?)}");
		try {
			statement.setInt(1, target_id);
			statement.setInt(2, target_sort);
			statement.setInt(3, source_id);
			statement.setInt(4, source_sort);
			statement.setString(5, operation);
			statement.execute();	
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return result ;
		
	}
3、存储过程
create or replace procedure "PRO_UPDATE_REGION_SORT"
(
       target_id in number,--目标id
       target_sort in number,--目标排序号
       source_id in number,     --源id
       source_sort in number , --源排序号
       operation  in varchar2     --操作类型,之前还是之后
)as
 p_tid   number;
  p_sid  number ; 
begin
  select regions_id into p_tid from tbl_regions t where t.regions_id = target_id;
  select regions_id into p_sid from tbl_regions t where t.regions_id = source_id;
  dbms_output.put_line('---目标id--'||p_tid||'---源id---'||p_sid);
  if target_sort - source_sort = 1 then 
      if operation = 'top' then
        null;
      else
        update tbl_regions t set t.regions_sort = target_sort WHERE t.regions_id = source_id ;
        update tbl_regions t set t.regions_sort = source_sort WHERE t.regions_id = target_id ;
      end if ;
   elsif target_sort - source_sort = -1 then
      if operation = 'top' then
        update tbl_regions t set t.regions_sort = target_sort WHERE t.regions_id = source_id ;
        update tbl_regions t set t.regions_sort = source_sort WHERE t.regions_id = target_id ;   
      else
        null;
      end if;
    elsif target_sort - source_sort < -1 then
      if operation = 'top' then       
        update tbl_regions t set t.regions_sort = t.regions_sort + 1 where t.regions_sort >= target_sort and t.regions_sort < source_sort;
        update tbl_regions t set t.regions_sort = target_sort where t.regions_id = source_id ;
        dbms_output.put_line('---排序前目标sort--'||target_sort||'---源sort---'||source_sort);
        dbms_output.put_line('---排序后目标sort--'||target_sort||'---源sort---'||source_sort);
      else
        update tbl_regions t set t.regions_sort = t.regions_sort + 1 where t.regions_sort > target_sort and t.regions_sort < source_sort;
        update tbl_regions t set t.regions_sort = target_sort+1 where t.regions_id = source_id ;
      end if ;
    elsif target_sort - source_sort > 1 then
      if operation =  'top' then
        update tbl_regions t set t.regions_sort = t.regions_sort - 1 where t.regions_sort > source_sort and t.regions_sort < target_sort;
        update tbl_regions t set t.regions_sort = target_sort - 1 where t.regions_id = source_id ; 
      else 
        update tbl_regions t set t.regions_sort = t.regions_sort - 1 where t.regions_sort > source_sort and t.regions_sort <= target_sort;
        update tbl_regions t set t.regions_sort = target_sort where t.regions_id = source_id ;
      end if;
    end if;
end;





                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沙漏无语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值