kendoui中的TreeView学习使用

最新推荐文章于 2025-06-24 09:11:45 发布

原创最新推荐文章于 2025-06-24 09:11:45 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#kendo-ui

kendo-ui 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用KendoUI前端组件框架中的TreeView组件显示数据库连接中的表和视图。具体步骤包括通过数据库连接配置获取元数据，利用Java后端逻辑处理数据库交互，并在前端通过AJAX调用展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，在使用kendoui前端组件框架时，查看官网的文档是必不可少的，所以首先要学会它的基本使用，例如在这个网址https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview
在数据库连接中，需要实现一个这样的 kendowindow 弹出界面，来展示数据库连接的数据库的内容，包括表，视图等等，如图所示。
在service中，通过数据库连接配置获取数据库中的表和视图
service中的方法：

    public List<HdipTable> getTable(HdipDatabaseConnection DBConnection) {
        Connection connection = this.getConn(DBConnection);
        try {
            /* 获取元数据 */
            DatabaseMetaData meta = connection.getMetaData();
            /* 获取数据表(更改第四个参数可以获取视图) */
            ResultSet rs = meta.getTables(null, null, null,
                    new String[]{ "TABLE", "VIEW" });
            HdipTable table;
            List<HdipTable> tableList = new ArrayList<>();
            while (rs.next()) {
                table = new HdipTable(rs.getString(1), rs.getString(2), rs.getString(3),
                        rs.getString("TABLE_TYPE"), rs.getString("REMARKS"));
                tableList.add(table);
            }
            return tableList;
        } catch (SQLException e) {
            e.printStackTrace();
            //throw new HapException(e.toString());
            List<HdipTable> tableList = new ArrayList<>();
            return tableList;
        } finally {
            try {
                if (!connection.isClosed()) {
                    connection.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
                //throw new HapException(e.toString());
            }

        }
    }

/**
     * 获取数据库连接
     *
     * @param DBConnection
     * @return
     */
    private Connection getConn(HdipDatabaseConnection DBConnection){
        this.repParams(DBConnection);
        Connection connection = null;
        try {
            Class.forName(DBConnection.getDriverClass());
            connection = DriverManager.getConnection(DBConnection.getUrl(), DBConnection.getUserName(), DBConnection.getPassword());
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }

前端页面创建TreeView：

    <div id="treeView"></div>
    <script>
    $("#treeView").kendoTreeView({
                    dataSource: [ //connectionName 数据库名字
                        { text: connectionName , items: [
                            {text: "模式"},{text:"表"},{text:"视"}
                        ] }  // 创建三个子节点
                    ],
                    select: function(e) {
                        //  当鼠标第一次点击每个节点的时候触发
                    }
                })
    </script>

前端页面ajax请求接收后台的表和视图数据，然后append到节点里去

    <script>
    var treeView = $("#treeView").data("kendoTreeView");
                $.ajax({
                    type:"POST",
                    url:"/v1/load/DBConn/getTable",
                    data:d ,  //d 数据库连接参数，从数据库连接页面得
                    contentType: 'application/json',
                    success:function(data){
                        //console.log(data);
                        schema=data[0].schema;
                        $.each( data, function( index, ele ) {
                            //console.log(ele.schema);
                            treeView.append([{text:ele.tableName,schema:ele.schema}],treeView.findByText("表"));
                        }) //循环遍历data，并把每一个对象的表名放入树
                    }
                });
    </script>