Create new node in jstree using jquery dialog
I want to create a node in a jstree grid , when the create button is clicked, I want to open a jquery dialog where I want to enter the name of the node and save it. How to implement jquery popup dialog with create click event ?
any input or suggestions are welcome
// tree data
var data;
data = [{
text: "Products",
data: {},
children: [{
text: "Fruit",
data: {},
children:[
{text: "Apple", data: {price: 0.1, quantity: 20}},
{text: "Banana", data: {price: 0.2, quantity: 31}},
{text: "Grapes", data: {price: 1.99, quantity: 34}},
{text: "Mango", data: {price: 0.5, quantity: 8}},
{text: "Melon", data: {price: 0.8, quantity: 4}},
{text: "Pear", data: {price: 0.1, quantity: 30}},
{text: "Strawberry", data: {price: 0.15, quantity: 32}}
],
'state': {'opened': true}
}, {
text: "Vegetables",
data: {},
children:[
{text: "Aubergine", data: {price: 0.5, quantity: 8}},
{text: "Broccoli", data: {price: 0.4, quantity: 22}},
{text: "Carrot", data: {price: 0.1, quantity: 32}},
{text: "Cauliflower", data: {price: 0.45, quantity: 18}},
{text: "Potato", data: {price: 0.2, quantity: 38}}
]
}],
'state': {'opened': true}
}];
// load jstree
$("div#jstree").jstree({
plugins: ["table","dnd","contextmenu","sort"],
core: {
data: data,
'check_callback': true
},
// configure tree table
table: {
columns: [
{width: 200, header: "Name"},
{width: 150, value: "price", header: "Price", format: function(v) {if (v){ return '$'+v.toFixed(2) }}},
{width: 150, value: "quantity", header: "Qty"}
],
resizable: true,
draggable: true,
contextmenu: true,
width: 500,
height: 300
}
});
+3
source to share
1 answer
The create object will do the job, if one node is selected in the tree, we will have a parent
function create_node(name, display, type) {
var ref = $("#data").jstree(),
sel = ref.get_selected(),
parent = $("#data").jstree('get_selected');
if (!sel.length) {
return false;
}
sel = sel[0];
var newNode = {
text: name,
state: "open",
type: type
};
sel = ref.create_node(parent, newNode);
if (sel) {
ref.edit(sel);
}
};
Dialog button:
<button onclick="create_node(document.getElementById('name').value, document.getElementById('name').value, document.getElementById('type').value)"></button>
+1
source to share