Aceadmin Fuelux Tree Retrieve data from the background and set properties such as Node ID

Title, encapsulating data from the background, there are two ways to render the data for the node:

1. Full node loading

2. Load child nodes based on parent node

First , let's introduce the first rendering method :

Return data format ( all attached properties can be placed under AdditionalParameters) in the background:

Front-end page HTML:

<div class= "Widget-body" >
<div class= "Widget-main padding-8" >
<div id= "treeview" class= "Tree"></div>
<div class= "HR" ></div>
</div>
</div>

Front-end JS rendering:

var remoteurl = '/business/function/getfuncstreeall ';

var remotedatesource = function (options, callback) {
var = 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; //Click parent node to load child nodes
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‘);//This is my own extension of the method, the framework should be SelectedItems
for (var i in items) if (Items.hasownproperty (i)) {
var item = Items[i];
Output + = Item.additionalparameters[' id ']+ ":" + item.name+ "\ n";//Get additional properties
}

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

The second way to render (load child node data based on parent node), mainly Remotedatesource implementations are different:

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) {//per parent Node ID, request child node
$.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);
}
})
}
}

Appendix----

Selecteditemsandparents (returns the selected leaf node and parent class node) implementation:

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
}

Aceadmin Fuelux Tree Retrieve data from the background and set properties such as Node ID