easyUI TreeGrid开发详解

很多时候需要使用层级方式显示信息，可以使用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;
    }
}

按照以上流程就能在页面显示一个单位层级的树图。