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

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

  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+" ";//获取附加属性
  }

  $('#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
}

原文地址:https://www.cnblogs.com/zgz21/p/5166871.html