Jeecg代码搬砖圣地番外篇(左右树布局)
1.问题描述：组织机构属性展示并且可编辑如下图展示
2.前台js引入方法
<t:base type="jquery,easyui"></t:base> <link rel="stylesheet" href="plug-in/ztree/css/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js"></script> <script type="text/javascript" src="plug-in/ztree/js/ztreeCreator.js"></script>
3.界面展示
<div class="easyui-layout" fit="true" scroll="no"> <div data-options="region:'west',title:'组织管理',split:true" style="width:200px;overflow: auto;"> <div id="orgTree" class="ztree"></div> </div> <div data-options="region:'center',border:false" style="text-align: center;"> <iframe id="listFrame" src="" frameborder="no" width="100%" height="100%"></iframe> </div> <div class="hidden"> <div id="orgMenu" class="easyui-menu" data-options="onClick:menuHandler" style="width: 120px;"> <div data-options="name:'add'">添加子级组织</div> <div data-options="name:'edit'">编辑当前组织</div> <div data-options="name:'remove'">删除当前组织</div> <div data-options="name:'fresh'">刷新</div> </div> </div> </div>
4.加载树对应的js方法
//加载树 var orgTree ; function loadTree() { var zNodes; jQuery.ajax({ async : false, cache:false, type: 'POST', dataType : "json", url: 'jeecgFormDemoController.do?getTreeDemoData',//请求的action路径 error: function () {//请求失败处理函数 alert('请求失败'); }, success:function(data){ //请求成功后处理函数。 console.log(data.obj) zNodes = data.obj; //把后台封装好的简单Json格式赋给zNodes } }); var ztreeCreator = new ZtreeCreator('orgTree',"jeecgDemoController.do?getTreeData",zNodes) .setCallback({onClick:zTreeOnLeftClick,onRightClick:zTreeOnRightClick}) .initZtree({},function(treeObj){orgTree = treeObj}); };
相对应的java方法
@RequestMapping(params="getTreeDemoData",method ={RequestMethod.GET, RequestMethod.POST}) @ResponseBody public AjaxJson getTreeDemoData(TSDepart depatr,HttpServletResponse response,HttpServletRequest request ){ AjaxJson j = new AjaxJson(); try{ List<TSDepart> depatrList = new ArrayList<TSDepart>(); StringBuffer hql = new StringBuffer(" from TSDepart t"); depatrList = this.systemService.findHql(hql.toString()); List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>(); Map<String,Object> map = null; for (TSDepart tsdepart : depatrList) { map = new HashMap<String,Object>(); map.put("chkDisabled",false); map.put("click", true); map.put("id", tsdepart.getId()); map.put("name", tsdepart.getDepartname()); map.put("nocheck", false); map.put("struct","TREE"); map.put("title",tsdepart.getDepartname()); if (tsdepart.getTSPDepart() != null) { map.put("parentId",tsdepart.getTSPDepart().getId()); }else { map.put("parentId","0"); } dataList.add(map); } j.setObj(dataList); }catch(Exception e){ e.printStackTrace(); } return j; }
@RequestMapping(params="getTreeData",method ={RequestMethod.GET, RequestMethod.POST}) @ResponseBody public AjaxJson getTreeData(TSDepart depatr,HttpServletResponse response,HttpServletRequest request ){ AjaxJson j = new AjaxJson(); try{ List<TSDepart> depatrList = new ArrayList<TSDepart>(); StringBuffer hql = new StringBuffer(" from TSDepart t"); //hql.append(" and (parent.id is null or parent.id='')"); depatrList = this.systemService.findHql(hql.toString()); List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>(); Map<String,Object> map = null; for (TSDepart tsdepart : depatrList) { String sqls = null; Object[] paramss = null; map = new HashMap<String,Object>(); map.put("id", tsdepart.getId()); map.put("name", tsdepart.getDepartname()); if (tsdepart.getTSPDepart() != null) { map.put("pId", tsdepart.getTSPDepart().getId()); map.put("open",false); }else { map.put("pId", "1"); map.put("open",false); } sqls = "select count(1) from t_s_depart t where t.parentdepartid = ?"; paramss = new Object[]{tsdepart.getId()}; long counts = this.systemService.getCountForJdbcParam(sqls, paramss); if(counts>0){ dataList.add(map); }else{ TSDepart de = this.systemService.get(TSDepart.class, tsdepart.getId()); if (de != null) { map.put("id", de.getId()); map.put("name", de.getDepartname()); if(tsdepart.getTSPDepart()!=null){ map.put("pId", tsdepart.getTSPDepart().getId()); map.put("open",false); }else{ map.put("pId", "1"); map.put("open",false); } dataList.add(map); }else{ map.put("open",false); dataList.add(map); } } } j.setObj(dataList); }catch(Exception e){ e.printStackTrace(); } return j; }
5.左击事件
//左击 function zTreeOnLeftClick(event, treeId, treeNode) { curSelectNode = treeNode; var parentId = treeNode.id; var url = "departController.do?update&id=" + curSelectNode.id; if(curSelectNode.parentId=="0"){ $.topCall.warn('该节点为根节点，请点击具体的组织'); return false; } $("#listFrame").attr("src", url); };
@RequestMapping(params = "update") public ModelAndView update(TSDepart depart, HttpServletRequest req) { List<TSDepart> departList = systemService.getList(TSDepart.class); req.setAttribute("departList", departList); if (StringUtil.isNotEmpty(depart.getId())) { depart = systemService.getEntity(TSDepart.class, depart.getId()); req.setAttribute("depart", depart); } return new ModelAndView("system/depart/depart"); }
其他
/** * 树右击事件 */ function zTreeOnRightClick(e, treeId, treeNode) { if (treeNode) { orgTree.selectNode(treeNode); curSelectNode=treeNode; var isfolder = treeNode.isFolder; var h = $(window).height(); var w = $(window).width(); var menuWidth = 120; var menuHeight = 75; var menu = null; if (treeNode != null) { menu = $('#orgMenu'); } var x = e.pageX, y = e.pageY; if (e.pageY + menuHeight > h) { y = e.pageY - menuHeight; } if (e.pageX + menuWidth > w) { x = e.pageX - menuWidth; } menu.menu('show', { left : x, top : y }); } }; //菜单对应项 function menuHandler(item) { if ('add' == item.name) { addNode(); } else if ('remove' == item.name) { delNode(); } else if ('sort' == item.name) { sortNode(); } else if ('edit' == item.name) { editNode(1); } else if ('fresh' == item.name) { refreshNode(); } }; function refreshNode() { loadTree(); }; //添加节点 function addNode() { var selectNode = getSelectNode(); if (!selectNode) return; var url = "departController.do?add&id=" + selectNode.id; $("#listFrame").attr("src", url); }; //编辑节点 function editNode(type) { var selectNode = getSelectNode(); if (!selectNode) return; //根节点 不能编辑 if(selectNode.id=="0" && type==1 ){ $.topCall.warn('该节点为根节点，不可编辑'); return; } var url = "departController.do?update&id=" + selectNode.id; $("#listFrame").attr("src", url); }; //删除 function delNode() { var selectNode = getSelectNode(); var nodeId = selectNode.id; if (nodeId == "0") { $.topCall.warn('该节点为根节点，不可删除'); return; } var url = "jeecgFormDemoController.do?del&id="+nodeId; if(!confirm('温馨提示', '确定删除该组织以及该组织下的所有子组织？')){ return; } jQuery.ajax({ async : false, cache:false, type: 'GET', dataType : "json", url: url,//请求的action路径 error: function () {//请求失败处理函数 alert('请求失败'); }, success:function(data){ //请求成功后处理函数。 if(data.success){ orgTree.removeNode(selectNode); $("#listFrame").attr("src", "about:blank"); }else{ alert(data.msg); } } }); }; //选择资源节点。 function getSelectNode() { orgTree = $.fn.zTree.getZTreeObj("orgTree"); var nodes = orgTree.getSelectedNodes(); var node = nodes[0]; return node; }; </script> <script> $(function() { loadTree(); }); </script>
@RequestMapping(params = "del") @ResponseBody public AjaxJson del(TSDepart depart, HttpServletRequest request) { AjaxJson j = new AjaxJson(); depart = systemService.getEntity(TSDepart.class, depart.getId()); Long childCount = systemService.getCountForJdbcParam("select count(1) from t_s_depart where parentdepartid = ?", depart.getId()); if(childCount>0){ j.setSuccess(false); j.setMsg("有下级,不能删除"); return j; } systemService.executeSql("delete from t_s_role_org where org_id=?", depart.getId()); j.setMsg("删除成功"); return j; }
