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);