Skip to content

Instantly share code, notes, and snippets.

@andrewgilmartin

andrewgilmartin/gist:110829

Created May 13, 2009 02:10
Show Gist options
  • Save andrewgilmartin/110829 to your computer and use it in GitHub Desktop.
Save andrewgilmartin/110829 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>jQuery Column Tree Table</title>
<link rel="stylesheet" href="http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Lucida+Grande,+Lucida+Sans,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px" type="text/css" media="screen" /> <style type="text/css">
table.datatree {
border-bottom: 1px solid gray;
border-left: 1px solid gray;
border-collapse: collapse;
}
.datatree th {
border-top: 1px solid gray;
border-right: 1px solid gray;
padding: 0.5ex 1ex 0.5ex 1ex;
text-align: left;
vertical-align: top;
}
.datatree td {
border-top: 1px solid gray;
border-right: 1px solid gray;
padding: 0.5ex 1ex 0.5ex 1ex;
text-align: left;
vertical-align: top;
}
.strip0 {
background-color: #EFEFEF;
}
.strip1 {
background-color: white;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://plugins.jquery.com/files/column_tree_table.js.txt"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#t1').columnTreeTable( { tree_column_index: 1 } );
} );
</script>
</head>
<body>
<div>
<table id="t1" class="datatree">
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</thead>
<tbody>
<tr id="r1">
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
<tr id="r2" idref="r1">
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
</tr>
<tr id="r3" idref="r2">
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
</tr>
<tr id="r3x" idref="r2">
<td>cx1</td>
<td>cx2</td>
<td>cx3</td>
<td>cx4</td>
</tr>
<tr id="r2x" idref="r1">
<td>bx1</td>
<td>bx2</td>
<td>bx3</td>
<td>bx4</td>
</tr>
<tr id="r4">
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
<tr id="r5">
<td>e1</td>
<td>e2</td>
<td>e3</td>
<td>e4</td>
</tr>
<tr id="r6">
<td>f1</td>
<td>f2</td>
<td>f3</td>
<td>f4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
@whittet
Copy link

whittet commented Mar 8, 2011

I put together a working demo by copying your code to jsFiddle.net. I highly recommend it:) Best, Shane Whittet
http://jsfiddle.net/whittet/7brHk/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment