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