[英]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
}
});
函數create對象將完成工作,一旦在樹上選擇了一個節點,我們將擁有父節點
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.