Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Editable Nodes</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.edit.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
span.pending span.fancytree-title {
font-style: italic;
}
span.pending span.fancytree-title:after {
content: "\2026"; /* ellipsis */
}
</style>
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
extensions: ["edit"],
source: {url: "ajax-tree-plain.json"},
lazyLoad: function(event, data) {
data.result = { url: "ajax-sub2.json", debugDelay: 1000 };
},
edit: {
triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
beforeEdit: function(event, data){
// Return false to prevent edit mode
},
edit: function(event, data){
// Editor was opened (available as data.input)
},
beforeClose: function(event, data){
// Return false to prevent cancel/save (data.input is available)
console.log(event.type, event, data);
if( data.originalEvent.type === "mousedown" ) {
// We could prevent the mouse click from generating a blur event
// (which would then again close the editor) and return `false` to keep
// the editor open:
// data.originalEvent.preventDefault();
// return false;
// Or go on with closing the editor, but discard any changes:
// data.save = false;
}
},
save: function(event, data){
// Save data.input.val() or return false to keep editor open
console.log("save...", this, data);
// Simulate to start a slow ajax request...
setTimeout(function(){
$(data.node.span).removeClass("pending");
// Let's pretend the server returned a slightly modified
// title:
data.node.setTitle(data.node.title + "!");
}, 2000);
// We return true, so ext-edit will set the current user input
// as title
return true;
},
close: function(event, data){
// Editor was removed
if( data.save ) {
// Since we started an async request, mark the node as preliminary
$(data.node.span).addClass("pending");
}
}
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "Add child",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
if( !node ) {
alert("Please activate a parent node.");
return;
}
node.editCreateNode("child", "Node title");
}
});
addSampleButton({
label: "Add sibling folder",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
node.editCreateNode("after", {
title: "Node title",
folder: true
});
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: 'edit' extension</h1>
<div class="description">
<p>
Rename or create nodes using inline editing.
</p>
<p>
Edit the node titles with `dblclick`, `Shift + click` [F2], or [Enter] (on Mac only).
</p>
<p>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtEdit"
target="_blank" class="external">ext-edit</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<div id="tree">
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<p id="sampleButtons">
</p>
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree/">Fancytree project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>