Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jTable 0.0.1 - A jTree hack-job proof-of-concept</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* Copyright notice and license must remain intact for legal use
* JTree 1.0
* Version: 1.0 (May 5, 2008)
* Requires: jQuery 1.2+
*/
/*
* JTable 0.0.1
* Ten-minute proof-of-concept hack-job by James Bebbington
*/
(function($) {
$.fn.jTable = function(options) {
$("body").append('<table id="jTableHelper"></table>');
var opts = $.extend({}, $.fn.jTable.defaults, options);
var cur = 0, curOff = 0, off =0, h =0, w=0, hover = 0;
var str='<tr class="jTablePlacement" style="background:'+opts.pBg+';border:'+opts.pBorder+';color:'+opts.pColor+';height:'+opts.pHeight+'"></tr>';
var container = this;
//events are written here
$(this).find("tr").mousedown(function(e){
if ($("#jTableHelper").is(":not(:animated)") && e.button !=2) {
$("body").css("cursor","move");
// append jTablePlacement to body and hides
$("body").append(str);
$(".jTablePlacement").hide();
//get the current tr and append to helper
$(this).clone().appendTo("#jTableHelper");
// get initial state, cur and offset
cur = this;
curOff = $(cur).offset();
$(cur).hide();
// show initial helper
$("#jTableHelper").css ({
position: "absolute",
top: e.pageY + 5,
left: e.pageX + 5,
background: opts.hBg,
opacity: opts.hOpacity
}).hide();
if(opts.showHelper)
$("#jTableHelper").show();
$("#jTableHelper *").css ({
color: opts.hColor,
background: opts.hBg
});
// start binding events to use
// prevent text selection
$(document).bind("selectstart", doNothing);
// doubleclick is destructive, better disable
$(container).find("tr").bind("dblclick", doNothing);
// in single tr calculate the offset, width height of hovered block
$(container).find("tr").bind("mouseover", getInitial);
// in single tr put placement in correct places, also move the helper around
$(container).bind("mousemove", sibOrChild);
// in container put placement in correct places, also move the helper around
$(container).find("tr").bind("mousemove", putPlacement);
// handle mouse movement outside our container
$(document).bind("mousemove", helperPosition);
}
//prevent bubbling of mousedown
return false;
});
// in single tr or in container, snap into placement if present then destroy placement
// and helper then show snapped in object/tr
// also destroys events
$(this).find("tr").andSelf().mouseup(function(e){
// if placementBox is detected
$("body").css("cursor","default");
if ($(".jTablePlacement").is(":visible")) {
$(cur).insertBefore(".jTablePlacement").show();
}
$(cur).show();
// remove helper and placement box and clean all empty table
$(container).find("table:empty").remove();
$("#jTableHelper").empty().hide();
$(".jTablePlacement").remove();
// remove bindings
destroyBindings();
return false;
});
$(document).mouseup(function(e){
$("body").css("cursor","default");
if ($("#jTableHelper").is(":not(:empty)")) {
$("#jTableHelper").animate({
top: curOff.top,
left: curOff.left
}, opts.snapBack, function(){
$("#jTableHelper").empty().hide();
$(".jTablePlacement").remove();
$(cur).show();
}
);
destroyBindings();
}
return false;
});
//functions are written here
var doNothing = function(){
return false;
};
var destroyBindings = function(){
$(document).unbind("selectstart", doNothing);
$(container).find("tr").unbind("dblclick", doNothing);
$(container).find("tr").unbind("mouseover", getInitial);
$(container).find("tr").unbind("mousemove", putPlacement);
$(document).unbind("mousemove", helperPosition);
$(container).unbind("mousemove", sibOrChild);
return false;
};
var helperPosition = function(e) {
$("#jTableHelper").css ({
top: e.pageY + 5,
left: e.pageX + 5
});
$(".jTablePlacement").remove();
return false;
};
var getInitial = function(e){
off = $(this).offset();
h = $(this).height();
w = $(this).width();
hover = this;
return false;
};
var sibOrChild = function(e){
$("#jTableHelper").css ({
top: e.pageY + 5,
left: e.pageX + 5
});
return false;
};
var putPlacement = function(e){
$(cur).hide();
$("#jTableHelper").css ({
top: e.pageY + 5,
left: e.pageX + 5
});
//inserting before
if ( e.pageY >= off.top && e.pageY < (off.top + h/2 - 1) ) {
if (!$(this).prev().hasClass("jTablePlacement")) {
$(".jTablePlacement").remove();
$(this).before(str);
}
}
//inserting after
else if (e.pageY >(off.top + h/2) && e.pageY <= (off.top + h) ) {
// as a sibling
if (e.pageX > off.left && e.pageX < off.left + opts.childOff) {
if (!$(this).next().hasClass("jTablePlacement")) {
$(".jTablePlacement").remove();
$(this).after(str);
}
}
// as a child
else if (e.pageX > off.left + opts.childOff) {
$(".jTablePlacement").remove();
if ($(this).find("table").length == 0)
$(this).append('<table>'+str+'</table>');
else
$(this).find("table").prepend(str);
}
}
if($(".jTablePlacement").length>1)
$(".jTablePlacement:first-child").remove();
return false;
}
var lockIn = function(e) {
// if placement box is present, insert before placement box
if ($(".jTablePlacement").length==1) {
$(cur).insertBefore(".jTablePlacement");
}
$(cur).show();
// remove helper and placement box
$("#jTableHelper").empty().hide();
$(".jTablePlacement").remove();
return false;
}
}; // end jTable
$.fn.jTable.defaults = {
showHelper: true,
hOpacity: 0.5,
hBg: "#FCC",
hColor: "#222",
pBorder: "1px dashed #CCC",
pBg: "#EEE",
pColor: "#222",
pHeight: "20px",
childOff: 20,
snapBack: 1000
};
})(jQuery);
$(document).ready(function() {
$('table').jTable();
});
//]]>
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data R1 C1</td>
<td>Data R1 C2</td>
<td>Data R1 C3</td>
</tr>
<tr>
<td>Data R2 C1</td>
<td>Data R2 C2</td>
<td>Data R2 C3</td>
</tr>
<tr>
<td>Data R3 C1</td>
<td>Data R3 C2</td>
<td>Data R3 C3</td>
</tr>
<tr>
<td>Data R4 C1</td>
<td>Data R4 C2</td>
<td>Data R4 C3</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment