Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Today i want to share how to Create Dynamic Tree Grid using TreeGrid jQuery Plugin. I will use Treegrid jQuery Plugin for this case.

TreeGrid jQuery plugin has some feature that meet with my requirment, this plugin is very easy to understand and the most important is compatible with bootstrap 3. Because i use Gentelella for templating.

Some feature TreeGrid jQuery Plugin is

  • Create TreeGrid from HTML table
  • Simple and flexible javascript
  • Compatible with bootstrap
  • Ability to save the state of the tree
  • Events support

Let’s start with some case. My Friend Ferri ask me to help him to create tree grid list of website admin menus. He will provide me JSON data of menus. here it is for the JSON structure:

[
{
"menuId":"1",
"menuName":"Master",
"menuParent":"-1",
"menuLink":null,
"menuPosition":"1",
"children":[
		{
		"menuId":"2",
		"menuName":"Master Admin",
		"menuParent":"1",
		"menuLink":"master_admin",
		"menuPosition":"1",
                "children":[]
		},
		{
		"menuId":"3",
		"menuName":"Master Vendor",
		"menuParent":"1",
		"menuLink":"master_vendor",
		"menuPosition":"2",
                "children":[]
		},
		{
		"menuId":"4",
		"menuName":"Master Menu",
		"menuParent":"1",
		"menuLink":"master_menu",
		"menuPosition":"3",
                "children":[]
		},
		{
		"menuId":"5",
		"menuName":"Master Role",
		"menuParent":"1",
		"menuLink":"master_role",
		"menuPosition":"4",
                "children":[]
		}	
	]
}
]

With that datas, we can generate dynamic tree grid recursively. First, we need to create html tags for the content.

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>DidikH - jquery treegrid</title>

    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/jquery.treegrid.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://github.com/maxazan/jquery-treegrid/blob/master/js/jquery.treegrid.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <table class="tree">        
      </table>
    </div>
  </body>
</html>

After that we will create javascript function that will be called on document ready function. we will create two functions, first function createTable(jsonData) to create root datas, and the second is generateChildsRecursively(jsonData, generated) that will generate childs on recursive way.

createTable(jsonData)

function createTable(jsonData){
      	var generated = '';
      	for(var i=0; i<jsonData.length; i++){
      		if(jsonData[i].menuParent == -1){
      			// parent menu
      			generated = generated + '<tr class="treegrid-'+jsonData[i].menuId+'"><td>'+jsonData[i].menuName+'</td></tr>';
      			// TODO recursive here
      			var recursiveResult = generateChildsRecursively(jsonData[i], generated);
      			generated = recursiveResult;
      		}
      	}
      	return generated;
      }

generateChildsRecursively(jsonData, generated)

function generateChildsRecursively(jsonData, generated){
      	for(var i=0; i<jsonData.children.length; i++){
      		generated = generated + '<tr class="treegrid-'+jsonData.children[i].menuId+' treegrid-parent-'+jsonData.menuId+'"><td>'+jsonData.children[i].menuName+'</td></tr>';
      		generated = generateChildsRecursively(jsonData.children[i], generated);
      	}
      	return generated;
      }

And at least we have to append the generated rows and columns to the table with this code $('.tree').append( createTable(jsonMenu) );. after that, we have to call TreeGrid jQuery plugin’s function to apply the tree table with this code $('.tree').treegrid();

i think it is all for this post about Create Dynamic Tree Grid using TreeGrid jQuery Plugin. thank you for visiting my blog. please leave comment for asking or give me correction.

And here it is the result of this code:
Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

2 comments

  1. Hi there!
    your download link is not working!

    Do you have any idea how to populate a table with laravel or any php oop?

    Please let me know if you can share your test zip file!

    Kind Regards

Leave a Reply

Your email address will not be published. Required fields are marked *