在echarts中以角度显示树结构中每个节点上的图像

时间:2019-04-23 07:40:00

标签: mysql angular spring spring-boot

我能够使用echart属性以树状结构显示数据库中的数据,但是现在我需要从数据库中动态显示树的每个节点上的图像。

表中有子级和父级关系,图像存储在数据库中。我正在尝试按父子数据查看数据,但未这样做。

Java Spring启动代码

@GetMapping("treeBuild2")

public List < UserParentId > tree() {

    List < UserParentId > tree = new ArrayList < > ();
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://192.168.1.30:3306/db_mlm", "root", "root");
        Statement stmt = con.createStatement();

        String call = ("{call gettree(1)}");
        CallableStatement stmt1 = con.prepareCall(call);
        stmt1.execute();
        ResultSet rs = stmt1.getResultSet();
        System.out.println("call->" + call);

        while (rs.next()) {

            UserParentId up = new UserParentId();
            up.setId(rs.getInt("id"));
            up.setParent_id(rs.getInt("parent_id1"));
            up.setName(rs.getString("FirstName"));
            up.setLvl(rs.getInt("lvl"));

            tree.add(up);
        }

        //  gettree method

        @GetMapping("tree")
        public List < client > getTree() {

            List < client > myList = new ArrayList < > ();
            try {
                Class.forName("com.mysql.cj.jdbc.Driver");
                Connection con = DriverManager.getConnection("jdbc:mysql://192.168.2.15:3306/sonoo", "root", "root");
                Statement stmt = con.createStatement();
                ResultSet rs = stmt.executeQuery("select * from Category");
                while (rs.next()) {

                    client c = new client();
                    c.setTreeId(rs.getInt(1));
                    c.setTreeName(rs.getString(2));
                    c.setPerentId(rs.getInt(3));
                    myList.add(c);

                    System.out.println(rs.getInt(1));
                    System.out.println(rs.getString(2));
                }
                con.close();
            } catch (Exception e) {
                System.out.println(e);
            }
            System.out.println(myList);

            for (int i = 1; i <= myList.size(); i++) {
                System.out.println();
            }

            return myList;
        }

        con.close();
    } catch (Exception e) {
        System.out.println(e);
    }

    System.out.println(tree.toString());
    return tree;
}

我尝试在与MYSQL数据库连接的后端中使用Spring Boot。

前端角度代码。

 this._httpClient.get(this.baseurl+"treeBuild2").subscribe(
            (res:any) => {  
            if(res){   

                this.list = res;
                console.log(res);

                this.r = this.convert(this.list);
                this.jsonArray = JSON.parse(JSON.stringify(this.r));
                this.str = JSON.stringify(this.r);
                console.log(this.jsonArray);
                })

//called convert function on data
convert(array):any{
    var map = {};
    for(var i = 0; i < array.length; i++){

        var obj = array[i];
        obj.children= [];

        map[obj.id] = obj;

        var parent = obj.parent_id || '-';
        if(!map[parent]){

            map[parent] = {
                children: []
            };
        }
        map[parent].children.push(obj);
    }
    return map['-'].children;

}

0 个答案:

没有答案