欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap的treeview组件

程序员文章站 2022-06-08 15:08:50
...
1.引入文件
<link href="bootstrap-treeview-1.2.0/css/bootstrap-treeview.min.css" title="" rel="stylesheet"/>
<script src="bootstrap-treeview-1.2.0/js/bootstrap-treeview.min.js" type="text/javascript"></script>

2.创建标签

<div id="tree"></div>

3.创建js

function getTree() {
        $.ajax({
            type: "post",
            url: "/common/getTreeNodes",
            dataType: "json",
            success: function (data) {
                var tree = [
                    {
                        text: "总行",
                        id: "00000000",
                        href: "#node-1",
                        selectable: true,
                        state: {
                            checked: true,
                            expanded: true,
                            selected: true
                        },
                        nodes: data
                    }
                ];

                $('#tree').treeview(
                    {
                        data: tree,
                        levels: 2,
                        backColor: '#FFF',
                        onNodeSelected: function (event, data) {
                            // Your logic goes here
                            console.log(data.id);
                        },
                    }
                );
            }
        });
    }

    getTree();
4.创建类

public class TreeNodesDTO implements Serializable {

    private String id;
    private String text;
    private String upper;
    private Integer grade;
    private List<TreeNodesDTO> nodes;

    public String getId() {
        return id;
    }

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

    public String getText() {
        return text;
    }

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

    public String getUpper() {
        return upper;
    }

    public void setUpper(String upper) {
        this.upper = upper;
    }

    public Integer getGrade() {
        return grade;
    }

    public void setGrade(Integer grade) {
        this.grade = grade;
    }

    public List<TreeNodesDTO> getNodes() {
        return nodes;
    }

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

}

5.创建获取json对象的方法

@Controller
@RequestMapping("/common")
public class TreeNodesController {

    @Autowired
    private TreeNodesMapper treeNodesMapper;

    @RequestMapping("/getTreeNodes")
    @ResponseBody
    private Object getTreeNodes() {
        List<TreeNodesDTO> treeNodesDTO2 = new ArrayList<TreeNodesDTO>();
        List<TreeNodesDTO> treeNodesDTO3 = new ArrayList<TreeNodesDTO>();
        List<TreeNodesDTO> treeNodesDTO4 = new ArrayList<TreeNodesDTO>();
        List<TreeNodesDTO> treeNodesDTO5 = new ArrayList<TreeNodesDTO>();

        List<TreeNodesDTO> treeNodesDTO = treeNodesMapper.selectAll();
        for (TreeNodesDTO nodesDTO : treeNodesDTO) {
            switch (nodesDTO.getGrade()) {
                case 2:
                    treeNodesDTO2.add(nodesDTO);
                    break;
                case 3:
                    treeNodesDTO3.add(nodesDTO);
                    break;
                case 4:
                    treeNodesDTO4.add(nodesDTO);
                    break;
                case 5:
                    treeNodesDTO5.add(nodesDTO);
                    break;
            }
        }

        for (TreeNodesDTO nodesDTO : treeNodesDTO4) {
            List<TreeNodesDTO> temp = new ArrayList<TreeNodesDTO>();
            for (TreeNodesDTO dto : treeNodesDTO5) {
                if (nodesDTO.getId().equals(dto.getUpper())) {
                    temp.add(dto);
                }
            }
            nodesDTO.setNodes(temp);
        }
        for (TreeNodesDTO nodesDTO : treeNodesDTO3) {
            List<TreeNodesDTO> temp = new ArrayList<TreeNodesDTO>();
            for (TreeNodesDTO dto : treeNodesDTO4) {
                if (nodesDTO.getId().equals(dto.getUpper())) {
                    temp.add(dto);
                }
            }
            nodesDTO.setNodes(temp);
        }
        for (TreeNodesDTO nodesDTO : treeNodesDTO2) {
            List<TreeNodesDTO> temp = new ArrayList<TreeNodesDTO>();
            for (TreeNodesDTO dto : treeNodesDTO3) {
                if (nodesDTO.getId().equals(dto.getUpper())) {
                    temp.add(dto);
                }
            }
            nodesDTO.setNodes(temp);
        }

        return JSON.toJSON(treeNodesDTO2);
    }
}



相关标签: treeview bootstrap