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

Question

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

Answer 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>