Create A CRUD Tree Table With jQuery Bootstrap edittreetable - Download Create A CRUD Tree Table With jQuery And Bootstrap - edittreetable

Download Create A CRUD Tree Table With jQuery And Bootstrap – edittreetable

By Posted on

This time I will share jQuery Plugin and tutorial about Create A CRUD Tree Table With jQuery And Bootstrap – edittreetable, hope it will help you in programming stack.

Create A CRUD Tree Table With jQuery Bootstrap edittreetable - Download Create A CRUD Tree Table With jQuery And Bootstrap - edittreetable
File Size: 12.3 KB
Views Total: 24109
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="jquery.edittreetable.js"></script>

2. Include the Font Awesome 4 for icons.

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

3. Add nodes to the tree table as follows:

view source
01 var data = [{
02   id:1,name:"JavaScript",pid:0
03 },
04 {
05   id:2,name:"jQuery",pid:1
06 },
07 {
08   id:6,name:"ReactJS",pid:1
09 },
10 {
11   id:4,name:"AngularJS",pid:1
12 },
13 {
14   id:5,name:"Zepto",pid:1
15 },
16 {
17   id:3,name:"PHP",pid:0
18 }];

4. Render a basic tree table in the webpage.

view source
01 $("#container).bstreetable({
02   data:data,
03   maintitle:"languages",
04   nodeaddCallback:function(data,callback){
05     alert(JSON.stringify(data));
06     // do something
07     callback({id:18,name:data.name,pid:data.pid});
08   },
09   noderemoveCallback:function(data,callback){
10     alert(JSON.stringify(data));
11     // do something
12     callback();
13   },
14   nodeupdateCallback:function(data,callback){
15     alert(JSON.stringify(data));
16     // do something
17     callback();
18   }
19 }
20 );

5. Plugin’s default options and callbacks.

view source
01 $("#container).bstreetable({
02   container:window,
03   data:[],
04   extfield:[],
05   nodeaddEnable:true,
06   maxlevel:4,
07   nodeaddCallback:function(data,callback){},
08   noderemoveCallback:function(data,callback){},
09   nodeupdateCallback:function(data,callback){},
10   customalert:function(msg){
11     alert(msg);
12   },
13   customconfirm:function(msg){
14     return confirm(msg);
15   },
16   text:{
17     NodeDeleteText:"Are You Sure To Delete This Node?"
18   }
19 });

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

source : jqueryscript.net

Related posts: