Generate Treeview in jquery

I want to generate a treeview using jstree. In this treeview the user have the option to change the structure of treeview, like adding parents, adding child, renaming the nodes etc. It must be expandable, collapsable and with checkbox.

it looks like this: sample Image

Have searched a lot, but couldn't find any. Only way out is to ask question here.

Answers 1

  • Try the following code...

    $('#jstree_demo').jstree({
      "core" : {
        "animation" : 0,
        "check_callback" : true,
        "themes" : { "stripes" : true },
        'data' : {
          'url' : function (node) {
            return node.id === '#' ?
              'ajax_demo_roots.json' : 'ajax_demo_children.json';
          },
          'data' : function (node) {
            return { 'id' : node.id };
          }
        }
      },
      "types" : {
        "#" : {
          "max_children" : 1,
          "max_depth" : 4,
          "valid_children" : ["root"]
        },
        "root" : {
          "icon" : "/static/3.3.0/assets/images/tree_icon.png",
          "valid_children" : ["default"]
        },
        "default" : {
          "valid_children" : ["default","file"]
        },
        "file" : {
          "icon" : "glyphicon glyphicon-file",
          "valid_children" : []
        }
      },
      "plugins" : [
        "contextmenu", "dnd", "search",
        "state", "types", "wholerow"
      ]
    });
    

    More details can be found here

    Hope this helps....


Related Articles