Bootstrap-treeview 常用方法

Bootstrap-treeview 树形工具
GitHub https://github.com/oldguys/Bootstrap3Demo

默认Json数据格式

[{
    "id": 0,
    "text": "名称-0",
    "sequence": "sequence-0",
    "state": null,
    "icon": "glyphicon glyphicon-leaf",
    "nodes": [{
        "id": 1,
        "text": "名称-0-1",
        "sequence": "sequence-0-1",
        "state": null,
        "icon": "glyphicon glyphicon-leaf"
    }, {
        "id": 2,
        "text": "名称-0-2",
        "sequence": "sequence-0-2",
        "state": null,
        "icon": "glyphicon glyphicon-leaf",
        "nodes": [{
            "id": 1,
            "text": "名称-0-2-1",
            "sequence": "sequence-0-2-1",
            "state": null,
            "icon": "glyphicon glyphicon-leaf"
        }]
    }]
}]

java类

package com.oldguy.example.common.dto;

import com.fasterxml.jackson.annotation.JsonInclude;

import java.util.Collections;
import java.util.List;

/**
 * @Description: 树节点
 * @Author: ren
 * @CreateTime: 2018-10-2018/10/26 0026 14:44
 */
public class BootstrapTreeNode {

    private Long id;

    private String text;

    private String sequence;

    private State state;

    @JsonInclude(JsonInclude.Include.NON_NULL)
    private String icon;

    @JsonInclude(JsonInclude.Include.NON_EMPTY)
    private List nodes = Collections.emptyList();

    public BootstrapTreeNode() {
    }

    public BootstrapTreeNode(Long id, String text, String sequence, String icon) {
        this.id = id;
        this.text = text;
        this.sequence = sequence;
        this.icon = icon;
    }

    public String getIcon() {
        return icon;
    }

    public void setIcon(String icon) {
        this.icon = icon;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public State getState() {
        return state;
    }

    public void setState(State state) {
        this.state = state;
    }

    public List getNodes() {
        return nodes;
    }

    public void setNodes(List nodes) {
        this.nodes = nodes;
    }

    public String getSequence() {
        return sequence;
    }

    public void setSequence(String sequence) {
        this.sequence = sequence;
    }

    public static class State {

        private Boolean checked = false;

        public State(Boolean checked) {
            this.checked = checked;
        }

        public Boolean getChecked() {
            return checked;
        }

        public void setChecked(Boolean checked) {
            this.checked = checked;
        }

    }
}

1. 基本模板

https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/tree/SimpleTree.html
部署URL: http://localhost:8081/view/tree/simple

基本模板.png

2. checkbox 模板

https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/tree/CheckTree.html
部署URL: http://localhost:8081/view/tree/check

check box.png

3. 搜索

https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/tree/SearchTree.html
部署URL: http://localhost:8081/view/tree/search

搜索.png