Untitled

dabblet.css

.main {
	margin: 0 auto;
	white-space: nowrap;
	width: 600px;
	
}
.item {
	height: 20px;
}
header {
	padding-right: 60px;
}
header:hover {
	background-color: blue;
	color: #fff;
}
.c1,
.c2,
.c3 {
	display: inline-block;
	height: 20px;
	text-indent: 3px;
}
.c1 {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 60%;
}
.c2,
.c3 {
	border-left: 1px solid #ccc;
}
.c2 {
	width: 60px;
	
}
.c3 {
	width: 40%;
}

dabblet.html

<div id="treeview" class="item main">
	<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
	<div class="item">
		<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
	</div>
	<div class="item">
		<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
		<div class="item">
			<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
		</div>
		<div class="item">
			<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
			<div class="item">
				<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
			</div>
			<div class="item">
				<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
				<div class="item">
					<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
				</div>
				<div class="item">
					<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
					<div class="item">
						<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
					</div>
					<div class="item">
						<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
						<div class="item">
							<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
						</div>
						<div class="item">
							<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
							<div class="item">
								<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
							</div>
							<div class="item">
								<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
								<div class="item">
									<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
								</div>
								<div class="item">
									<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
									<div class="item">
										<header><div class="c1">Folder name</div><div class="c2">2</div><div class="c3">3</div></header>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" TYPE="text/javascript"></script>
<script type="text/javascript">
alert('x');
	var treeviewpadding = 30;
	var c1width = $(".item:first header .c1").width();
	var c3width = $(".item:first header .c3").width();
	var level = 1;
	formattree = function(x){
		$(x).find(".item").each(function(){
			//if it's not the first element
			//get the level value of my parrent
			if($(this).parent().attr("level")){
				level = parseInt($(this).parent().attr("level"))+1;
			}
			$(this).attr("level",level);
			$(this).children("header")
				.css("padding-left", treeviewpadding*level+"px")
				.children(".c1")
				.css("width", c1width-treeviewpadding*level+"px")
				.end()
				.children(".c3")
				.css("width", c3width+"px");
		});	
	}
	$(function(){
		formattree("#treeview");
	});
</script>

settings.json

{"view":"split","prefixfree":"1","page":"html"}