kendoui中的TreeView学习使用

来源：互联网发布：怎样避免淘宝找同款编辑：程序博客网时间：2024/06/07 23:13

首先，在使用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>

阅读全文

0 0