使用 jquery 对话框在 jstree 中创建一个新节点
create a new node in jstree using jquery dialog
我想在 jstree 网格 中创建一个 节点,单击创建时我想弹出一个 jquery对话框,我想在其中输入节点名称并保存。如何使用创建点击事件实现jquery对话框弹出?
欢迎任何贡献或建议
// 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
}
});
函数创建对象将完成这项工作,一旦在树上选择了一个节点,我们将拥有父节点
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);
}
};
对话框上的按钮:
<button onclick="create_node(document.getElementById('name').value, document.getElementById('name').value, document.getElementById('type').value)"></button>
我想在 jstree 网格 中创建一个 节点,单击创建时我想弹出一个 jquery对话框,我想在其中输入节点名称并保存。如何使用创建点击事件实现jquery对话框弹出?
欢迎任何贡献或建议
// 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
}
});
函数创建对象将完成这项工作,一旦在树上选择了一个节点,我们将拥有父节点
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);
}
};
对话框上的按钮:
<button onclick="create_node(document.getElementById('name').value, document.getElementById('name').value, document.getElementById('type').value)"></button>