jsTree用法

最新推荐文章于 2021-07-02 06:59:42 发布

heyimrlin

最新推荐文章于 2021-07-02 06:59:42 发布

阅读量388

点赞数 1

分类专栏： Spring Boot框架文章标签： jsTree

本文链接：https://blog.csdn.net/sinat_23228689/article/details/100541487

版权

Spring Boot框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介
- 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页面请求。

heyimrlin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsTree用法

简介jsTree是一款基于jQuery的树形控件，具有可扩展性强、可编辑和可配置的特性。支持HTML、JSON和Ajax数据加载。jsTree的皮肤可自由定制。使用方法引入依赖  <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"&g...
复制链接

扫一扫