jstree-grid #59

Data not showing when the jstree loads open.

by adamjimenez

HTML

<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="https://static.jstree.com/3.3.0/assets/dist/themes/default/style.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/adamjimenez/jstree-table/master/jstreetable.js"></script>
<h2>JsTree Table Demo</h2>
This page gives a demo for using the excellent <a href="http://www.jstree.com">jstree</a> with a table.
The table is implemented as a standard jstree plugin.
Include jquery and jstree, and the plugin library jstreetable.js, and include it as a plugin. 
Look at the source to this page to see how it is done.
<p>
  This example demonstrates advanced features including:
</p>

<div id="jstree"></div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
  margin: 1em;
}
.jstree-table-wrapper {
  border: 1px solid #ccc;
}

JavaScript

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