bootStrap ace tree例子 JAVA版本

最新推荐文章于 2020-08-06 17:13:15 发布

Elvis陈

最新推荐文章于 2020-08-06 17:13:15 发布

阅读量4.9w

点赞数 1

分类专栏：前台文章标签： bootstrap treeview

本文链接：https://blog.csdn.net/a786132874/article/details/43019287

版权

前台专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

html文件

<! 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:

/**
 * 功能: 节点的信息
 */
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:

/**
 * 功能: 子节点的信息
 */
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：

/**
 * 功能: 数据返回对象
 */
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;
    }
    
    
}

业务实现部分代码：

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无法识别。代码只有基本的展示功能，增删改还需后续完善。学习使用中，如有错误，欢迎指正。

Elvis陈

关注

1
点赞
踩
11

收藏

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

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

扫一扫