<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="DOMextensions.js" charset="win-1251"></script>
<script type="text/javascript" src="ddi.js" charset="win-1251"></script>
<script type="text/javascript" src="Plugins/ddi.plugin.dragStateAsCursor.js" charset="win-1251"></script>
<script type="text/javascript" src="Plugins/ddi.plugin.draggedElementTip.js" charset="win-1251"></script>
<script type="text/javascript" src="Plugins/ddi.plugin.fixNoMouseSelect.js" charset="win-1251"></script>
<script type="text/javascript" src="Plugins/ddi.plugin.lockCursorAsDefault.js" charset="win-1251"></script>
<script type="text/javascript" src="Plugins/ddi.plugin.resizeIT.js" charset="win-1251"></script>
<script type="text/javascript" src="Plugins/ddi.plugin.moveIT.js" charset="win-1251"></script>
<style type="text/css">
table {
background: #fff;
border: 2px black inset;
border-collapse: collapse;
position: absolute;
able-layout: fixed;
}
th {
background-color: silver;
border: 1px #333 solid;
color: black;
cursor: default;
font-size: 8pt;
font-weight: normal;
text-transform: uppercase;
}
th, td {
overflow: hidden;
width: 80px;
}
td {
border: 1px solid gray;
padding: 0 2px;
}
td input {
border: 0;
text-align: right;
width: 100%;
}
</style>
</head>
<body>
<strong>Simple DataGrid demo.</strong><br />
Features:
<ul>
<li>resize column by dragging header border</li>
<li>arrange columns by dragging header</li>
<li>move table by dragging "Item" column header</li>
</ul>
<table cellspacing="0" class="sortable">
<thead>
<tr id="headerBar">
<th>Item</th>
<th>Name</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<th>1</th>
<td><input type="text" value="Erik" /></td>
<td><input type="text" value="990228" /></td>
<td><input type="text" value="31-12-1903" /></td>
</tr>
<tr>
<th>2</th>
<td><input type="text" value="Emil" /></td>
<td><input type="text" value="990227" /></td>
<td><input type="text" value="05-01-2005" /></td>
</tr>
<tr>
<th>3</th>
<td><input type="text" value="Steven" /></td>
<td><input type="text" value="950227" /></td>
<td><input type="text" value="01-05-2015" /></td>
</tr>
<tr>
<th>4</th>
<td><input type="text" value="Scott" /></td>
<td><input type="text" value="960227" /></td>
<td><input type="text" value="12-11-2010" /></td>
</tr>
<tr>
<th>5</th>
<td><input type="text" value="Mike" /></td>
<td><input type="text" value="880227" /></td>
<td><input type="text" value="04-06-1950" /></td>
</tr>
<tr>
<th>6</th>
<td><input type="text" value="Thomas" /></td>
<td><input type="text" value="900227" /></td>
<td><input type="text" value="04-07-1950" /></td>
</tr>
<tr>
<th>7</th>
<td><input type="text" value="Fabian" /></td>
<td><input type="text" value="970227" /></td>
<td><input type="text" value="17-06-1999" /></td>
</tr>
<tr>
<th>8</th>
<td><input type="text" value="Adam" /></td>
<td><input type="text" value="930227" /></td>
<td><input type="text" value="19-11-1950" /></td>
</tr>
<tr>
<th>9</th>
<td><input type="text" value="Linus" /></td>
<td><input type="text" value="980227" /></td>
<td><input type="text" value="11-02-2002" /></td>
</tr>
<tr>
<th>10</th>
<td><input type="text" value="Marc" /></td>
<td><input type="text" value="890227" /></td>
<td><input type="text" value="16-09-1967" /></td>
</tr>
<tr>
<th>11</th>
<td><input type="text" value="Bill" /></td>
<td><input type="text" value="940227" /></td>
<td><input type="text" value="21-01-1933" /></td>
</tr>
<tr>
<th>12</th>
<td><input type="text" value="Ronald" /></td>
<td><input type="text" value="960227" /></td>
<td><input type="text" value="12-08-1991" /></td>
</tr>
<tr>
<th>13</th>
<td><input type="text" value="Paul" /></td>
<td><input type="text" value="920227" /></td>
<td><input type="text" value="25-07-1960" /></td>
</tr>
<tr>
<th>14</th>
<td><input type="text" value="Carlos" /></td>
<td><input type="text" value="910227" /></td>
<td><input type="text" value="31-03-1999" /></td>
</tr>
<tr>
<th>15</th>
<td><input type="text" value="Peter" /></td>
<td><input type="text" value="950227" /></td>
<td><input type="text" value="29-02-2000" /></td>
</tr>
<tr>
<th>16</th>
<td><input type="text" value="Arnold" /></td>
<td><input type="text" value="960227" /></td>
<td><input type="text" value="27-04-1988" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
/*
* Setting plugins...
*/
__DDI__.setPlugin('dragStateAsCursor');
__DDI__.setPlugin('draggedElementTip');
__DDI__.setPlugin('fixNoMouseSelect');
__DDI__.setPlugin('lockCursorAsDefault');
__DDI__.setPlugin('resizeIT');
__DDI__.setPlugin('moveIT');
/*
* create vertical bar to show where column will be moved
*/
function createVerticalBar (el,height) {
var vb = document.createElementExt('DIV',null,null,[['position','absolute'],
['width','3px'],
['height',height+'px'],
['backgroundColor','blue'],
['display','none']]);
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(vb);
el.__MyVerticalBar = vb;
}
/*
* allow drop for header bar
*/
function allowHeaderBarDragEnter(e) {
if (e.__target.tagName.toLowerCase() != 'th') return false;
var el = e.__dataTransfer.getData('domnode')
if (el.tagName.toLowerCase() == 'th') e.__dataTransfer.dropEffect = 'move';
else return false;
if (!e.__currentTarget.__MyVerticalBar) {
createVerticalBar(e.__currentTarget,e.__target.offsetHeight);
}
return true;
}
function allowHeaderBarDragOver(e) {
var el = e.__dataTransfer.getData('domnode')
if (el.tagName.toLowerCase() != 'th' || e.__target.innerHTML == 'Item') return false;
if (el.tagName.toLowerCase() == 'th') e.__dataTransfer.dropEffect = 'move';
else return;
e.__currentTarget.__lastTarget = e.__target;
if (!e.__currentTarget.__MyVerticalBar) createVerticalBar(e.__currentTarget,e.__target.offsetHeight);
e.__currentTarget.__MyVerticalBar.style.display = 'block';
e.__currentTarget.__MyVerticalBar.style.top = e.__targetOffsetY+'px';
e.__currentTarget.__MyVerticalBar.style.left = e.__pageX<(e.__targetOffsetX+e.__target.offsetWidth/2)
?(e.__targetOffsetX+'px')
:(e.__targetOffsetX+e.__target.offsetWidth+'px');
}
function allowHeaderBarDrop(e) {
var el = e.__dataTransfer.getData('domnode')
var lt = e.__currentTarget.__lastTarget;
if (el != lt && lt.innerHTML != 'Item') {
var lci = el.cellIndex;
var target = e.__pageX<(lt.__offsetX+lt.offsetWidth/2)
?(lt)
:(lt.cellIndex>=lt.parentNode.cells.length?lt:lt.parentNode.cells[lt.cellIndex+1])
var cci = target!=null?target.cellIndex:lt.parentNode.cells.length;
e.__currentTarget.insertBefore(el,target?target:null);
var table = el.parentNode.parentNode.parentNode;
var tr = table.getElementsByTagName('tr');
var trL = tr.length;
var tdL, ttd, td, tri;
for (var i=0; i<trL; i++) {
tri = tr[i];
td = tri.getElementsByTagName('td');
tdL = td.length;
if (tdL == 0) continue;
tri.insertBefore(tri.cells[lci],tri.cells[cci]?tri.cells[cci]:null);
}
}
return false;
}
function allowHeaderBarDragEnd(e) {
if (e.__currentTarget.__MyVerticalBar) {
e.__currentTarget.__MyVerticalBar.removeNode(true);
e.__currentTarget.__MyVerticalBar = null;
}
}
var el = document.getElementById('headerBar');
el.__onDragEnter = allowHeaderBarDragEnter;
el.__onDragOver = allowHeaderBarDragOver;
el.__onDrop = allowHeaderBarDrop;
el.__onDragEnd = allowHeaderBarDragEnd;
/*
* allow drag for heading
*/
function handleHeadDragStart (e) {
e.__dataTransfer.setData('domnode',e.__currentTarget);
e.__dataTransfer.effectAllowed = 'move';
__DDI__.disablePlugin('dragStateAsCursor');
return true;
}
function handleHeadDragEnd (e) {
__DDI__.enablePlugin('dragStateAsCursor');
}
/*
* allow resize for heading
*/
function allowHeadResizeHoriz (e) {
/*
* flag here that it's only drag
*/
return {'x':true,'y':false}
}
function handleHeadResizeStart (e) {
return true;
}
function handleHeadResize (e) {
var ct = e.__currentTarget;
var tbody = ct.parentNode.parentNode.parentNode.getElementsByTagName('TBODY')[0];
var tr = tbody.rows;
var trL = tr.length;
for (var i=0; i<trL; i++) {
tr[i].cells[ct.cellIndex].style.width = ct.style.width
}
return {'x' : { 'resize': true,
'min' : '40',
'max' : '200'
},
'y' : { 'resize' : false}
}
}
var thead = document.getElementsByTagName('thead')[0];
var th = thead.getElementsByTagName('th');
var thL = th.length;
for (var i = 0; i<thL; i++) {
th[i].__onResizeBefore = allowHeadResizeHoriz;
th[i].__onResize = handleHeadResize;
th[i].__onResizeStart = handleHeadResizeStart;
if ('Item' != th[i].innerHTML) {
th[i].__onDragStart = handleHeadDragStart;
th[i].__onDragEnd = handleHeadDragEnd;
} else {
th[i].__onDragStart = function (e) {
if (e.__target.style.cursor != '')
return true;
else
return false;
}
}
}
/*
* make table movable
*/
function allowTableMoveStart (e) {
/*
* Table could be moved using 'Item' bar only.
*/
if (e.__target.innerHTML != 'Item') return false;
}
/*
* Checks constraits and tells moveIT plugin how it can move window
*/
function allowTableMove (e) {
var r = { 'x' : { 'move' : true,
'min' : null,
'max' : null
},
'y' : { 'move' : true,
'min' : null,
'max' : null
}
};
return r;
}
var tbl = document.getElementsByTagName('table')[0];
tbl.__onDragStart = function (e) {
if (e.__target.innerHTML != 'Item') return false;
e.__dataTransfer.effectAllowed = 'none';
return true;
}
tbl.__onMoveStart = allowTableMoveStart;
tbl.__onMove = allowTableMove;
</script>
</body>
</html>
nav_ddi.1.5.2.all-in-one.zip 
