mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-19 22:43:22 +01:00
259 lines
7.6 KiB
HTML
259 lines
7.6 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>dhtmlxTree sample</title>
|
||
|
|
<style>
|
||
|
|
#details span{
|
||
|
|
font-size:10px;
|
||
|
|
font-family:arial;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
#details input,#details textarea{
|
||
|
|
border: 1px solid gray;
|
||
|
|
}
|
||
|
|
#actions a{
|
||
|
|
font-size:12px;
|
||
|
|
font-family:arial;
|
||
|
|
margin:5px;
|
||
|
|
text-decoration:none;
|
||
|
|
}
|
||
|
|
#actions {
|
||
|
|
border-bottom:1px solid blue;
|
||
|
|
padding:2px;
|
||
|
|
margin-bottom:10px;
|
||
|
|
margin-top:10px;
|
||
|
|
}
|
||
|
|
#showproc{
|
||
|
|
border:1px solid;
|
||
|
|
border-color: lightblue blue blue lightblue;
|
||
|
|
background-color: #87ceeb;
|
||
|
|
font-family:arial;
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 5px;
|
||
|
|
position: absolute;
|
||
|
|
top:100px;
|
||
|
|
left:600px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<link rel="STYLESHEET" type="text/css" href="../../css/dhtmlXTree.css">
|
||
|
|
<script src="../../js/dhtmlXCommon.js"></script>
|
||
|
|
<script src="../../js/dhtmlXTree.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
//tree object
|
||
|
|
var tree;
|
||
|
|
//xml loader to load details from database
|
||
|
|
var xmlLoader = new dtmlXMLLoaderObject(doLoadDetails,window);
|
||
|
|
//default label for new item
|
||
|
|
var newItemLabel = "New Item";
|
||
|
|
//id for new (unsaved) item
|
||
|
|
var newItemId = "-1";
|
||
|
|
|
||
|
|
//load tree on page
|
||
|
|
function loadTree(){
|
||
|
|
tree = new dhtmlXTreeObject("treebox","100%","100%",0);
|
||
|
|
tree.setImagePath("../../imgs/");
|
||
|
|
tree.enableDragAndDrop(true);
|
||
|
|
tree.setDragHandler(doOnBeforeDrop);
|
||
|
|
tree.setOnClickHandler(doOnSelect);
|
||
|
|
tree.loadXML("treefromdb.php");
|
||
|
|
status();
|
||
|
|
}
|
||
|
|
|
||
|
|
//add new node next to currently selected (or the first in tree)
|
||
|
|
function addNewPeer(){
|
||
|
|
if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
|
||
|
|
alert("New Item (unsaved) already exists")
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
var selectedId = tree.getSelectedItemId();
|
||
|
|
if(selectedId!=""){
|
||
|
|
tree.insertNewNext(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
|
||
|
|
}else{
|
||
|
|
tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//add new child node to selected item (or the first item in tree)
|
||
|
|
function addNewChild(){
|
||
|
|
if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
|
||
|
|
alert("New Item (unsaved) already exists")
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
var selectedId = tree.getSelectedItemId();
|
||
|
|
if(selectedId!=""){
|
||
|
|
tree.insertNewItem(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
|
||
|
|
}else{
|
||
|
|
tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//delete item (from database)
|
||
|
|
function deleteNode(){
|
||
|
|
status(true);
|
||
|
|
var f = document.forms["detailsForm"];
|
||
|
|
if(tree.getSelectedItemId()!=newItemId){//delete node from db
|
||
|
|
if(!confirm("Are you sure you want to delete selected node?"))
|
||
|
|
return false;
|
||
|
|
f.action = "deletenode.php"
|
||
|
|
f.submit()
|
||
|
|
}else{//delete unsaved node
|
||
|
|
doDeleteTreeItem(newItemId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//remove item from tree
|
||
|
|
function doDeleteTreeItem(id){
|
||
|
|
document.getElementById("details").style.visibility = "hidden";
|
||
|
|
var pId = tree.getParentId(id);
|
||
|
|
tree.deleteItem(id);
|
||
|
|
if(pId!="0")
|
||
|
|
tree.selectItem(pId,true);
|
||
|
|
status();
|
||
|
|
}
|
||
|
|
|
||
|
|
//save item
|
||
|
|
function saveItem(){
|
||
|
|
status(true);
|
||
|
|
var f = document.forms["detailsForm"];
|
||
|
|
f.action = "savenode.php";
|
||
|
|
f.submit();
|
||
|
|
}
|
||
|
|
|
||
|
|
//save moved (droped) item to db. Cancel drop if save failed or item is new
|
||
|
|
function doOnBeforeDrop(id,parentId){
|
||
|
|
if(id==newItemId)
|
||
|
|
return false;
|
||
|
|
else{
|
||
|
|
status(true);
|
||
|
|
var dropSaver = new dtmlXMLLoaderObject(null,null,false);//sync mode
|
||
|
|
dropSaver.loadXML("dropprocessor.php?id="+id+"&parent_id="+parentId);
|
||
|
|
var root = dropSaver.getXMLTopNode("succeedded");
|
||
|
|
var id = root.getAttribute("id");
|
||
|
|
if(id==-1){
|
||
|
|
alert("Save failed");
|
||
|
|
status();
|
||
|
|
return false;
|
||
|
|
}else{
|
||
|
|
if(tree.getSelectedItemId()==id){//update details (really need only parent id)
|
||
|
|
loadDetails(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
status();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//update item
|
||
|
|
function doUpdateItem(id, label){
|
||
|
|
var f = document.forms["detailsForm"];
|
||
|
|
f.item_id.value = id;
|
||
|
|
tree.changeItemId(tree.getSelectedItemId(),id);
|
||
|
|
tree.setItemText(id,label);
|
||
|
|
tree.setItemColor(id,"black","white");
|
||
|
|
status();
|
||
|
|
}
|
||
|
|
|
||
|
|
//what to do when item selected
|
||
|
|
function doOnSelect(itemId){
|
||
|
|
if(itemId!=newItemId){
|
||
|
|
if(tree.getLevel(newItemId)!=0){
|
||
|
|
if(confirm("Do you want to save changes?")){//save changes to new item
|
||
|
|
tree.selectItem(newItemId,false)
|
||
|
|
saveItem();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
tree.deleteItem(newItemId);
|
||
|
|
}
|
||
|
|
}else{//set color to new item label
|
||
|
|
tree.setItemColor(itemId,"red","pink")
|
||
|
|
}
|
||
|
|
loadDetails(itemId);//load details for selected item
|
||
|
|
}
|
||
|
|
//send request to the server to load details
|
||
|
|
function loadDetails(id){
|
||
|
|
status(true);
|
||
|
|
xmlLoader.loadXML("loaddetails.php?id="+id);
|
||
|
|
}
|
||
|
|
//populate form of details
|
||
|
|
function doLoadDetails(obj){
|
||
|
|
var f = document.forms["detailsForm"];
|
||
|
|
var root = xmlLoader.getXMLTopNode("details")
|
||
|
|
var id = root.getAttribute("id");
|
||
|
|
document.getElementById("details").style.visibility = "visible";
|
||
|
|
if(id==newItemId){
|
||
|
|
f.item_nm.value = tree.getItemText(id);
|
||
|
|
f.item_desc.value = "";
|
||
|
|
}else{
|
||
|
|
f.item_nm.value = root.getElementsByTagName("name")[0].firstChild.nodeValue;
|
||
|
|
if(root.getElementsByTagName("desc")[0].firstChild!=null)
|
||
|
|
f.item_desc.value = root.getElementsByTagName("desc")[0].firstChild.nodeValue;
|
||
|
|
else
|
||
|
|
f.item_desc.value = "";
|
||
|
|
}
|
||
|
|
f.item_id.value = id
|
||
|
|
f.item_parent_id.value = tree.getParentId(id);
|
||
|
|
status();
|
||
|
|
}
|
||
|
|
|
||
|
|
//show status of request on page
|
||
|
|
function status(fl){
|
||
|
|
var d = document.getElementById("showproc");
|
||
|
|
if(fl)
|
||
|
|
d.style.display = "";
|
||
|
|
else
|
||
|
|
d.style.display = "none";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="loadTree()" style="height:100%">
|
||
|
|
<!--- block for displaying status of request on page --->
|
||
|
|
<div id="showproc" style="display:block;">Processing...</div>
|
||
|
|
|
||
|
|
<h1>dhtmlxTree<br>Relationships with database sample (PHP/MySQL)</h1>
|
||
|
|
<a href="../dhtmlxTree_db_sample.zip">Get zipped code</a>
|
||
|
|
<br><br>
|
||
|
|
<li>Create/Update/Delete nodes in tree with simultaneous database update</li>
|
||
|
|
<li>Drag-n-drop with simultaneous database update</li>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="actions">
|
||
|
|
<a href="javascript:void(0)" onclick="addNewPeer()">New Peer</a>|<a href="javascript:void(0)" onclick="addNewChild()">New Child</a>|<a href="javascript:void(0)" onclick="deleteNode()">Delete Node</a>
|
||
|
|
</div>
|
||
|
|
<table width="100%">
|
||
|
|
<tr>
|
||
|
|
<!--- tree area --->
|
||
|
|
<td width="250px">
|
||
|
|
<div id="treebox"
|
||
|
|
style=" width:250px;
|
||
|
|
height:250px;
|
||
|
|
background-color:#f5f5f5;
|
||
|
|
border :1px solid Silver;"/>
|
||
|
|
</td>
|
||
|
|
<!--- details area. visible if any node selected --->
|
||
|
|
<td id="details"
|
||
|
|
style="padding:5px;visibility:hidden;" valign="top">
|
||
|
|
<form name="detailsForm" action="" target="actionframe" method="post">
|
||
|
|
<span>Node ID:</span>
|
||
|
|
<input name="item_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
|
||
|
|
<span>Parent ID:</span>
|
||
|
|
<input name="item_parent_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
|
||
|
|
<span>Label:</span>
|
||
|
|
<input name="item_nm" type="Text" maxlength="50" name="label" style="width:200px;"><br>
|
||
|
|
<span>Descripton:</span>
|
||
|
|
<textarea name="item_desc" id="textarea" style="height:100px;width:200px;"></textarea><br>
|
||
|
|
<button type="button" onclick="saveItem()" style="width:200px;">Save</button>
|
||
|
|
</form>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<!--- iframe for submiting details form to --->
|
||
|
|
<iframe name="actionframe" id="actionframe" frameborder="0" width="100%" height="0"></iframe>
|
||
|
|
|
||
|
|
<h4>© Scand LLC 2005</h4>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|