Create A CRUD Tree Table With jQuery And Bootstrap - edittreetable

edittreetable is a jQuery plugin used for rendering a hierarchical CRUD tree table from JSON objects using Bootstrap styles. 

Features:

• Allows to add/remove/update as many nodes as you prefer.
• Delete confirmation.
• Collapsible and expandable.

Basic usage:

1. Download and include the jQuery edittreetable plugin into your project which has jQuery and Bootstrap included.

<script src="jquery.edittreetable.js"></script>

2. Include the Font Awesome 4 for icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

3. Add nodes to the tree table as follows:

var data = [{
  id:1,name:"JavaScript",pid:0
},
{
  id:2,name:"jQuery",pid:1
},
{
  id:6,name:"ReactJS",pid:1
},
{
  id:4,name:"AngularJS",pid:1
},
{
  id:5,name:"Zepto",pid:1
},
{
  id:3,name:"PHP",pid:0
}];

4. Render a basic tree table in the webpage.

$("#container).bstreetable({
  data:data,
  maintitle:"languages",
  nodeaddCallback:function(data,callback){
    alert(JSON.stringify(data));
    // do something
    callback({id:18,name:data.name,pid:data.pid});
  },
  noderemoveCallback:function(data,callback){
    alert(JSON.stringify(data));
    // do something
    callback();
  },
  nodeupdateCallback:function(data,callback){
    alert(JSON.stringify(data));
    // do something
    callback();
  }
}
);

5. Plugin's default options and callbacks.

$("#container).bstreetable({
  container:window,
  data:[],
  extfield:[],
  nodeaddEnable:true,
  maxlevel:4,
  nodeaddCallback:function(data,callback){},
  noderemoveCallback:function(data,callback){},
  nodeupdateCallback:function(data,callback){},
  customalert:function(msg){
    alert(msg);
  },
  customconfirm:function(msg){
    return confirm(msg);
  },
  text:{
    NodeDeleteText:"Are You Sure To Delete This Node?"
  }
});

---

This awesome jQuery plugin is developed by songhlc. For more Advanced Usages, please check the demo page or visit the official website.