| Server IP : 162.214.74.102 / Your IP : 216.73.217.114 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/team/assets/js/aci-tree/sample/ |
Upload File : |
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="index, follow">
<title>aciTree extended selected event demo - A treeview control with jQuery</title>
<meta name="description" content="A demo to show you how aciTree can be used with the selected event">
<meta name="keywords" content="aciTree, treeview, control, tree view, javascript, jQuery">
<link rel="stylesheet" type="text/css" href="../css/aciTree.css" media="all">
<link rel="stylesheet" type="text/css" href="../css/demo.css" media="all">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.aciPlugin.min.js"></script>
<script type="text/javascript" src="../js/jquery.aciTree.min.js"></script>
</head>
<body>
<div>
<p>A demo to show how you can listen for the selected event and do something with the selected item (open the item if it's a inode).</p>
<p>Note: a custom property named 'my-url' is used here to hold an extra value for each item (see the JSON).</p>
<p><a href="index.html" title="aciTree usage demo">back to index</a></p>
<div id="tree" class="aciTree"><div>
<a style="font-size:10px" href="/source/php/niceJson.php?file=source/aciTree/json/sample.json" title="See the JSON data" target="_blank">see the JSON behind this tree</a>
<br>Sample tree</div></div>
<div class="log">Tree Log... <a class="clear_log" style="font-size:10px" href="#" title="Clear the LOG" target="_blank">clear log</a>
<div></div></div>
<script class="code" type="text/javascript">
$(function() {
// listen for the events
$('#tree').on('acitree', function(event, api, item, eventName, options) {
if (eventName == 'selected') {
// do something when a item is selected
var itemData = api.itemData(item);
if (api.isInode(item)) {
alert('You just selected a inode item with the ID: ' + api.getId(item) + '\n' +
'also the custom property [my-url] equals: ' + itemData['my-url']);
if (api.isOpen(item)) {
// the inode is already open
alert('The tree inode was already open');
} else {
// open the inode
api.open(item, {
success: function() {
alert('The tree inner node was just opened');
},
fail: function() {
alert('Failed to open the tree inode');
}
});
}
} else {
alert('You just selected a tree leaf node with the ID: ' + api.getId(item) + '\n' +
'also the custom property [my-url] equals: ' + itemData['my-url']);
}
}
});
// init the tree
$('#tree').aciTree({
ajax: {
url: '../json/sample.json'
},
selectable: true
});
});
</script>
<script type="text/javascript">
$(function() {
var log = $('.log div');
// write to log
$('#tree').on('acitree', function(event, api, item, eventName, options) {
if (api.isItem(item)) {
log.prepend('<p>' + eventName + ' [' + api.getId(item) + ']</p>');
} else {
log.prepend('<p>' + eventName + ' [tree]</p>');
}
});
$('.clear_log').click(function() {
$('.log div').html('');
return false;
});
});
</script>
</div>
<script type="text/javascript">
$(function() {
$('script.code').each(function() {
$(this).before('<div style="clear:both;margin:10px 0 10px 0"><pre style="padding:20px;border:1px dashed #000;background:#f6f6f6;display:inline-block;"></pre></div>');
$(this).prev('div').find('pre').text($(this).html());
});
});
</script>
</body>
</html>