joequery
8/21/2011 - 6:14 AM

An implementation of SimpleTree

An implementation of SimpleTree

simpletree.html
content_copyfile_download
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-simpleTreeMenu-1.1.0.js"></script>
<script>
$(document).ready(function() {
	var x=0;
	var u=0;
	var ulidp="";
	var ulidc="";
	$.get('codes.xml', function(d){
		$(d).find('record').each(function(){
			var $record = $(this);
			var parent_flag = $record.find('parent_flag').text();
			var parent_id = $record.find('parent_id').text();
			var code = $record.find('code').text();
			var depth = $record.find('depth').text();
			var code_level = $record.find('code_level').text();
			var id = $record.find('id').text();
			if (x==0) {
			ulidc = 'ul' + id
			$('#myMenuTree').append('<li class="Node expandable" id="reasonForLeaving|'+id+'">' + code + '<ul id="' + ulidc + '">');
			x++;
			} else {
				if (parent_flag =="Y") {
				ulidp = 'ul' + parent_id;
				ulidc = 'ul' + id
				$("#" + ulidp).append('<li class="Node expandable" id="reasonForLeaving|'+id+'">' + code + '<ul id="' + ulidc + '">');
				} else {
				ulidp = 'ul' + parent_id;
				$("#" + ulidp).append('<li class="Node selectable" id="reasonForLeaving|'+id + '" >' + code + '</li>');
				}
			}
		});
	});
	x=0;
	$('#myMenuTree').simpleTreeMenu();
	$('#expand').click(function(){
	$('#myMenuTree').simpleTreeMenu('expandAll');
	});
	$('#close').click(function(){
	$('#myMenuTree').simpleTreeMenu('closeAll');
	});
	$('.selectable').live("click", function(){
	alert("Selected");
	});
});
</script>
</head>
<body>
	<div id="wrapper">
	<br />
		<span id="expand">expand all</span>
		<span id="close">close all</span>
		<ul id="myMenuTree" class="myTree" >
</ul>
</div>
</body>
</html>