Create new node in jstree using jquery dialog

Question

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
  }
});

Sample JS Script

+3

javascript jquery jquery-ui jquery-ui-dialog jstree

Neege Apr 28 17 at 5:58

source to share

1 answer

lfergon · Accepted Answer · 2017-04-28T09:09:24+0000

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>

Create new node in jstree using jquery dialog

More articles: