很多时候需要使用层级方式显示信息,可以使用easyui提供的TreeGrid显示层级。实现方式如下。
使用到技术:easyUI, Ajax
框架:SSM
1.树(Tree)实体类准备:
public class Tree {
protected Long id;
protected String aimId;
protected String text;
private Long parentid;
private String ptext;
protected List<Tree> children;
protected String state;
//省略set-get方法
}
2.树(Tree)中节点类(Node)准备:
public class Node {
private Long id;// 节点ID,对加载远程数据很重要。
private String text;// 显示节点文本。
private String state;// 节点状态,'open' 或 //
// 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
private boolean checked;// 表示该节点是否被选中。
private Object attributes;// 被添加到节点的自定义属性。
private List<Node> children;// 一个节点数组声明了若干节点。
private Long parentId;
private Integer typeid; //判断用户类型
//省略set-get方法
//以上属性是很完整的功能结构,当不需要使用到该方法的时候可以适当减少属性
}
3.页面准备
<!--省略页面格式及easyui js css文件引入-->
<select style="width:240px;height:24px" class="easyui-combotree" id="userUnitId" name="userUnitId" data-options="editable:false,panelHeight:'auto'"></select>
4.页面Ajax请求
$(function(){
$("#userUnitId").combotree({
url:'<%=path%>/userUnit/queryUserUnitTree.do',
});
});
5.mapper.xml
<!--使用userUnit类存储单位信息,查询时将该类的属性注入Node节点-->
<select id="queryUnitAll" resultType="com.cttic.safebroadcast.dao.vo.Node">
select t.id as ID ,t.name as text,t.parent_id as parentId from USER_UNITS t
</select>
6.mapper.java
@MyBatisRepository
public interface UserUnitsMapper {
List<Node> queryUnitAll();
}
7.service层
public interface IUserUnitService {
/**
* 查询单位树图
* @return
*/
List<Node> queryUnitAll();
}
@Service
public class UserUnitServiceImpl implements IUserUnitService {
@Autowired
private UserUnitsMapper userUnitsMapper;
@Override
public List<Node> queryUnitAll() {
return this.userUnitsMapper.queryUnitAll();
}
}
8.controller层
@Controller
@RequestMapping(value = "/userUnit")
public class UserUnitController {
@Autowired
private IUserUnitService unitService;
@RequestMapping(value = "/queryUserUnitTree.do")
public void queryUserUnitTree(HttpServletResponse resp) {
try {
List<Node> list = unitService.queryUnitAll();
List<Node> tree = null;
if (list != null && list.size() > 0) {
TreeUtil tu = new TreeUtil(list);
tree = tu.buildTree();
}
String str = JSONObject.toJSONString(tree);
resp.getWriter().write(str);
} catch (IOException e) {
e.printStackTrace();
}
}
}
9.工具类
public class TreeUtil {
private List<Node> tree = new ArrayList<Node>();
private List<Node> nodes;
public TreeUtil(List<Node> nodes) {
this.nodes = nodes;
}
public List<Node> buildTree() {
for (Node node : nodes) {
if (node.getParentId() == null) {//node的pareanID为空,为一级菜单
build(node);
tree.add(node);
}
}
return tree;
}
private void build(Node node) {//node为一级菜单
//确定子节点(下级菜单)
List<Node> children = getChildren(node);
if (!children.isEmpty()) {
node.setChildren(children);
for (Node child : children) {
build(child);
}
}
}
private List<Node> getChildren(Node node) {//node为一级菜单
//用于存放一级菜单的子菜单
List<Node> children = new ArrayList<Node>();
//一级菜单ID
Long id = node.getId();
//遍历所有节点,添加子菜单
for (Node child : nodes) {
Long parentId = child.getParentId();
if (id.equals(parentId)) {
Node n = new Node();
BeanUtils.copyProperties(child, n);
children.add(n);
}
}
return children;
}
}
按照以上流程就能在页面显示一个单位层级的树图。