Advanced User Interface Controls and Components
Specifies an object that map the fields names from data source to the ones used by the TreeView.
| Variable | Type | Details |
|---|---|---|
| content (default: 'content') | String | Specifies the name of a property in your data source which represents a DOM element used as item content |
| dataSource (default: null) | Array | Specifies an array of item objects used as data source |
| expanded (default: 'expanded') | String | Specifies the name of a property in your data source which represents the item state: expanded or collapsed |
| icon (default: 'icon') | String | Specifies the name of a property in your data source which represents a DOM element used as item icon |
| id (default: 'id') | String | Specifies the name of a property in your data source which represents an unique identifier for an item |
| pid (default: 'pid') | String | Specifies the name of a property in your data source which represents an identifier for the item's parent |
| statusIcon (default: 'statusIcon') | String | Specifies the name of a property in your data source which represents a DOM element used as item status icon |
| text (default: 'text') | String | Specifies the name of a property in your data source which represents an item label |
An object with field names from a custom data source. Except for dataSource which is an array of objects, all other variables are the names inside of the array.
Supported in: v1.0.
In this example the TreeView widget has dataFields set to a custom object used to map data fields from local data source. Using the names of data fields in this object, the TreeView will become automatically populated with data stored in flatList array.
$(document).ready(function(){
var flatList = [
{ "itemId": "1", "text": "Dairy", "isExpanded": false },
{ "itemId": "11", "parentId": "1", "text": "Milk" },
{ "itemId": "12", "parentId": "1", "text": "Butter" },
{ "itemId": "13", "parentId": "1", "text": "Cheese" },
{ "itemId": "14", "parentId": "1", "text": "Yogurt" },
{ "itemId": "2", "text": "Fruits" },
{ "itemId": "21", "parentId": "2", "text": "Berries", "isExpanded": false },
{ "itemId": "211", "parentId": "21", "text": "BlackBerries" },
{ "itemId": "212", "parentId": "21", "text": "CranBerries" },
{ "itemId": "213", "parentId": "21", "text": "StrawBerries" },
{ "itemId": "22", "parentId": "2", "text": "Pits" },
{ "itemId": "23", "parentId": "2", "text": "Core" },
{ "itemId": "24", "parentId": "2", "text": "Citrus Fruits", "isExpanded": false },
{ "itemId": "241", "parentId": "24", "text": "Oranges" },
{ "itemId": "242", "parentId": "24", "text": "Lemons" },
{ "itemId": "25", "parentId": "2", "text": "Melons" },
{ "itemId": "26", "parentId": "2", "text": "Tropical Fruits" },
{ "itemId": "261", "parentId": "26", "text": "Avocados" },
{ "itemId": "262", "parentId": "26", "text": "Bananas" },
{ "itemId": "263", "parentId": "26", "text": "Dates" },
{ "itemId": "3", "text": "Grains" },
{ "itemId": "4", "text": "Meat" },
{ "itemId": "41", "parentId": "4", "text": "Beef" },
{ "itemId": "42", "parentId": "4", "text": "Lamb", "isExpanded": false },
{ "itemId": "421", "parentId": "42", "text": "Lamb Breast" },
{ "itemId": "422", "parentId": "42", "text": "Lamb Leg" },
{ "itemId": "423", "parentId": "42", "text": "Lamb Ribs" },
{ "itemId": "43", "parentId": "4", "text": "Pork" }
{ "itemId": "5", "text": "Sweets" }
{ "itemId": "6", "text": "Vegetables" }
{ "itemId": "7", "text": "Water" }
]
var $tree = $('#treeview').treeview({
// Map group data fields with fields from local data source
dataFields: {
id : 'itemId',
pid : 'parentId',
text : 'text',
expanded: 'isExpanded',
dataSource : flatList
});
});
<!DOCTYPE html>
<html>
<head>
<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/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.treeview.min.js"></script>
</head>
<body>
<div id="treeview" class="widget"></div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to use local data to load the content in TreeView.
A sample which demonstrates how to populate TreeView widget using remote data binding. Access to remote data files is done using jQuery $http service.