EasyUI创建人员树的实例代码

EasyUI创建人员树的实例代码

最近做了一个树状的下拉列表，在这里记录一下，以后可以直接使用

项目中的树状下拉列表是用来选择人员用的，具体实现展示如下：

先说一说功能，左边的人员数是提供选人的，当点击中间的按钮，选中的人员会直接移到右边，如果要删除已选中的人员，只需要双击右边人的姓名即可，点击确定进行集体的业务逻辑操作，一般就是新增人员到某一个表中。

我们再来看看这个DIV的具体代码，由于项目中在多个地方都使用到了这个人员树，所以我把这个DIV抽象出来当作一个公共的jsp页面。如需调用，只需要include这个jsp即可

userTree.jsp:

<%@ page contentType="text/html;charset=utf-8"%>

<%@ taglib uri="http://springframework.org/tags/form" prefix="form"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib prefix="sino" tagdir="/WEB-INF/tags"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

type="text/css" rel="stylesheet" />

data-backdrop="static">

待选择人

已选择人

style="border:1px solid #e4eaf8; float: left; width: 250px; height: 300px; overflow-x: scroll;">

>>

style="border:1px solid #e4eaf8;width:250px; height: 300px;overflow-x: scroll;">

下面再来看看java后台是如何来查找这个树的，附上后台代码

//选择评估人-树形结构

@RequestMapping(value = "chooseAssessorTree")//这里不要指定请求方式

public void chooseAssessorTree(HttpServletRequest req,HttpServletResponse res){

//每次点击节点的时候会传入一个节点ID值
　　　　　 String id = req.getParameter("id");

//第一次加载树时选择的区域

String groupId = req.getParameter("groupId");

List

BuildJSON.printToClient(req, res, arrayBuilder(list));

}

//获得树值

private JSONArray arrayBuilder(List

JSONArray arr = new JSONArray();

if (list != null && list.size() > 0) {

for (int i=0;i

JSONObject obj = new JSONObject();

Map map=list.get(i);

String userImg=map.get("userImg").toString();

if (userImg.equals("1")) {//表示到了叶子节点，选择出人

obj.put("id", map.get("loginName"));

obj.put("text", map.get("displayName"));

obj.put("state", "open");

//obj.put("iconCls", "icon-user2-gj");

}else{

obj.put("id", map.get("groupId"));

obj.put("text", map.get("groupName"));

obj.put("state", "closed");

}

arr.add(obj);

}

}

return arr;

}

dao查询方法

/**查询树结构的人员以及部门数据

* @param parentGroupId

* @param groupId 第一次加载树查询的 区域 例如是成都分公司，则查询出成都分公司下面的部门以及人员

* @return

*/

List

对应的xml

SELECT

e.loginName,

e.displayName,

e.groupId,

e.groupCode,

e.groupName,

e.disOrder,

e.userImg

FROM

(SELECT s.loginName,s.displayName,s.groupId,s.groupCode,s.groupName,s.disOrder,s.userImg FROM

(SELECT '0' loginName,

'0' displayName,

fg.ID groupId,

fg.CODE groupCode,

fg.NAME groupName,

fg.DISPLAY_ORDER disOrder,

isnull((select count(id) FROM FND_GROUP where PARENT_ID=fg.ID),0) groupLeaf,

(select COUNT(1) from FND_USER_GROUP fug, FND_USER fu where fug.USER_ID = fu.ID and fug.GROUP_ID = fg.ID) userLeaf,

0 userImg

FROM FND_GROUP fg

WHERE fg.ENABLE_FLAG = 'Y'

AND fg.PARENT_ID = #{parentGroupId}

AND fg.PARENT_ID = #{groupId}

AND fg.GROUP_LEVEL = 0

)s WHERE s.groupLeaf>0 OR s.userLeaf>0

UNION ALL

SELECT fu.LOGIN_NAME loginName,

fu.DISPLAY_NAME displayName,

fg.ID groupId,

fg.CODE groupCode,

fg.NAME groupName,

fg.DISPLAY_ORDER disOrder,

1 userImg

FROM FND_USER fu

LEFT JOIN FND_USER_GROUP fug ON fu.ID=fug.USER_ID

LEFT JOIN FND_GROUP fg ON fug.GROUP_ID=fg.ID

WHERE fu.ENABLE_FLAG = 'Y'

AND fug.PRIMARY_FLAG='Y'

AND fg.NAME!=''

AND fu.LOGIN_NAME!=''

AND fu.DISPLAY_NAME!=''

AND fu.MOBILE!=''

AND fug.GROUP_ID = #{parentGroupId}

AND fug.GROUP_ID = #{groupId}

AND fg.GROUP_LEVEL = 0

)e

ORDER BY userImg, CAST(disOrder AS int)

最后再附上一个使用实例的 jsp

<%--

Created by IntelliJ IDEA.

User: zht

Date: 2017/7/18

Time: 20:36

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=utf-8" %>

<%@ taglib uri="http://springframework.org/tags/form" prefix="form" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib prefix="sino" tagdir="/WEB-INF/tags" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

JSONObject obj = new JSONObject();

Map map=list.get(i);

String userImg=map.get("userImg").toString();

if (userImg.equals("1")) {//表示到了叶子节点，选择出人

obj.put("id", map.get("loginName"));

obj.put("text", map.get("displayName"));

obj.put("state", "open");

//obj.put("iconCls", "icon-user2-gj");

}else{

obj.put("id", map.get("groupId"));

obj.put("text", map.get("groupName"));

obj.put("state", "closed");

}

arr.add(obj);

}

}

return arr;

}

dao查询方法

/**查询树结构的人员以及部门数据

* @param parentGroupId

* @param groupId 第一次加载树查询的 区域 例如是成都分公司，则查询出成都分公司下面的部门以及人员

* @return

*/

List

对应的xml

SELECT

e.loginName,

e.displayName,

e.groupId,

e.groupCode,

e.groupName,

e.disOrder,

e.userImg

FROM

(SELECT s.loginName,s.displayName,s.groupId,s.groupCode,s.groupName,s.disOrder,s.userImg FROM

(SELECT '0' loginName,

'0' displayName,

fg.ID groupId,

fg.CODE groupCode,

fg.NAME groupName,

fg.DISPLAY_ORDER disOrder,

isnull((select count(id) FROM FND_GROUP where PARENT_ID=fg.ID),0) groupLeaf,

(select COUNT(1) from FND_USER_GROUP fug, FND_USER fu where fug.USER_ID = fu.ID and fug.GROUP_ID = fg.ID) userLeaf,

0 userImg

FROM FND_GROUP fg

WHERE fg.ENABLE_FLAG = 'Y'

AND fg.PARENT_ID = #{parentGroupId}

AND fg.PARENT_ID = #{groupId}

AND fg.GROUP_LEVEL = 0

)s WHERE s.groupLeaf>0 OR s.userLeaf>0

UNION ALL

SELECT fu.LOGIN_NAME loginName,

fu.DISPLAY_NAME displayName,

fg.ID groupId,

fg.CODE groupCode,

fg.NAME groupName,

fg.DISPLAY_ORDER disOrder,

1 userImg

FROM FND_USER fu

LEFT JOIN FND_USER_GROUP fug ON fu.ID=fug.USER_ID

LEFT JOIN FND_GROUP fg ON fug.GROUP_ID=fg.ID

WHERE fu.ENABLE_FLAG = 'Y'

AND fug.PRIMARY_FLAG='Y'

AND fg.NAME!=''

AND fu.LOGIN_NAME!=''

AND fu.DISPLAY_NAME!=''

AND fu.MOBILE!=''

AND fug.GROUP_ID = #{parentGroupId}

AND fug.GROUP_ID = #{groupId}

AND fg.GROUP_LEVEL = 0

)e

ORDER BY userImg, CAST(disOrder AS int)

最后再附上一个使用实例的 jsp

<%--

Created by IntelliJ IDEA.

User: zht

Date: 2017/7/18

Time: 20:36

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=utf-8" %>

<%@ taglib uri="http://springframework.org/tags/form" prefix="form" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib prefix="sino" tagdir="/WEB-INF/tags" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

action="${ctx}/scm/special/distribute/submit" method="post">

action="${ctx}/scm/special/distribute/submit" method="post">

任务分发

关闭

本次评估信息

批量设置评分人

批量清空评分人

${line.userNames}

设置评估人

<%-- <%@ include file="../../../../static/scm/userTree.jsp"%> --%>

总结

以上所述是给大家介绍的EasyUI创建人员树的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。