使用 jquery 对话框在 jstree 中创建一个新节点

Posted 2023-05-08

【中文标题】使用 jquery 对话框在 jstree 中创建一个新节点

【英文标题】：create a new node in jstree using jquery dialog

【发布时间】：2017-09-26 03:31:38

【问题描述】：

我想在 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
  
);

JS Fiddle sample

【问题讨论】：

试试这个jsfiddle.net/x9wd6k3x/71

【参考方案1】：

函数创建对象将完成这项工作，一旦在树上选择了一个节点，我们将拥有父节点

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>

【讨论】：

谢谢Ifergon..如果可能的话，你能不能给我jsFiddle。

@Ifergon ：实际上我在选择节点时需要该弹出窗口->右键单击节点->单击创建-> 弹出窗口（必需）这就是要求..这些步骤基于问题中提供的jsfiddle