kendoui中的TreeView学习使用

你的名字 2020-11-29 12:01 790阅读 0赞

1.  首先，在使用kendoui前端组件框架时，查看官网的文档是必不可少的，所以首先要学会它的基本使用，例如在这个网址[https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview][https_docs.telerik.com_kendo-ui_api_javascript_ui_treeview]  
    在数据库连接中，需要实现一个这样的 kendowindow 弹出界面，来展示数据库连接的数据库的内容，包括表，视图等等，如图所示。
    ![这里写图片描述][SouthEast]
2.  在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;
        }
````
1.  前端页面创建TreeView：
````
    <div id="treeView"></div>
        <script> $("#treeView").kendoTreeView({ dataSource: [ //connectionName 数据库名字 { text: connectionName , items: [ {text: "模式"},{text:"表"},{text:"视"} ] } // 创建三个子节点 ], select: function(e) { // 当鼠标第一次点击每个节点的时候触发 } }) </script>
````
1.  前端页面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>
````

[https_docs.telerik.com_kendo-ui_api_javascript_ui_treeview]: https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview
[SouthEast]: /images/1606651188298.png