aceAdmin fuelux tree 从后台获取数据，并设置节点ID等属性

Posted 2020-06-09

如题，从后台封装数据，有两种方式渲染节点的数据：

　　1.全部节点加载

　　2.根据父节点加载子节点

首先，先介绍下第一种渲染方式：

　　后台返回数据格式(所有的附加属性，都可放在additionalParameters下):

前端页面html：

<div class="widget-body">
　　<div class="widget-main padding-8">
　　　　<div id="treeview" class="tree"></div>
　　　　<div class="hr"></div>
　　　</div>
</div>

前端js渲染：

var remoteUrl = ‘/business/function/getFuncsTreeAll‘;

var remoteDateSource = function(options, callback) {
　　var self = this;
　　var $data = null;

　　if(!("name" in options) && !("type" in options)){
　　　　$.ajax({
　　　　　　url: remoteUrl,
　　　　　　data: ‘parent_id=0000‘,
　　　　　　type: ‘POST‘,
　　　　　　dataType: ‘json‘,
　　　　　　success : function(response) {
　　　　　　　　　　if(response.status == "OK")
　　　　　　　　　　　　callback({ data: response.data })
　　　　　　　　　　},
　　　　　　error: function(response) {
　　　　　　//console.log(response);
　　　　　　}
　　　　});
　　　　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 });} , parseInt(Math.random() * 500) + 200);

};

$(‘#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‘
});

//show selected items inside a modal
$(‘#submit-button‘).on(‘click‘, function() {
　　var output = ‘‘;
　　var items = $(‘#treeview‘).tree(‘selectedItemsAndParents‘);//这个是我自己扩展的方法，框架应是selectedItems
　　for(var i in items) if (items.hasOwnProperty(i)) {
　　　　var item = items[i];
　　　　output += item.additionalParameters[‘id‘] + ":"+ item.name+"\n";//获取附加属性
　　}

　　$(‘#modal-tree-items‘).modal(‘show‘);
　　$(‘#tree-value‘).css({‘width‘:‘98%‘, ‘height‘:‘200px‘}).val(output);
});

 

第二种方式渲染（根据父节点加载子节点数据），主要是remoteDateSource 的实现不一样：

var remoteDateSource = function(options, callback) {
　　var parent_id = null
　　if( !(‘text‘ in options || ‘type‘ in options) ){
　　　　parent_id = "0000";//load first level data
　　}
　　else if(‘type‘ in options && options[‘type‘] == ‘folder‘) {//it has children
　　　　if(‘additionalParameters‘ in options && ‘children‘ in options.additionalParameters)
　　　　　　parent_id = options.additionalParameters[‘id‘]
　　　　}

　　　　if(parent_id !== null) {//根据父节点id，请求子节点
　　　　　　$.ajax({
　　　　　　　　url: remoteUrl,
　　　　　　　　data: ‘parent_id=‘+parent_id,
　　　　　　　　type: ‘POST‘,
　　　　　　　　dataType: ‘json‘,
　　　　　　　　success : function(response) {
　　　　　　　　　　if(response.status == "OK")
　　　　　　　　　　　　callback({ data: response.data })
　　　　　　　　},
　　　　　　　　error: function(response) {
　　　　　　　　　　//console.log(response);
　　　　　　　　}
　　　　　　})
　　　　}
　　}

 

附录----

selectedItemsAndParents（返回选中的叶子节点以及父类节点）实现：

selectedItemsAndParents: function() {
　　var $sel = this.$element.find(".tree-selected");
　　var data = [];
　　$.each($sel,
　　　　　function(index, value) {
　　　　　　data.push($(value).data());
　　　　　　var $parent = $(value).parents("li");
　　　　　　$.each($parent,function(index_parent,p){
　　　　　　　　if(typeof($(p).attr("role"))!="undefined") {
　　　　　　　　　　var result = $.inArray($(p).data(), data);
　　　　　　　　　　if(result==-1){
　　　　　　　　　　　　data.push($(p).data());
　　　　　　　　　　}
　　　　　　　　}
　　　　　　});
　　});
　　return data
}