Border

IntegralUI Web

Native Angular and AngularJS UI Components


TreeView / Local Data Storage







A demonstration on how to use HTML5 local data storage to preserve the state of TreeView widget.

Using buttons on right panel, you can add/remove items to the TreeView. Whenever an item is added or removed the state of TreeView will be saved. This is done by handling the itemadded and itemremoved events, where we add a code which saves the content of TreeView to a local storage.

Whenever a page is reloaded, the TreeView will get populated using the data saved in local storage. To empty the storage, just click on 'Empty Storage' button.

Related article: Using HTML5 Local Data Storage to Preserve State in TreeView jQuery

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>TreeView - Local Data Storage</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/integralui.widget.min.js"></script>

<script type="text/javascript" src="js/integralui.treeview.min.js"></script>

<style type="text/css">

.control-panel

{

float: left;

margin-left: 20px;

width: 200px;

}

.widget

{

float: left;

width: 300px;

height: 300px;

}

</style>

</head>

<body>

<div id="treeview" class="widget"></div>

<div class="control-panel" align="center" >

<form name="frm">

<button type="button" id="add-root" style="margin:5px 0; width:125px">Add Root</button><br />

<button type="button" id="add-child" style="margin:5px 0; width:125px">Add Child</button><br />

<button type="button" id="remove" style="margin:5px 0; width:125px">Remove</button><br />

<button type="button" id="clear" style="margin:5px 0; width:125px">Clear</button><br /><br />

<button type="button" id="empty" style="margin:5px 0; width:125px">Empty Storage</button>

</form>

</div>

</body>

</html>

$(document).ready(function() {

// Create an instance of TreeView widget

var $tree = $('#treeview').treeview({

itemIcon: "<span class='icons doc'></span>"

});

var itemCount = 0;

 

// If there is local data present, populate the TreeView with it

if (localStorage){

// Suspend the TreeView layout to increase performance

$tree.treeview("suspendLayout");

 

// Use JSON parse method to extract the data from local storage

var storedItems = JSON.parse(localStorage.getItem("treeData"));

if (storedItems){

// Add items from parsed data to the TreeView

for (var i = 0; i < storedItems.length; i++)

$tree.treeview("addItem", storedItems[i]);

}

 

// Resume and update the layout of TreeView

$tree.treeview("resumeLayout");

}

 

// Whenever TreeView data is changed, we save it to a local storage

$tree.on({

"itemadded": function(e){

saveTreeView();

},

"itemremoved": function(e){

saveTreeView();

},

"clear": function(e){

saveTreeView();

}

});

 

var saveTreeView = function(){

if (localStorage){

// Retrieve the list of items from the TreeView

var itemList = $tree.treeview("getList");

// Use JSON stringify method to save the item list as array

localStorage.setItem("treeData", JSON.stringify(itemList));

}

}

 

$('#add-root').click(function(e){

e.preventDefault();

 

itemCount = $tree.treeview("getCurrentList").length + 1;

$tree.treeview("addItem", { text: "Item" + itemCount, id: "0" + itemCount });

});

 

$('#add-child').click(function(e){

e.preventDefault();

 

// We are using the current item count and its level to create a unique id for each item

itemCount = $tree.treeview("getCurrentList").length + 1;

var selItem = $tree.treeview("option", "selectedItem");

var level = $tree.treeview("getItemLevel", selItem) + 1;

 

$tree.treeview("addItem", { text: "Item" + itemCount, id: level.toString() + itemCount }, selItem);

});

 

$('#remove').click(function(e){

e.preventDefault();

 

$tree.treeview("removeItem", $tree.treeview("option", "selectedItem"));

});

 

$('#clear').click(function(e){

e.preventDefault();

$tree.treeview("clearItems");

itemCount = 0;

});

 

$('#empty').click(function(e){

// Empty the local storage

localStorage.clear();

});

});


Border