← Back to branch summary

~katiekitty/+junk/solidstate

« back to all changes in this revision

Viewing changes to solidstate/trunk/include/dhtmlxTree/samples/with_db/index.html

  • Committer: root
  • Date: 2010-01-13 07:44:31 UTC
  • Revision ID: root@ds3-vamp.cs-monitor.cz.cc-20100113074431-kt8ceoeznpjg22x7
Reviving the project

Show diffs side-by-side

added added

removed removed

Lines of Context:
solidstate/trunk/include/dhtmlxTree/samples/with_db/index.html
 
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
2
<html>
 
3
<head>
 
4
        <title>dhtmlxTree sample</title>
 
5
        <style>
 
6
                #details span{
 
7
                        font-size:10px;
 
8
                        font-family:arial;
 
9
                        display:block;
 
10
                }
 
11
                #details input,#details textarea{
 
12
                        border: 1px solid gray;
 
13
                }
 
14
                #actions a{
 
15
                        font-size:12px;
 
16
                        font-family:arial;
 
17
                        margin:5px;
 
18
                        text-decoration:none;
 
19
                }
 
20
                #actions {
 
21
                        border-bottom:1px solid blue;
 
22
                        padding:2px;
 
23
                        margin-bottom:10px;
 
24
                        margin-top:10px;
 
25
                }
 
26
                #showproc{
 
27
                        border:1px solid;
 
28
                        border-color: lightblue blue blue lightblue;
 
29
                        background-color: #87ceeb;
 
30
                        font-family:arial;
 
31
                        font-size: 14px;
 
32
                        padding: 5px;
 
33
                        position: absolute;
 
34
                        top:100px;
 
35
                        left:600px;
 
36
                }
 
37
        </style>
 
38
        <link rel="STYLESHEET" type="text/css" href="../../css/dhtmlXTree.css">
 
39
        <script  src="../../js/dhtmlXCommon.js"></script>
 
40
        <script  src="../../js/dhtmlXTree.js"></script> 
 
41
        
 
42
        <script>
 
43
                //tree object
 
44
                var tree;
 
45
                //xml loader to load details from database
 
46
                var xmlLoader = new dtmlXMLLoaderObject(doLoadDetails,window);
 
47
                //default label for new item
 
48
                var newItemLabel = "New Item";
 
49
                //id for new (unsaved) item
 
50
                var newItemId = "-1";
 
51
                
 
52
                //load tree on page
 
53
                function loadTree(){
 
54
                        tree = new dhtmlXTreeObject("treebox","100%","100%",0);
 
55
                        tree.setImagePath("../../imgs/");
 
56
                        tree.enableDragAndDrop(true);
 
57
                        tree.setDragHandler(doOnBeforeDrop);
 
58
                        tree.setOnClickHandler(doOnSelect);
 
59
                        tree.loadXML("treefromdb.php");
 
60
                        status();
 
61
                }
 
62
                
 
63
                //add new node next to currently selected (or the first in tree)
 
64
                function addNewPeer(){
 
65
                        if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
 
66
                                alert("New Item (unsaved) already exists")
 
67
                                return false;
 
68
                        }
 
69
                        var selectedId = tree.getSelectedItemId();
 
70
                        if(selectedId!=""){
 
71
                                tree.insertNewNext(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
 
72
                        }else{
 
73
                                tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
 
74
                        }
 
75
                }
 
76
                
 
77
                //add new child node to selected item (or the first item in tree)
 
78
                function addNewChild(){
 
79
                        if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
 
80
                                alert("New Item (unsaved) already exists")
 
81
                                return false;
 
82
                        }
 
83
                        var selectedId = tree.getSelectedItemId();
 
84
                        if(selectedId!=""){
 
85
                                tree.insertNewItem(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
 
86
                        }else{
 
87
                                tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
 
88
                        }
 
89
                }
 
90
                
 
91
                //delete item (from database)
 
92
                function deleteNode(){
 
93
                        status(true);
 
94
                        var f = document.forms["detailsForm"];
 
95
                        if(tree.getSelectedItemId()!=newItemId){//delete node from db
 
96
                                if(!confirm("Are you sure you want to delete selected node?"))
 
97
                                        return false;
 
98
                                f.action = "deletenode.php"
 
99
                                f.submit()
 
100
                        }else{//delete unsaved node
 
101
                                doDeleteTreeItem(newItemId);
 
102
                        }
 
103
                }
 
104
                
 
105
                //remove item from tree
 
106
                function doDeleteTreeItem(id){
 
107
                        document.getElementById("details").style.visibility = "hidden";
 
108
                        var pId = tree.getParentId(id);
 
109
                        tree.deleteItem(id);
 
110
                        if(pId!="0")
 
111
                                tree.selectItem(pId,true);
 
112
                        status();
 
113
                }
 
114
                
 
115
                //save item
 
116
                function saveItem(){
 
117
                        status(true);
 
118
                        var f = document.forms["detailsForm"];
 
119
                        f.action = "savenode.php";
 
120
                        f.submit();
 
121
                }
 
122
                
 
123
                //save moved (droped) item to db. Cancel drop if save failed or item is new
 
124
                function doOnBeforeDrop(id,parentId){
 
125
                        if(id==newItemId)
 
126
                                return false;
 
127
                        else{
 
128
                                status(true);
 
129
                                var dropSaver = new dtmlXMLLoaderObject(null,null,false);//sync mode
 
130
                                dropSaver.loadXML("dropprocessor.php?id="+id+"&parent_id="+parentId);
 
131
                                var root = dropSaver.getXMLTopNode("succeedded");
 
132
                                var id = root.getAttribute("id");
 
133
                                if(id==-1){
 
134
                                        alert("Save failed");
 
135
                                        status();
 
136
                                        return false;
 
137
                                }else{
 
138
                                        if(tree.getSelectedItemId()==id){//update details (really need only parent id)
 
139
                                                loadDetails(id);
 
140
                                        }
 
141
                                }
 
142
                                status();
 
143
                                return true;
 
144
                        }
 
145
                }
 
146
                
 
147
                //update item
 
148
                function doUpdateItem(id, label){
 
149
                        var f = document.forms["detailsForm"];
 
150
                        f.item_id.value = id;
 
151
                        tree.changeItemId(tree.getSelectedItemId(),id);
 
152
                        tree.setItemText(id,label);
 
153
                        tree.setItemColor(id,"black","white");
 
154
                        status();
 
155
                }
 
156
                
 
157
                //what to do when item selected
 
158
                function doOnSelect(itemId){
 
159
                        if(itemId!=newItemId){
 
160
                                if(tree.getLevel(newItemId)!=0){
 
161
                                        if(confirm("Do you want to save changes?")){//save changes to new item
 
162
                                                tree.selectItem(newItemId,false)
 
163
                                                saveItem();
 
164
                                                return;
 
165
                                        }
 
166
                                        tree.deleteItem(newItemId);
 
167
                                }       
 
168
                        }else{//set color to new item label
 
169
                                tree.setItemColor(itemId,"red","pink")
 
170
                        }
 
171
                        loadDetails(itemId);//load details for selected item
 
172
                }
 
173
                //send request to the server to load details
 
174
                function loadDetails(id){
 
175
                        status(true);
 
176
                        xmlLoader.loadXML("loaddetails.php?id="+id);
 
177
                }
 
178
                //populate form of details
 
179
                function doLoadDetails(obj){
 
180
                        var f = document.forms["detailsForm"];
 
181
                        var root = xmlLoader.getXMLTopNode("details")
 
182
                        var id = root.getAttribute("id");
 
183
                        document.getElementById("details").style.visibility = "visible";
 
184
                        if(id==newItemId){
 
185
                                f.item_nm.value = tree.getItemText(id);
 
186
                                f.item_desc.value = "";
 
187
                        }else{
 
188
                                f.item_nm.value = root.getElementsByTagName("name")[0].firstChild.nodeValue;
 
189
                                if(root.getElementsByTagName("desc")[0].firstChild!=null)
 
190
                                        f.item_desc.value = root.getElementsByTagName("desc")[0].firstChild.nodeValue;
 
191
                                else
 
192
                                        f.item_desc.value = "";
 
193
                        }
 
194
                        f.item_id.value = id
 
195
                        f.item_parent_id.value = tree.getParentId(id);
 
196
                        status();
 
197
                }
 
198
                
 
199
                //show status of request on page
 
200
                function status(fl){
 
201
                        var d = document.getElementById("showproc");
 
202
                        if(fl)
 
203
                                d.style.display = "";
 
204
                        else
 
205
                                d.style.display = "none";
 
206
                }
 
207
        </script>       
 
208
</head>
 
209
 
 
210
<body onload="loadTree()" style="height:100%">
 
211
        <!--- block for displaying status of request on page --->
 
212
        <div id="showproc" style="display:block;">Processing...</div>
 
213
        
 
214
        <h1>dhtmlxTree<br>Relationships with database sample (PHP/MySQL)</h1>
 
215
        <a href="../dhtmlxTree_db_sample.zip">Get zipped code</a>
 
216
        <br><br>
 
217
        <li>Create/Update/Delete nodes in tree with simultaneous database update</li>
 
218
        <li>Drag-n-drop with simultaneous database update</li>
 
219
        
 
220
        
 
221
        <div id="actions">
 
222
                <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>
 
223
        </div>
 
224
        <table width="100%">
 
225
                <tr>
 
226
                        <!--- tree area --->
 
227
                        <td width="250px">
 
228
                                <div id="treebox" 
 
229
                                        style=" width:250px; 
 
230
                                                        height:250px;
 
231
                                                        background-color:#f5f5f5;
 
232
                                                        border :1px solid Silver;"/>
 
233
                        </td>
 
234
                        <!--- details area. visible if any node selected --->
 
235
                        <td id="details" 
 
236
                                style="padding:5px;visibility:hidden;" valign="top">
 
237
                                        <form name="detailsForm" action="" target="actionframe" method="post">
 
238
                                                <span>Node ID:</span>
 
239
                                                <input  name="item_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
 
240
                                                <span>Parent ID:</span>
 
241
                                                <input  name="item_parent_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
 
242
                                                <span>Label:</span>
 
243
                                                <input name="item_nm" type="Text" maxlength="50" name="label" style="width:200px;"><br>
 
244
                                                <span>Descripton:</span>
 
245
                                                <textarea name="item_desc" id="textarea" style="height:100px;width:200px;"></textarea><br>      
 
246
                                                <button type="button" onclick="saveItem()" style="width:200px;">Save</button>
 
247
                                        </form>
 
248
                        </td>
 
249
                </tr>
 
250
        </table>
 
251
        <!--- iframe for submiting details form to --->
 
252
        <iframe name="actionframe" id="actionframe" frameborder="0" width="100%" height="0"></iframe>
 
253
        
 
254
        <h4>&copy; Scand LLC 2005</h4>  
 
255
 
 
256
 
 
257
</body>
 
258
</html>