jamesbebbington/jquery.jTable.html

## jquery.jTable.html
<!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>
	<!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>