改造一下jeecg中的部门树
改造一下jeecg中的部门树
假装有需求
关于 jeecg 提供的部门树,相信很多小伙伴都已经用过了,今天假装有那么一个需求 "部门树弹窗选择默认展开下级部门",带着这个需求再次去探索一下吧。
一、改造之前的部门选择树流程
1.1 t:departSelect标签
代码片段:
<t:departSelect selectedNamesInputId="orgNames" selectedIdsInputId="orgIds"></t:departSelect>
关于 selectedNamesInputId 与 selectedIdsInputId 属性:
- selectedNamesInputId:用于显示勾选后的部门名称
- selectedIdsInputId:用于记录勾选后的部门id
使用 "t:departSelect" 标签其实帮我们创建了两个 input,orgNames 与 orgIds,就是上方指定的两个属性名称,效果如下:
<input class="inuptxt" readonly="true" type="text" id="orgNames" name="orgNames" style="width: 150px" onclick="openDepartmentSelect()"><input class="inuptxt" id="orgIds" name="orgIds" type="hidden" value=",">
通过生成的这两个 input,我们发现重点落在了 openDepartmentSelect() 这个方法,下面来看一下这个方法。
1.2 openDepartmentSelect()方法
方法代码:
function openDepartmentSelect() { $.dialog.setting.zIndex = 9999; $.dialog({ content: 'url:departController.do?departSelect', zIndex: 2100, title: '组织机构列表', lock: true, width: '400px', height: '350px', opacity: 0.4, button: [ {name: '确定', callback: callbackDepartmentSelect, focus: true}, {name: '取消', callback: function (){}} ] }).zindex();}
知识点: jeecg 中所有的表单弹出采用的技术都是 lhgdialog ,技术链接:http://www.lhgdialog.com/
通过上方的请求链接,我们找到最终的跳转界面(departSelect.jsp):
1.3 departSelect.jsp界面
<html><head><title>组织机构集合</title>···<script type="text/javascript"> ... //加载展开方法 function zTreeOnExpand(event, treeId, treeNode){ var treeNodeId = treeNode.id; $.post( 'departController.do?getDepartInfo', {parentid:treeNodeId,orgIds:$("#orgIds").val()}, function(data){ var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); var tree = $.fn.zTree.getZTreeObj("departSelect");
if (!treeNode.zAsync){ tree.addNodes(treeNode, dbDate); treeNode.zAsync = true; } else{ tree.reAsyncChildNodes(treeNode, "refresh"); } //tree.addNodes(treeNode, dbDate); } } ); }
//首次进入加载level为1的 $(function(){ $.post( 'departController.do?getDepartInfo', {orgIds:$("#orgIds").val()}, function(data){ var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); $.fn.zTree.init($("#departSelect"), setting, dbDate); } } ); });</script></head><body style="overflow-y: auto" scroll="no"><input id="orgIds" name="orgIds" type="hidden" value="${orgIds}"><ul id="departSelect" class="ztree" style="margin-top: 30px;"></ul></body></html>
知识点: jeecg 中所采用的树列表是 ztree ,技术链接:http://www.treejs.cn/
关于上方这两个方法的解读:
界面加载,首先请求数据,获取数据后初始化 ztree,每次部件被点击都会触发 zTreeOnExpand 方法,附带父部门 id 获取子部门数据。
通过该界面我们找到了最先请求数据的方法:getDepartInfo 方法,那么这个方法其实我们通过上方的注释已经了解到 首次进入加载level为1的,意味着只加载了父部门的数据,通过具体后台代码验证:
@RequestMapping(params = "getDepartInfo")@ResponseBodypublic AjaxJson getDepartInfo(HttpServletRequest request, HttpServletResponse response){
AjaxJson j = new AjaxJson();
String orgIds = request.getParameter("orgIds");
String[] ids = new String[]{}; if(StringUtils.isNotBlank(orgIds)){ orgIds = orgIds.substring(0, orgIds.length()-1); ids = orgIds.split("\\,"); }
List<TSDepart> tSDeparts = new ArrayList<TSDepart>();
StringBuffer hql = new StringBuffer(" from TSDepart t where 1=1 "); tSDeparts = this.systemService.findHql(hql.toString());
List<Map<String,Object>> dateList = new ArrayList<Map<String,Object>>(); if(tSDeparts.size()>0){ Map<String,Object> map = null; String sql = null; Object[] params = null; for(TSDepart depart:tSDeparts){ map = new HashMap<String,Object>(); map.put("id", depart.getId()); map.put("name", depart.getDepartname());
map.put("code",depart.getOrgCode());
if(ids.length>0){ for(String id:ids){ if(id.equals(depart.getId())){ map.put("checked", true); } } }
if(depart.getTSPDepart() != null){ map.put("pId", depart.getTSPDepart().getId()); }else{ map.put("pId", "1"); }
if(ids.length>0){ for(String id:ids){ if(id.equals(depart.getId())){ map.put("checked", true); } } }
dateList.add(map); } } net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(dateList); j.setMsg(jsonArray.toString()); return j;}
果不其然,只加载了 orgType = 1 的结节。
至此,我们已经清楚地了解到具体改造步骤在于数据,接下来要开始改造了。
二、改造需求中的部门树
2.1 后台getDepartInfo方法
删除掉了 parentid 的判断条件
if(StringUtils.isNotBlank(parentid)){ TSDepart dePart = this.systemService.getEntity(TSDepart.class, parentid); hql.append(" and TSPDepart = ?"); tSDeparts = this.systemService.findHql(hql.toString(), dePart);} else { hql.append(" and t.orgType = ?"); tSDeparts = this.systemService.findHql(hql.toString(), "1");}
2.2 departSelect.jsp
$(function(){ $.post( 'departController.do?getDepartInfo', {orgIds:$("#orgIds").val()}, function(data){ var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); $.fn.zTree.init($("#departSelect"), setting, dbDate);
//1、全部展开 //$.fn.zTree.init($("#departSelect"), setting, dbDate).expandAll(true);
var treeObj = $.fn.zTree.getZTreeObj("departSelect"); var nodes = treeObj.getNodes();
//设置节点展开 for (var i= 0; i < nodes.length; i++) { //2、第二种方式实现全部展开 //treeObj.expandNode(nodes[i], true, true, true); }
//3、只展开第一个节点 treeObj.expandNode(nodes[0], true, true, true); } } );});
效果图:
上方代码,提供了1、2、3,其中1、2都是事先全部展开节点,3表示展开指定的节点,具体用法请参考:http://www.treejs.cn/v3/api.php
三、试一试
既然我们了解到了ztee的使用,那么我们不防再完善一下这个部门选择,增加一个模糊搜索的功能,具体实现效果如下。
最后
文章作者:niceyoo
文章地址:https://www.cnblogs.com/niceyoo/p/10527254.html
如果觉得文章对你有所帮助,右下方点个推荐~
改造一下jeecg中的部门树相关推荐
- SQL递归查询上级部门树
SQL递归查询上级部门树,sql2008以上支持with语法. 在做预算归口部门.使用部门的时候,需要递归查询出部门的逐级上级sParent. SQL脚本: with tmp as (select * ...
- 若依框架学习(四)部门树状图
部门树状图的实现 点击用户管理,观察网络活动大概可以猜出treeselect应该是该方法,根据请求url:http://localhost/dev-api/system/dept/treeselect ...
- 基于 MPTT 简单实现部门树管理
前言 MPTT即Modified Preorder Tree Taversal,直译就是修改的先序树遍历.而实际也正是如此,MPTT就是在对树进行先序遍历的基础上在每个节点中增加了left和right ...
- 无法在终端中显示Git树
Killswitchcollective.com的旧文章,2009年6月30日 ,有以下输入和输出 git co master git merge [your_branch] git pushupst ...
- 利用树的先序和后序遍历打印os中的目录树
[0]README 0.1)本代码均为原创,旨在将树的遍历应用一下下以加深印象而已:(回答了学习树的遍历到底有什么用的问题?)你对比下linux 中的文件树 和我的打印结果就明理了: 0.2)我们采用 ...
- jeecg中excel导出字段判空处理
jeecg中excel导出字段判空处理 我们清楚,jeecg 导出 excel 采用的是 easypoi,不知道是否遇到过这种情况: 我们以一个实体属性为例: @Excel(name="问题 ...
- pat根据中序遍历和先序遍历_[leetcode/lintcode 题解] 前序遍历和中序遍历树构造二叉树...
[题目描述] 根据前序遍历和中序遍历树构造二叉树. 在线评测地址: 九章算法 - 帮助更多中国人找到好工作,硅谷顶尖IT企业工程师实时在线授课为你传授面试技巧www.jiuzhang.com [样例 ...
- 中序线索树和后序线索树
约定 Node* Bool Data Bool Node* lchild LTag data RTag rchild LTag=0 时lchild指向左儿子: LTag=1 时lchild指向前驱: ...
- 什么是php的ast结构,什么是AST?Vue源码中AST语法树的解析
这篇文章给大家介绍的内容是关于什么是AST?Vue源码中AST语法树的解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是AST AST是指抽象语法树(abstract syn ...
最新文章
- windows server 查看 删除事件_蓝队护网 之Windows服务器加固
- SpringBoot使用Gradle构建war包
- 一道百度前端线上笔试题
- Spring配置文件中的细节
- CentOS7查看开放端口命令
- 原创-linux下编译器vi、vim的使用技巧
- JAVA 线程的介绍与使用
- C++ 空类,默认产生哪些成员函数
- 当一盆植物在MIT成了精,不,它只是成了机器人
- 配置linux普通用户无密码执行sudo命令
- 设置finder窗口大小的5个小技巧!速看?
- C-V2X灵魂拷问:爆发 | 挑战 | 价值 | 盈利 | 竞合 | 引领
- 日记侠:你的文章为什么阅读量会那么高?
- 科大讯飞语音开发包上手体验(1)
- [Zer0pts2020]easy strcmp细节探究
- javac提示信息变成英文
- msf常用模块功能整理
- yum故障之There are no enabled repos.
- PS怎么旋转图片方向
- 计算机领域区块链是什么是意思,为什么区块链瑞普顿RXP是不可篡改的
热门文章
- [css] 让你手写一个reset的文件,你应该怎么写?要考虑哪些方面呢?
- 工作31:传参对接口
- “约见”面试官系列之常见面试题第二十八篇之vue中的混合(minix)实例理解
- 前端学习(1851)vue之电商管理系统电商系统vue创建项目
- 前端学习(756):javascript预解析
- 前端学习(579):chrome devtools功能简介
- 前端学习(538):全屏布局
- 第一百五十二期:白话Entity Framework Core数据验证
- 第五十期:详解语音识别技术的发展
- 第三十八期:用Git帮助写作者更好地完成工作