标签:style blog io color ar os java sp for
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 > 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后台调用方法
标签:style blog io color ar os java sp for
原文地址:http://www.cnblogs.com/estellez/p/4081897.html