cms_tree_table
- Click right mouse button on tree node to open context menu, try menu i tems (demo only, no real data updates in this sample).
- Drag and drop nodes in tree to reorder (demo only, no real data updates in this sample).
- Drag and drop nodes in table to reorder (demo only, no real data updates in this sample).
jQuery code snippet:
var sample_tree_table = $("#sample-tree-table").cms_tree_table({ // create sample cms_tree_table() object
itemIDPrefix: "", // no prefix for item key
reordering: true, // allow reorder current folder dataTable object
api: { // api list
"tree" : '/cms/files/guide/jquery/api/tree/all', // get data for fancytree() object
"table" : '/cms/files/guide/jquery/api/tree/lst', // dataTable() object server side backend function
"paste" : '/cms/files/guide/jquery/api/tree/pst', // paste data into tree folder node
"newFolder" : '/cms/files/guide/jquery/api/tree/new', // create folder node
"updateFolder" : '/cms/files/guide/jquery/api/tree/dir/upd', // update folder node title
"updateItem" : '/cms/files/guide/jquery/api/tree/doc/upd', // update item node title
"drop" : '/cms/files/guide/jquery/api/tree/drp', // drop node into folder node
"reorder" : '/cms/files/guide/jquery/api/tree/reo' // dataTable() object reordering with drag-n-drom support
},
table: { // dataTable() object options (details see in http://datatables.net)
columnDefs:
[
{ "width": "1%", "targets": [ 0 ]}, // to be small width row sequence column
{ "orderable": false, "targets": [0,1,2,3,4,5] }, // no sort columns when using reordering
{ "visible": false, "targets": [2] } // hide table id column
],
order: [], // no default sorting
},
callback: {
treePostInit: function(tree, isReloading, isError){ // fancytree() object onPostInit callback function
var sel = tree.getSelectedNodes(true); // get all selected fancytree nodes
if (sel.length>0) sel[0].setActive();; // if there are some selected activate first selected node
var active = tree.getActiveNode(); // get fancytree active node
if (active == null){ // if there is no active node - it may happen if there is no stored fancytree object cookie
var root = tree.getNodeByKey("0"); // get tree root node
}
},
treeOnRender: function(node, span) { // fancytree() object onRender callback function
$('a[title]',span).qtip('destroy'); // destroy qtip of old gtree
$('a[title]',span).qtip(); // set qtip on rendered tree
},
treeOnActivate: function(node) { // fancytree() object onActivate callback function
if (node.key=="0") node.setSelected(false); // root node never be checked
},
treeOnActivateKey: function(node) { // this callback helps to set folder key for rendering dataTable() object; this function is within treeOnActivate callback function
// todo something
return node.key; // or something else
},
treeOnDrop: function(node, sourceNode, hitMode, ui, draggable){ // fancytree() object dnd.onDrop callback function
var clipboard = []; // clipboard to be saved nodes for drop
if (!(sourceNode.data.type=="0" || sourceNode.data.type=="1" && node.data.type=="2")) {// if source node is not root or not (source node is folder and target node is item)
clipboard.push([sourceNode.key, sourceNode.data.type]); // push node data to clipboard
}
return { "key": node.key, "type": node.data.type, "data": clipboard }; // return target node data & clipboard data
},
treeOnDragEnter: function(node, sourceNode){ // fancytree() object dnd.onDragEnter callback function
var q=false;
if (sourceNode.data.type=="2" && (node.data.type=="1" || node.data.type=="2")) q = true;
if (sourceNode.data.type=="1" && node.data.type=="0") q = true;
return q;
},
tableOnDblClick: function(element){ // fancytree() object onDblClick callback function
var els = $(sample_table.table().body()).find(':checked'); // all checkbox inputs
for (var i=1; i<=els.length; i++) els[i-1].checked=false; // set all checked=false
$(element).find("td:eq(0) > input").prop('checked', true); // set double clicked to checked=true
},
contextCopy: function(){ // callback function to support fancytree() object nodes copy into clipboard (right click contextMenu)
var clipboard = []; // clipboard to be saved nodes for copy/paste
var sel = sample_tree.fancytree("getTree").getSelectedNodes(true); // get selected dyntaree nodes from fancytreeobject
for (var i=1; i<=sel.length; i++) { // iterate nodes
var node = sel[i-1]; // get node
clipboard.push([node.data.key, node.data.type]); // add node data into clipboard
}
return clipboard;
},
contextPaste: function(node, clipboard){ // callback function to support fancytree() object nodes paste from clipboard (right click contextMenu)
// insert code there, normaly it is not needed
return { "key": node.data.key, "type":node.data.type, "data": clipboard };
},
contextNewItem: function(node){ // callback function to support fancytree() object new item (right click contextMenu)
// todo code start
showSampleContextMenuMessage(node);
// todo code stop
},
contextDelete: function(node){ // callback function to support fancytree() object delete folder/item (right click contextMenu)
// todo code start
showSampleContextMenuMessage(node);
// todo code stop
},
contextEdit: function(node){ // callback function to support fancytree() object edit folder/item (right click contextMenu)
// todo code start
showSampleContextMenuMessage(node);
// todo code stop
},
contextFilter: function(node, items){ // callback function to support fancytree() object right click contextMenu menu list
delete(items.new); // remove separate "new" item from menu
if (node.data.type=="0"){ // if there is root node
delete(items.edit); // do not allow edit
delete(items['delete']); // do not allow delete
delete(items.copy); // do not allow copy
}
},
contextIsFolder: function(node){ // helper callback function to detect node is folder
if (node.data.type=="2") return false; // check if node is folder
else return true;
}
}
});
function showSampleContextMenuMessage(node){ // dummy message via dialog
$('<div></div>')
.html('Actually it is <strong>not an error</strong> - just simulation to show data to be used todo something. Node main data is:<br>key: '+
node.data.key+', type: '+node.data.type+', title: '+node.data.title)
.dialog({
title: 'Message',
modal: true,
width: 500,
height: 'auto',
buttons: {
Ok: function() { $( this ).dialog( "close" ); }
}
});
}
var sample_tree = sample_tree_table.cms_tree_table("fancytree"); // get fancytree() object from cms_tree_table() object
var sample_table = sample_tree_table.cms_tree_table("dataTable"); // get dataTable() object from cms_tree_table() object
HTML code snippet:
<table class="cms-tree-table" id="sample-tree-table">
<tr>
<td class="cms-tree-table-td">
<div class="cms-tree-table-header">Tree</div>
<div class="cms-url-tree" style="margin-top: 5px"></div>
</td>
<td class="cms-tree-table-nodisplay">
<div style="margin-left:3px">
<div class="cms-tree-table-header">Contents of <span class="cms-url-tree-dir-list-title"></span></div>
<div class="cms_dataTable">
<table cellpadding="0" cellspacing="5" border="0" class="cms-url-tree-dir-list-table">
<thead>
<tr>
<th><input type="button" value="+" class="cms-display-select" style="font-size:14px"></th>
<th>No</th>
<th>ID</th>
<th>URL</th>
<th>Title</th>
<th>Extended Title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
API URL: "/cms/files/guide/jquery/api/tree/all" returns JSON data:
[{"key":"0","title":"\/","type":"0","isFolder":true,"hideCheckbox":true,"children":[{"key":"1","title":"Folder 1","type":"1","isFolder":true,"children":[{"key":"4","title":"Subfolder 1.1","type":"1","isFolder":true,"children":[{"key":"7","title":"Subfolder 1.1.1","type":"1","isFolder":true},{"key":"DOC_5","title":"Doc 5","type":"2","tooltip":"<table class='cms-url-tree-tooltip'><tr><td>Title: <\/td><td>Doc 5<\/td><\/tr><tr><td>Extended title: <\/td><td>Title doc 5<\/td><\/tr><tr><td>Description: <\/td><td>Description doc 5<\/td><\/tr><tr><td>Keywords: <\/td><td>Keywords doc 5<\/td><\/tr><tr><td>Language: <\/td><td>en<\/td><\/tr><tr><td>URL: <\/td><td>\/folder-1\/subfolder-1-1\/doc-5<\/td><\/tr><\/table>","isFolder":false}]},{"key":"5","title":"Subfolder 1.2","type":"1","isFolder":true},{"key":"6","title":"Subfolder 1.3","type":"1","isFolder":true},{"key":"DOC_3","title":"Doc 3","type":"2","tooltip":"<table class='cms-url-tree-tooltip'><tr><td>Title: <\/td><td>Doc 3<\/td><\/tr><tr><td>Extended title: <\/td><td>Title doc 3<\/td><\/tr><tr><td>Description: <\/td><td>Description doc 3<\/td><\/tr><tr><td>Keywords: <\/td><td>Keywords doc 3<\/td><\/tr><tr><td>Language: <\/td><td>en<\/td><\/tr><tr><td>URL: <\/td><td>\/folder-1\/doc-3<\/td><\/tr><\/table>","isFolder":false},{"key":"DOC_4","title":"Doc 4","type":"2","tooltip":"<table class='cms-url-tree-tooltip'><tr><td>Title: <\/td><td>Doc 4<\/td><\/tr><tr><td>Extended title: <\/td><td>Title doc 4<\/td><\/tr><tr><td>Description: <\/td><td>Description doc 4<\/td><\/tr><tr><td>Keywords: <\/td><td>Keywords doc 4<\/td><\/tr><tr><td>Language: <\/td><td>en<\/td><\/tr><tr><td>URL: <\/td><td>\/folder-1\/doc-4<\/td><\/tr><\/table>","isFolder":false}]},{"key":"2","title":"Folder 2","type":"1","isFolder":true},{"key":"3","title":"Folder 3","type":"1","isFolder":true},{"key":"DOC_1","title":"Doc 1","type":"2","tooltip":"<table class='cms-url-tree-tooltip'><tr><td>Title: <\/td><td>Doc 1<\/td><\/tr><tr><td>Extended title: <\/td><td>Title doc 1<\/td><\/tr><tr><td>Description: <\/td><td>Description doc 1<\/td><\/tr><tr><td>Keywords: <\/td><td>Keywords doc 1<\/td><\/tr><tr><td>Language: <\/td><td>en<\/td><\/tr><tr><td>URL: <\/td><td>\/doc-1<\/td><\/tr><\/table>","isFolder":false},{"key":"DOC_2","title":"Doc 2","type":"2","tooltip":"<table class='cms-url-tree-tooltip'><tr><td>Title: <\/td><td>Doc 2<\/td><\/tr><tr><td>Extended title: <\/td><td>Title doc 2<\/td><\/tr><tr><td>Description: <\/td><td>Description doc 2<\/td><\/tr><tr><td>Keywords: <\/td><td>Keywords doc 2<\/td><\/tr><tr><td>Language: <\/td><td>en<\/td><\/tr><tr><td>URL: <\/td><td>\/doc-2<\/td><\/tr><\/table>","isFolder":false}]}]
API URL: "/cms/files/guide/jquery/api/tree/lst" returns JSON data:
{"sEcho":7,"iTotalRecords":"2","iTotalDisplayRecords":"2","rc":"0","msg":"success","aaData":[["<input type=\"checkbox\"\/>",1,"1","\/doc-1","Doc 1","Title doc 1"],["<input type=\"checkbox\"\/>",2,"2","\/doc-2","Doc 2","Title doc 2"]],"query":"\r\n\t\t\t\tSELECT `doc_id`, `doc_url`, `doc_title`, `doc_title_full`\r\n\t\t\t\tFROM doc\r\n\t\t\t\tWHERE doc_dir_id=0\r\n\t\t\t\tORDER BY `doc_url` asc\r\n\t\t\t\tLIMIT 0, 10\r\n\t\t\t\t"}
API URL: "/cms/files/guide/jquery/api/tree/pst" returns JSON data:
{"rc":"1","msg":"Actually it is <strong>not an error<\/strong> - just simulation to show data was sent to api and got response. Data was sent:<br>{\"key\":\"1\",\"type\":\"1\",\"data\":[[\"DOC_2\",\"2\"]]}"}
API URL: "/cms/files/guide/jquery/api/tree/new/1" returns JSON data:
{"rc":"1","msg":"Actually it is <strong>not an error<\/strong> - just simulation to show data was sent to api and got response. Data was sent:<br>$_POST['node_key']: 1, $_POST['node_title']: New Folder"}
API URL: "/cms/files/guide/jquery/api/tree/dir/upd/1" returns JSON data:
{"rc":"1","msg":"Actually it is <strong>not an error<\/strong> - just simulation to show data was sent to api and got response. Data was sent:<br>$_POST['node_key']: 1, $_POST['node_title']: Folder 1","data":{"key":"1","title":"Folder 1"}}
API URL: "/cms/files/guide/jquery/api/tree/doc/upd/DOC_1" returns JSON data:
{"rc":"1","msg":"Actually it is <strong>not an error<\/strong> - just simulation to show data was sent to api and got response. Data was sent:<br>$_POST['node_key']: DOC_1, $_POST['node_title']: Doc 1","data":{"key":"DOC_1","title":"Doc 1"}}
API URL: "/cms/files/guide/jquery/api/tree/drp" returns JSON data:
{"rc":"1","msg":"Actually it is <strong>not an error<\/strong> - just simulation to show data was sent to api and got response. Data was sent:<br>{\"key\":\"1\",\"type\":\"1\",\"data\":[[\"DOC_1\",\"2\"]]}"}
API URL page XML definitions in pages.xml file:
<doc><url>/tree/all</url><method>GET</method><fnc>sample_class::treeGetAll</fnc></doc>
<doc><url>/tree/lst</url><method>GET</method><fnc>sample_class::treeGetList</fnc></doc>
<doc><url>/tree/pst</url><method>POST</method><fnc>sample_class::treePaste</fnc></doc>
<doc><url>/tree/new/:id</url><method>POST</method><fnc>sample_class::treeNewFolder</fnc></doc>
<doc><url>/tree/dir/upd/:id</url><method>POST</method><fnc>sample_class::treeUpdateFolder</fnc></doc>
<doc><url>/tree/doc/upd/:id</url><method>POST</method><fnc>sample_class::treeUpdateItem</fnc></doc>
<doc><url>/tree/drp</url><method>POST</method><fnc>sample_class::treeDrop</fnc></doc>
<doc><url>/tree/reo</url><method>GET</method><fnc>sample_class::treeReorder</fnc></doc>
Full subsite (based on KUSoftas CMS) configuration and PHP code of sample RESTful API can be found in folder: /cms/files/guide/jquery/api (see using CMS tool "Files": http://www.kusoftas.com/cms/srv/admin/doc)
.cms_tree_table()
|
.cms_tree_table( [settings] )
Returns: cms_tree_table()
|
|||||||||||||
|
For jQuery UI based elements (dataTable, fancytree, dialog) styling you can use jQuery UI Theming
cms_tree_table plugin has its own additional elements for styling and control:
- class 'cms-url-tree-dir-list-table' - <table> element where dataTable() object will be created
- class 'cms-url-tree-dir-list-title' - <span> element where current folder node property 'title' will be placed (optional)
- class 'cms-url-tree-dir-list-editor' - <span> element where current folder node property 'editor' will be placed (optional)
- class 'cms-url-tree-dir-list-timestamp' - <span> element where current folder node property 'timestamp' will be placed (optional)
- class 'cms-url-tree' - <div> element where fancytree() object will be created
Plugin cms_dual_table depends on following jQuery packages:
