-
简介
- jsTree是一款基于jQuery的树形控件,具有可扩展性强、可编辑和可配置的特性。
- 支持HTML、JSON和Ajax数据加载。
- jsTree的皮肤可自由定制。
-
使用方法
- 引入依赖
<!-- jQuery依赖 --> <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script> <!-- jsTree依赖 --> <script src="https://cdn.bootcss.com/jstree/3.3.5/jstree.min.js"></script> <!-- 第三方皮肤 --> <link rel="stylesheet" data-th-href="@{/jsTree/css/style.min.css}">
- HTML页面
<body> <div id="deptTree"></div> </body> <script data-th-inline="javascript"> $(function () { createDeptTree(); }); function createDeptTree() { $.get("/makelocks/jsTree/list", {}, function (r) { var data = r.msg; $("#deptTree").jstree({ "core": { 'data': data.children, //数据加载 'multiple': false // 取消多选 }, "plugins": ["checkbox"], // 显示复选框 "checkbox": { "keep_selected_style": false, // 取消选中时的背景色 "three_state": false // 取消父子关联 } }).on("loaded.jstree", function (event, data) { $("#deptTree").jstree().open_all(); // 初始化树时展开树 $('#deptTree').jstree('select_node', [1, 2], true); //默认选中 }).on("changed.jstree", function () { console.log("hello world!"); //绑定选取监听 }); }); } </script>
- Ajax获取的JSON数据格式
"code": 0, "msg": { "id": "0", "icon": null, "url": null, "text": "根节点", "state": null, "checked": false, "attributes": null, "children": [{ "id": "1", "icon": null, "url": null, "text": "人事部", "state": null, "checked": false, "attributes": null, "children": [], "parentId": "0", "hasParent": true, "hasChildren": false }], "parentId": "", "hasParent": false, "hasChildren": true }
- 树结构实体
public class Tree<T> { private String id; private String icon; private String url; private String text; private Map<String, Object> state; private boolean checked = false; private Map<String, Object> attributes; private List<Tree<T>> children = new ArrayList<>(); private String parentId; private boolean hasParent = false; private boolean hasChildren = false; // 构造函数及属性的getter、setter函数略 }
- 树形层级结构数据封装类
public class TreeUtils { /** * 将树节点集合封装成树形对象(Tree对象) * @param nodes * @param <T> * @return */ public static <T> Tree<T> build(List<Tree<T>> nodes) { if (nodes == null || nodes.size() < 1) { return null; } List<Tree<T>> topNodes = new ArrayList<>(); for (Tree<T> children : nodes) { String pid = children.getParentId(); if (pid == null || pid.equals("0")) { topNodes.add(children); continue; } for (Tree<T> parent : nodes) { String id = parent.getId(); if (id != null && id.equals(pid)) { parent.getChildren().add(children); parent.setHasChildren(true); children.setHasParent(true); } } } Tree<T> root = new Tree<>(); root.setId("0"); root.setParentId(""); root.setHasParent(false); root.setHasChildren(true); root.setChecked(true); root.setChildren(topNodes); root.setText("根节点"); Map<String, Object> state = new HashMap<>(16); state.put("opened", true); root.setState(state); return root; } /** * 封装根节点或指定节点的子节点集合 * @param nodes * @param idParam * @param <T> * @return */ public static <T> List<Tree<T>> buildList(List<Tree<T>> nodes, String idParam) { if (nodes == null || nodes.size() < 1) { return null; } List<Tree<T>> topNodes = new ArrayList<>(); for (Tree<T> children : nodes) { String pid = children.getParentId(); if (pid == null || pid.equals(idParam)) { topNodes.add(children); continue; } for (Tree<T> parent : nodes) { String id = parent.getId(); if (id != null && id.equals(pid)) { parent.getChildren().add(children); children.setHasParent(true); parent.setHasChildren(true); } } } return topNodes; } }
- Service层接口:取得业务实体,调用树形数据封装类得到树形对象
@Resource private DepartmentMapper departmentMapper; @Override public Tree<Department> getDepartmentTree() { List<Tree<Department>> deptTreeList = new ArrayList<>(); List<Department> deptList = departmentMapper.selectAll(); for (Department department : deptList) { Tree<Department> deptTree = new Tree<>(); deptTree.setId(department.getDeptId().toString()); deptTree.setParentId(department.getParentId().toString()); deptTree.setText(department.getDeptName()); deptTreeList.add(deptTree); } return TreeUtils.build(deptTreeList); }
- Controller层:提供树形数据获取接口供HTML页面请求。
jsTree用法
最新推荐文章于 2024-08-15 14:23:35 发布