raspberry-pi-absensi/assets/scripts/treeview.init.js

/**
 * Theme: Ninja Admin Template
 * Author: NinjaTeam
 * Module/App: Tree View
 */

$(function() {

	var defaultData = [
		{
			text: 'Parent 1',
			href: '#parent1',
			tags: ['4'],
			nodes: [
				{
					text: 'Child 1',
					href: '#child1',
					tags: ['2'],
					nodes: [
						{
							text: 'Grandchild 1',
							href: '#grandchild1',
							tags: ['0']
						},
						{
							text: 'Grandchild 2',
							href: '#grandchild2',
							tags: ['0']
						}
					]
				},
				{
					text: 'Child 2',
					href: '#child2',
					tags: ['0']
				}
			]
		},
		{
			text: 'Parent 2',
			href: '#parent2',
			tags: ['0']
		},
		{
			text: 'Parent 3',
			href: '#parent3',
			 tags: ['0']
		},
		{
			text: 'Parent 4',
			href: '#parent4',
			tags: ['0']
		},
		{
			text: 'Parent 5',
			href: '#parent5'  ,
			tags: ['0']
		}
	];

	var alternateData = [
		{
			text: 'Parent 1',
			tags: ['2'],
			nodes: [
				{
					text: 'Child 1',
					tags: ['3'],
					nodes: [
						{
							text: 'Grandchild 1',
							tags: ['6']
						},
						{
							text: 'Grandchild 2',
							tags: ['3']
						}
					]
				},
				{
					text: 'Child 2',
					tags: ['3']
				}
			]
		},
		{
			text: 'Parent 2',
			tags: ['7']
		},
		{
			text: 'Parent 3',
			icon: 'glyphicon glyphicon-earphone',
			href: '#demo',
			tags: ['11']
		},
		{
			text: 'Parent 4',
			icon: 'glyphicon glyphicon-cloud-download',
			href: '/demo.html',
			tags: ['19'],
			selected: true
		},
		{
			text: 'Parent 5',
			icon: 'glyphicon glyphicon-certificate',
			color: 'pink',
			backColor: 'red',
			href: 'http://www.tesco.com',
			tags: ['available','0']
		}
	];

	var json = '[' +
		'{' +
			'"text": "Parent 1",' +
			'"nodes": [' +
				'{' +
					'"text": "Child 1",' +
					'"nodes": [' +
						'{' +
							'"text": "Grandchild 1"' +
						'},' +
						'{' +
							'"text": "Grandchild 2"' +
						'}' +
					']' +
				'},' +
				'{' +
					'"text": "Child 2"' +
				'}' +
			']' +
		'},' +
		'{' +
			'"text": "Parent 2"' +
		'},' +
		'{' +
			'"text": "Parent 3"' +
		'},' +
		'{' +
			'"text": "Parent 4"' +
		'},' +
		'{' +
			'"text": "Parent 5"' +
		'}' +
	']';


	$('#treeview1').treeview({
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
		expandIcon: 'fa fa-plus',
		collapseIcon: 'fa fa-minus',
		nodeIcon: 'fa fa-folder',
	});

	$('#treeview2').treeview({
		levels: 1,
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
		expandIcon: 'fa fa-plus',
		collapseIcon: 'fa fa-minus',
		nodeIcon: 'fa fa-folder',
	});

	$('#treeview3').treeview({
		levels: 99,
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
		expandIcon: 'fa fa-plus',
		collapseIcon: 'fa fa-minus',
		nodeIcon: 'fa fa-folder',
	});

	$('#treeview4').treeview({
		color: "#304ffe",
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
		expandIcon: 'fa fa-plus',
		collapseIcon: 'fa fa-minus',
		nodeIcon: 'fa fa-folder',
	});

	$('#treeview5').treeview({
		color: "#304ffe",
		expandIcon: 'fa fa-chevron-right',
		collapseIcon: 'fa fa-chevron-down',
		nodeIcon: 'fa fa-bookmark',
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
	});

	$('#treeview6').treeview({
		color: "#304ffe",
		expandIcon: "fa fa-square",
		collapseIcon: "fa fa-square-o",
		nodeIcon: "fa fa-user",
		showTags: true,
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
	});

	$('#treeview10').treeview({
		color: "#304ffe",
		enableLinks: true,
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
		expandIcon: 'fa fa-plus',
		collapseIcon: 'fa fa-minus',
		nodeIcon: 'fa fa-folder',
	});



	var $searchableTree = $('#treeview-searchable').treeview({
		data: defaultData,
		selectedBackColor: "#304ffe",
		onhoverColor: "rgba(0, 0, 0, 0.05)",
		expandIcon: 'fa fa-plus',
		collapseIcon: 'fa fa-minus',
		nodeIcon: 'fa fa-folder',
	});

	var search = function(e) {
		var pattern = $('#input-search').val();
		var options = {
			ignoreCase: $('#chk-ignore-case').is(':checked'),
			exactMatch: $('#chk-exact-match').is(':checked'),
			revealResults: $('#chk-reveal-results').is(':checked')
		};
		var results = $searchableTree.treeview('search', [ pattern, options ]);

		var output = '<p>' + results.length + ' matches found</p>';
		$.each(results, function (index, result) {
			output += '<p>- ' + result.text + '</p>';
		});
		$('#search-output').html(output);
		return false;
	}

	$('#btn-search').on('click', search);
	$('#input-search').on('keyup', search);

	$('#btn-clear-search').on('click', function (e) {
		$searchableTree.treeview('clearSearch');
		$('#input-search').val('');
		$('#search-output').html('');
		return false;
	});


})