bootStrap ace tree例子 JAVA版本

最新推荐文章于 2021-03-10 01:44:02 发布

frankaqi

最新推荐文章于 2021-03-10 01:44:02 发布

阅读量1.8k

点赞数 1

分类专栏： bootstrap

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap是Twitter开发的开源前端框架，有着丰富的组件。通过使用这些组件，程序员可以更容易的编写好看的web网站。Ace是一个轻量，功能丰富，HTML5、响应式、支持手机及平板电脑上浏览的管理后台模板。

关于tree的使用,html文件夹下treeview.html给了静态数据的例子，examples下treeview.html给了动态PHP语言的例子。这里给的是java版本的。

html文件

[html]view plaincopyprint? 
     
 <! DOCTYPE html>  
 < html lang ="en" >  
      <head >  
           < meta charset ="utf-8" />  
           < title> Treeview Example </ title>  
   
           < link rel ="stylesheet" href ="../assets/css/bootstrap.css" />  
           < link rel ="stylesheet" href ="../assets/css/font-awesome.css" />  
            
           <!-- fonts -->  
           < link rel ="stylesheet" href ="../assets/css/ace-fonts.css" />  
            
            
           < link rel ="stylesheet" href ="../assets/css/ace.css" />  
           <!--[if lte IE 9]>  
            <link rel="stylesheet " href="../assets/ css/ace-ie.css" />  
          <![ endif]-->  
      </head >  
   
      <body >  
      <div class= "main-container">  
       <div class= "page-content">  
       <div class= "row">  
   
           < div class ="center" style=" width :400px ; margin :12px ;" >  
               < div class ="widget-box align-left transparent">  
                   < div class ="widget-header" >  
                        < h4 class ="lighter smaller"> Tree element loading data from server <br /> pre-selecting some items randomly </ h4>  
                   </ div>  
   
                   < div class ="widget-body" >  
                   < div class ="widget-main padding-8">  
                        < div id= "treeview" class ="tree" ></ div>  
                        < div class ="hr" ></ div>  
                        < button id= "submit-button" type ="button" class= "btn btn-sm btn-primary pull-right">  
                            < i class ="ace-icon fa fa-check"></ i >  
                           Submit  
                        </ button>  
                   </ div>  
                   </ div>  
               </ div>  
           </ div>  
   
           </ div>  
            
            
            
           < div id= "modal-tree-items" class = "modal" tabindex ="-1" >  
           < div class ="modal-dialog" >  
            < div class ="modal-content" >  
   
               < div class ="modal-header" >  
                   < button type ="button" class ="close" data-dismiss= "modal" >× </ button>  
                   < h4 class ="blue bigger" > Treeview selection</ h4>  
               </ div>  
                
               < div class ="modal-body" >  
                   < div class ="row-fluid" >  
                        Content can be put inside a hidden input and sent to server  
                   </ div>  
                    
                   < div class ="space-6" ></ div>  
                    
                   < div class ="row-fluid" >  
                        < textarea spellcheck ="false" id ="tree-value" ></ textarea>  
                   </ div>  
               </ div>  
                
               < div class ="modal-footer" >  
                   < button class ="btn btn-sm" data-dismiss ="modal" >< i class ="ace-icon fa fa-times"></ i > Cancel </ button>  
                   < button class ="btn btn-sm btn-primary">< i class = "ace-icon fa fa-check"></ i > OK</ button>  
               </ div>  
   
            </ div>  
           </ div>  
           </ div>  
            
       </div >  
      </div >  
   
   
           <!-- basic scripts -->  
           <!--[if !IE]> -->  
           < script type ="text/javascript" >  
           window.jQuery || document.write( "<script src='../assets/js/jquery.js'>"+ "<" +"/script>" );  
           </ script>  
           <!-- <![ endif]-->  
           <!--[if IE]>  
          <script type="text/ javascript">  
           window.jQuery || document.write("<script src='../assets/ js/jquery-1.10.2. js'>"+"<"+"/script>");  
          </script>  
          <![ endif]-->  
            
           < script src ="../assets/js/bootstrap.js" ></ script>  
            
           < script src ="../assets/js/fuelux/fuelux.tree.js" ></ script>  
            
           <!-- ace scripts -->  
           < script src ="../assets/js/ace-elements.js" ></ script>  
           < script src ="../assets/js/ace.js" ></ script>  
            
           < script type ="text/javascript" >  
              $( function () {  
                   //construct the data source object to be used by tree  
                   var remoteUrl = '' ;//动态树数据请求接口  
                    
                   var remoteDateSource = function (options, callback) {  
                        var parent_id = null  
                        if ( !('text' in options || 'type' in options) ){  
                           parent_id = 0; //load first level data  
                       }  
                        else if ('type' in options && options['type' ] == 'folder' ) { //it has children  
                            if ('additionalParameters' in options && 'children' inoptions.additionalParameters)  
                                parent_id = options.additionalParameters['id' ]  
                       }  
                         
                        if (parent_id !== null) {  
                           $.ajax({  
                                url: remoteUrl,  
                                data: 'id=' +parent_id,  
                                type: 'POST' ,  
                                dataType: 'json' ,  
                                success : function (response) {  
                                     if (response.status == "OK" )  
                                        callback({ data: response.data })  
                                },  
                                error: function (response) {  
                                     //console.log(response);  
                                }  
                           })  
                       }  
                  }  
   
                  $( '#treeview' ).ace_tree({  
                       dataSource: remoteDateSource ,  
                       multiSelect: true ,  
                       loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',  
                        'open-icon' : 'ace-icon tree-minus',  
                        'close-icon' : 'ace-icon tree-plus',  
                        'selectable' : true ,  
                        'selected-icon' : 'ace-icon fa fa-check',  
                        'unselected-icon' : 'ace-icon fa fa-times',  
                       cacheItems: true ,  
                       folderSelect: false  
                  });  
                    
                    
                   //show selected items inside a modal  
                  $( '#submit-button' ).on('click' , function () {  
                        var output = '' ;  
                        var items = $('#treeview' ).tree('selectedItems' );  
                        for (var i in items) if (items.hasOwnProperty(i)) {  
                            var item = items[i];  
                           output += item.additionalParameters['id' ] + ":"+ item.text+"\n" ;  
                       }  
                         
                      $( '#modal-tree-items' ).modal('show' );  
                      $( '#tree-value' ).css({'width' :'98%' , 'height' :'200px' }).val(output);  
                    
                  });  
                    
                   if (location.protocol == 'file:' ) alert("For retrieving data from server, you should                                          access this page using a webserver.");  
              });  
           </ script>  
   
      </body >  
 </ html>  

数据库设计

CREATE TABLE city (

id INTEGER PRIMARY KEY ,

parent INTEGER ,

text TEXT

);

//这三个是最基本必须的字段，可以根据自己需要添加。

JAVA代码：

使用到的bean

Item:

[java]view plaincopyprint? 
       
 /** 
  * 功能: 节点的信息 
  */  
 public class Item  
 {  
      /** 
      * 节点的名字 
      */  
      private String text ;  
       
      /** 
      * 节点的类型："item":文件  "folder":目录 
      */  
      private String type ;  
       
      /** 
      * 子节点的信息 
      */  
      private AdditionalParameters additionalParameters ;  
   
      public String getText()  
     {  
           return text ;  
     }  
   
      public void setText(String text )  
     {  
           this .text = text;  
     }  
   
      public String getType()  
     {  
           return type ;  
     }  
   
      public void setType(String type )  
     {  
           this .type = type;  
     }  
   
      public AdditionalParameters getAdditionalParameters()  
     {  
           return additionalParameters ;  
     }  
   
      public void setAdditionalParameters(AdditionalParameters additionalParameters )  
     {  
           this .additionalParameters = additionalParameters ;  
     }  
 }  

AdditionalParameters:

[java]view plaincopyprint? 
        
 /** 
  * 功能: 子节点的信息 
  */  
 public class AdditionalParameters  
 {  
      /** 
      * 子节点列表 
      */  
      private List<Item> children = new ArrayList<Item>();  
       
      /** 
      * 节点的Id 
      */  
      private String id;  
       
      /** 
      * 是否有选中属性 
      */  
      @JsonProperty( "item-selected" )  
      private boolean itemSelected ;  
   
      public boolean isItemSelected()  
     {  
           return itemSelected ;  
     }  
   
      public void setItemSelected( boolean itemSelected )  
     {  
           this .itemSelected = itemSelected;  
     }  
   
      public List<Item> getChildren()  
     {  
           return children ;  
     }  
   
      public void setChildren(List<Item> children )  
     {  
           this .children = children;  
     }  
   
      public String getId()  
     {  
           return id ;  
     }  
   
      public void setId(String id )  
     {  
           this .id = id;  
     }  
       
       
 }  

TreeRespVO：

[java]view plaincopyprint? 
         
 /** 
  * 功能: 数据返回对象 
  */  
 public class TreeRespVO  
 {  
      private List<Item>  data = new ArrayList<Item>();  
   
      public List<Item> getData()  
     {  
           return data ;  
     }  
   
      public void setData(List<Item> data )  
     {  
           this .data = data;  
     }  
       
       
 }  

业务实现部分代码：

[java]view plaincopyprint? 
      
 List<TreeRespVO> list = //后台根据父节点查询出的数据列表  
         TreeRespVOvo = newTreeRespVO();  
           List<Item> voItemList = new ArrayList<Item>();  
           if (null != list && list .size() !=0)  
          {  
              //Tree和数据库对应的实体bean对象  
               for (Tree tree : list )  
              {  
                   
                  Item item = new Item();  
                   int child_count = //根据遍历的节点，查询该节点子节点的个数。  
                   item .setText(tree .getNodeName());  
                   if (child_count > 0)  
                  {  
                        item .setType("folder" );//有子节点  
                       AdditionalParameters adp = new AdditionalParameters();  
                       adp .setId(knowledgeTree .getId());  
                       item .setAdditionalParameters(adp );  
                  }  
                   else  
                  {  
                       AdditionalParameters adp = new AdditionalParameters();  
                       adp .setId(knowledgeTree .getId());  
                        adp .setItemSelected( true);  
                       item .setAdditionalParameters(adp );  
                        item .setType("item" );//无子节点  
                  }  
                   voItemList .add(item );  
              }  
          }  
           vo.setData( voItemList );  

返回的数据格式必须是json类型的，否则js无法识别。代码只有基本的展示功能，增删改还需后续完善。学习使用中，如有错误，欢迎指正。

frankaqi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootStrap ace tree例子 JAVA版本

bootstrap是Twitter开发的开源前端框架，有着丰富的组件。通过使用这些组件，程序员可以更容易的编写好看的web网站。Ace是一个轻量，功能丰富，HTML5、响应式、支持手机及平板电脑上浏览的管理后台模板。关于tree的使用,html文件夹下treeview.html给了静态数据的例子，examples下treeview.html给了动态PHP语言的例子。这里给的是java版本的
复制链接

扫一扫