Updating server datasource
Using dhtmlxDataProcessor you can avoid any script programming. Just implement server side (samples are available)
Add node as child of selected (or top) Add node next to selected Delete selected row |
|
Single click on selected item to edit it. Move items between levels using drag-n-drop |
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Updating server datasource</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<link rel="stylesheet" type="text/css" href="../common/demo_style.css"/>
<script>
var myTree, myDataProcessor;
function doOnLoad(){
myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
myTree.setImagePath("../../../skins/web/imgs/dhxtree_web/");
myTree.enableDragAndDrop(true);
myTree.enableItemEditor(true);
myTree.load("php/get.php");
//init dataprocessor and assign verification function
myDataProcessor = new dataProcessor("php/update.php");
//add after-update event handler
myDataProcessor.attachEvent("onAfterUpdate",function(nodeId,cType,newId){
doLog("Item was "+cType+"ed. Item id is " + newId)
});
myDataProcessor.init(myTree);
}
function doLog(str){
var log = document.getElementById("logarea");
log.innerHTML = log.innerHTML+str+"</br>"
log.scrollTop = log.scrollHeight;
}
</script>
</head>
<body onload="doOnLoad()">
<h1>Updating server datasource</h1>
<p>Using dhtmlxDataProcessor you can avoid any script programming. Just implement server side (samples are available)</p>
<table>
<tr>
<td>
<a href="#" onclick="myTree.insertNewChild(myTree.getSelectedItemId()||0,(new Date()).valueOf(),'New item')">Add node as child of selected (or top)</a> <br/>
<a href="#" onclick="myTree.insertNewNext(myTree.getSelectedItemId(),(new Date()).valueOf(),'New item')">Add node next to selected</a> <br/>
<a href="#" onclick="var id = myTree.getSelectedItemId(); if (id) myTree.deleteItem(id);">Delete selected row</a><br/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div id="treeboxbox_tree" class="tree_demo_samples"></div>
</td>
<td rowspan="2" style="padding-left:25px" valign="top">
<div id="logarea" style="background-color:#d3d3d3;height:298px;width:400px;overflow:auto; padding:3px;"></div>
</td>
</tr>
<tr>
<td>
Single click on selected item to edit it.<br>
Move items between levels using drag-n-drop
</td>
</tr>
</table>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.