bootstrap中fuelux.tree的简单使用

js代码：通过ajax的方式获取tree的数据

$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
jQuery(function($) {

var sampleData = initiateDemoData();

$("#tree1").ace_tree({
dataSource : sampleData['dataSource1'],
multiSelect : false,
folderSelect : false,
cacheItems : true,
'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',
loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
}).on('selected.fu.tree', function(e) {
 
}).on('loaded.fu.tree', function(e) {

}).on('deselected.fu.tree', function(e) {

});

function initiateDemoData() {
var tree_data ;
$.ajax({
url : "",/////////ajax获取数据的url地址
type : "get",
async: false,
success : function(data) {
tree_data = eval("("+data+")");
},
error:function(data){
}
});

var dataSource1 = function(options, callback) {
var $data = null
if (!("text" in options)
&& !("type" in options)) {
$data = tree_data;//the root tree
callback({
data : $data
});
return;
} else if ("type" in options
&& options.type == "folder") {
if ("additionalParameters" in options
&& "children" in options.additionalParameters)
$data = options.additionalParameters.children
|| {};
else
$data = {}//no data
}
if ($data != null)//this setTimeout is only for mimicking some random delay
setTimeout(function() {
callback({
data : $data
});
}, 200);
}

return {'dataSource1':dataSource1};

}

})
});

////////获取tree中选中的数据的id和name

function getDatas(){
var output ="";
var ids = "";
    var items = $('#tree1' ).tree('selectedItems' );  
    for (var i in items) if (items.hasOwnProperty(i)) {  
        var item = items[i];  
       ids += item.additionalParameters['id' ] + ",";
       output += item.text + ",";
    }
    
    ids = ids.substring(0, ids.lastIndexOf(","));
    output = output.substring(0, output.lastIndexOf(","));
alert(ids+"___"+output);
}

//////////////////////在后台获取的数据的格式：

///////////////////tree的数据中，基本上就只有text和type两个属性，其他需要的属性需要添加到additionalParameters中，比如：id，children，item-selected
//////////////////text：进行显示树形的内容，type：folder和item这两个。folder表示是可折叠的，具有子节点。item表示是没有子节点的节点。
///////////////////additionalParameters这个属性是用来对tree的其他属性进行补充
///////////////////children：folder节点中需要添加的属性，它所有的子节点都需要放在children里面
////////////////////item-selected:这个属性在页面中，会自动选中
///////////////////这也是最笨的方法，将这个数据进行拼凑起来，最好就可以用面向对象的思想，将这些都定义成对象的方式来做。


{'刑侦':{text:'刑侦',type:'folder','additionalParameters':{id:'1','children':{'痕迹检验':{text:'痕迹检验',type:'item','additionalParameters':{id:'10'}},'刑侦光源':{text:'刑侦光源',type:'item','additionalParameters':{id:'11'}},'现场勘察':{text:'现场勘察',type:'item','additionalParameters':{id:'12'}},'反恐处突':{text:'反恐处突',type:'item','additionalParameters':{id:'13'}},'声像技术':{text:'声像技术',type:'item','additionalParameters':{id:'9','item-selected':true}}}}},




'技侦':{text:'技侦',type:'folder','additionalParameters':{id:'19','children':{'监听':{text:'监听',type:'item','additionalParameters':{id:'20'}},'定位':{text:'定位',type:'item','additionalParameters':{id:'21'}}}}},


'网监':{text:'网监',type:'folder','additionalParameters':{id:'25','children':{'互联网舆情':{text:'互联网舆情',type:'item','additionalParameters':{id:'26'}},'公共信息网络监控':{text:'公共信息网络监控',type:'item','additionalParameters':{id:'27'}}}}},


'交警':{text:'交警',type:'folder','additionalParameters':{id:'32','children':{'交通事故':{text:'交通事故',type:'item','additionalParameters':{id:'33'}},'交通道理管理':{text:'交通道理管理',type:'item','additionalParameters':{id:'34'}}}}}}

///////后台代码

Map<String, String> param = new HashMap<String, String>();
String isSelected = request.getParameter("selectedIds");


StringBuffer sbf = new StringBuffer(); /////组装数据
sbf.append("{");

if(isSelected != null && !isSelected.equals("")){ /////这说明是有选中项
String[] selectedId = isSelected.split(";");

int selectedCounts = 0;

List typeList = ptypeService.getList();
for(int i = 0; i < typeList.size(); i ++){
Ptype p = (Ptype) typeList.get(i);
sbf.append("'"+p.getName()+"':{text:'"+p.getName()+"',type:'folder','additionalParameters':{id:'"+p.getId()+"',");
param.put("pid", p.getId());
List<Ptype> childList = ptypeService.getChildren(param);
if(childList.size()>0){
sbf.append("'children':{");
for(int j= 0; j < childList.size(); j++){
Ptype tp = childList.get(j);
sbf.append("'"+tp.getName()+"'").append(":{text:'"+tp.getName()+"',type:'item','additionalParameters':{id:'"+tp.getId()+"'");
if(selectedCounts < selectedId.length){
for(int k = 0; k < selectedId.length; k++){
if(tp.getId().equals(selectedId[k])){
sbf.append(",'item-selected':true");
selectedCounts ++;
break;
}
}
}
sbf.append("}},");
}
String st = sbf.toString();
st = st.substring(0, st.length()-1);
sbf = new StringBuffer();
sbf.append(st);
sbf.append("}");
}
sbf.append("}");
sbf.append("},");
}
}else{
List typeList = ptypeService.getList(); 
for(int i = 0; i < typeList.size(); i ++){
Ptype p = (Ptype) typeList.get(i);
sbf.append("'"+p.getName()+"':{text:'"+p.getName()+"',type:'folder','additionalParameters':{id:'"+p.getId()+"',");
param.put("pid", p.getId());
List<Ptype> childList = ptypeService.getChildren(param);
if(childList.size()>0){
sbf.append("'children':{");
for(int j= 0; j < childList.size(); j++){
Ptype tp = childList.get(j);
sbf.append("'"+tp.getName()+"'").append(":{text:'"+tp.getName()+"',type:'item','additionalParameters':{id:'"+tp.getId()+"'}},");
}
String st = sbf.toString();
st = st.substring(0, st.length()-1);
sbf = new StringBuffer();
sbf.append(st);
sbf.append("}");
}
sbf.append("}");
sbf.append("},");
}

}



String str = sbf.toString();
str = str.substring(0,str.length()-1);
str +="}";
Writer out = response.getWriter();
out.write(str);