movegrid.htc
<public:event name="onrowselect" ID=rowSelect />
<public:property name="hlColor" />
<public:property name="slColor" />
<public:property name='dragColor' />
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<public:attach event=oncontentready onevent="init();" />
<script language=jscript>
var currRow = -1;
var selRow = -1;
if (element.tagName == 'TABLE')
{
element.attachEvent('onmouseover', onMouseOver);
element.attachEvent('onmouseout', onMouseOut);
element.attachEvent('onclick', onClick);
}
else
{
alert("错误");
}
function cleanup()
{
hilite(-1);
element.detachEvent('onmouseover', onMouseOver);
element.detachEvent('onmouseout', onMouseOut);
element.detachEvent('onclick', onClick);
}
function onClick()
{
srcElem = window.event.srcElement;
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.rowIndex == 0 ) return;
if (selRow != -1) selRow.runtimeStyle.backgroundColor = '';
srcElem.runtimeStyle.backgroundColor = slColor;
selRow = srcElem;
var oEvent = createEventObject();
oEvent.selected = selRow;
rowSelect.fire(oEvent);
}
//找到所在的行，然后决定是否改变背景颜色
function onMouseOver()
{
srcElem = window.event.srcElement;
//crawl up to find the row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if (srcElem.rowIndex > 0)
hilite(srcElem);
else
hilite(-1);
}
function onMouseOut()
{
hilite(-1, -1);
}
function hilite(newRow)
{
if (hlColor != null )
{
if (currRow != -1 && currRow!=selRow)
{
currRow.runtimeStyle.backgroundColor = '';
}
if (newRow != -1 && newRow!=selRow)
{
newRow.runtimeStyle.backgroundColor = hlColor;
}
}
currRow = newRow;
}
var tbody=null;
var theadrow=null;
var colCount = null;
var reverse = false;
var lastclick = -1;
var arrHitTest = new Array();
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
function init() {
var MytHead = element.createTHead();
MytHead.appendChild(element.rows[0]);
element.deleteRow(1);
tbody = element.tBodies(0);
if (!tbody) return;
var thead = element.tHead;
if (!thead) return;
theadrow = thead.children[0]; //假定只有一行Head
if (theadrow.tagName != "TR") return;
theadrow.runtimeStyle.cursor = "hand";
colCount = theadrow.children.length;
var l, clickCell;
var cx=0;
var cy=0;
var c;
for (var i=0; i<colCount; i++)
{
l=document.createElement("IMG");
l.src="sortBlank.gif";
l.id="srtImg";
l.width=25;
l.height=11;
clickCell = theadrow.children[i];
clickCell.selectIndex = i;
clickCell.insertAdjacentElement("beforeEnd", l)
clickCell.attachEvent("onclick", doClick);
arrHitTest[i] = new Array();
c = clickCell.offsetParent;
if(cx == 0 && cy == 0 )
{
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
arrHitTest[i][0] = cx + clickCell.offsetLeft;
arrHitTest[i][1] = cy + clickCell.offsetTop;
arrHitTest[i][2] = clickCell;
arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
clickCell.attachEvent("onmousedown",onMouseDown);
}
defaultTitleColor = theadrow.children[0].currentStyle.backgroundColor;
element.document.attachEvent("onmousemove",onMouseMove);
element.document.attachEvent("onmouseup",onMouseUp);
element.document.attachEvent("onselectstart",onSelect);
}
function doClick(e)
{
var clickObject = e.srcElement;
while (clickObject.tagName != "TD")
{
clickObject = clickObject.parentElement;
}
var imgcol= theadrow.all('srtimg');
for(var x = 0; x < imgcol.length; x++)
imgcol[x].src = "sortBlank.gif";
if(lastclick == clickObject.selectIndex)
{
if(reverse == false)
{
clickObject.children[0].src = "downarrow.gif";
reverse = true;
}
else
{
clickObject.children[0].src = "uparrow.gif";
reverse = false;
}
}
else
{
reverse = false;
lastclick = clickObject.selectIndex;
clickObject.children[0].src = "uparrow.gif";
}
insertionSort(tbody, tbody.rows.length-1, reverse, clickObject.selectIndex);
}
function insertionSort(t, iRowEnd, fReverse, iColumn)
{
var iRowInsertRow, iRowWalkRow, current, insert;
for ( iRowInsert = 0 + 1 ; iRowInsert <= iRowEnd ; iRowInsert++ )
{
if (iColumn) {
if( typeof(t.children[iRowInsert].children[iColumn]) != "undefined")
textRowInsert = t.children[iRowInsert].children[iColumn].innerText;
else
textRowInsert = "";
} else {
textRowInsert = t.children[iRowInsert].innerText;
}
for ( iRowWalk = 0; iRowWalk <= iRowInsert ; iRowWalk++ )
{
if (iColumn) {
if(typeof(t.children[iRowWalk].children[iColumn]) != "undefined")
textRowCurrent = t.children[iRowWalk].children[iColumn].innerText;
else
textRowCurrent = "";
} else {
textRowCurrent = t.children[iRowWalk].innerText;
}
current = textRowCurrent;
insert = textRowInsert;
if ( !isNaN(current) || !isNaN(insert))
{
current= eval(current);
insert= eval(insert);
}
else
{
current = current.toLowerCase();
insert = insert.toLowerCase();
}
if ( ( (!fReverse && insert < current)
|| ( fReverse && insert > current) )
&& (iRowInsert != iRowWalk) )
{
eRowInsert = t.children[iRowInsert];
eRowWalk = t.children[iRowWalk];
t.insertBefore(eRowInsert, eRowWalk);
iRowWalk = iRowInsert; // done
}
}
}
}
function InitHeader()
{
var cx=0;
var cy=0;
var c;
for (i=0; i<colCount ; i++) {
var clickCell = theadrow.children[i];
clickCell.selectIndex = i;
c = clickCell.offsetParent;
if(cx == 0 && cy == 0 )
{
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
arrHitTest[i][0] = cx + clickCell.offsetLeft;
arrHitTest[i][1] = cy + clickCell.offsetTop;
arrHitTest[i][2] = clickCell;
arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
}
}
function onSelect()
{
return false;
}
function ChangeHeader(iChange)
{
for(var y = 0; y < arrHitTest.length; y++)
{
if (arrHitTest[y][2].currentStyle.backgroundColor == dragColor)
arrHitTest[y][2].style.backgroundColor = defaultTitleColor;
}
if(iChange == "-1") return;
arrHitTest[iChange][2].style.backgroundColor = dragColor;
}
function onMouseUp(e)
{
if(!bDragMode) return;
bDragMode = false;
var iSelected = objDragItem.selectIndex;
objDragItem.removeNode(true);
objDragItem = null;
ChangeHeader(-1);
if( (iArrayHit - 1) < 0 || iSelected < 0) return;
CopyRow(iSelected, (iArrayHit - 1) );
iSelected = 0;
iArrayHit = -1;
}
function onMouseDown(e)
{
bDragMode = true;
var src = e.srcElement;
var c = e.srcElement;
while (src.tagName != "TD")
src = src.parentElement;
objDragItem = document.createElement("DIV");
objDragItem.innerHTML = src.innerHTML;
objDragItem.style.height = src.currentStyle.height;
objDragItem.style.width = src.currentStyle.width;
objDragItem.style.background = src.currentStyle.backgroundColor;
objDragItem.style.fontColor = src.currentStyle.fontColor;
objDragItem.style.position = "absolute";
objDragItem.selectIndex = src.selectIndex;
while (c.offsetParent != null)
{
objDragItem.style.y += c.offsetTop;
objDragItem.style.x += c.offsetLeft;
c = c.offsetParent;
}
objDragItem.style.borderStyle = "outset";
objDragItem.style.display = "none";
src.insertBefore(objDragItem);
}
function onMouseMove(e)
{
if(!bDragMode || !objDragItem) return;
var midWObj = objDragItem.style.posWidth / 2;
var midHObj = 12;
var intTop = e.clientY + element.document.body.scrollTop;
var intLeft = e.clientX + element.document.body.scrollLeft;
var cx=0,cy=0;
var elCurrent = objDragItem.offsetParent;
while (elCurrent.offsetParent != null) {
cx += elCurrent.offsetTop;
cy += elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
objDragItem.style.pixelTop = intTop - cx - midHObj;
objDragItem.style.pixelLeft = intLeft - cy - midWObj;
if(objDragItem.style.display == "none") objDragItem.style.display = "";
iArrayHit = CheckHit(intTop , intLeft , e);
e.cancelBubble = false;
e.returnValue = false;
}
function CheckHit(x,y,e)
{
midWObj = objDragItem.style.posWidth / 2;
midHObj = 12;
if( ((x) > (arrHitTest[0][1] + 20) ) || ( (x) < (arrHitTest[0][1]) ) )
{
ChangeHeader(-1);
return -1;
}
for(var i=0; i < colCount; i++)
{
if( (y) > (arrHitTest[i][0]) && (y) < (arrHitTest[i][3] )) //+ 100))
{
ChangeHeader(i);
return i + 1;
}
}
return -1;
}
function CopyRow(from, to)
{
if(from == to) return;
var origfrom = from;
var origto = to;
var iDiff = 0;
if( from > to )
{
iDiff = from - to;
var saveObj = theadrow.children[from].innerHTML;
var saveWidth = theadrow.children[from].width;
for(var i = 0 ; i < iDiff; i++)
{
theadrow.children[from].innerHTML = theadrow.children[from - 1].innerHTML;
theadrow.children[from].width = theadrow.children[from - 1].width;
from--;
}
theadrow.children[to].innerHTML = saveObj;
theadrow.children[to].width = saveWidth;
}
else
{
iDiff = to - from;
var saveObj = theadrow.children[from].innerHTML;
var saveWidth = theadrow.children[from].width;
for(var i = 0 ; i < iDiff; i++)
{
theadrow.children[from].innerHTML = theadrow.children[from + 1].innerHTML;
theadrow.children[from].width = theadrow.children[from + 1].width;
from++;
}
theadrow.children[to].innerHTML = saveObj;
theadrow.children[to].width = saveWidth;
}
for(var i = 0 ; i < theadrow.children.length; i++)
theadrow.children[i].selectIndex = i;
InitHeader();
for ( var iRowInsert = 0 ; iRowInsert < tbody.rows.length; iRowInsert++ )
{
from = origfrom;
to = origto;
if( from > to )
{
iDiff = from - to;
var saveObj = tbody.children[iRowInsert].children[from].innerHTML
for(var i = 0 ; i < iDiff; i++)
{
tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from - 1].innerHTML;
from--;
}
tbody.children[iRowInsert].children[to].innerHTML = saveObj;
}
else
{
iDiff = to - from;
var saveObj = tbody.children[iRowInsert].children[from].innerHTML
for(var i = 0 ; i < iDiff; i++)
{
tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from + 1].innerHTML;
from++;
}
tbody.children[iRowInsert].children[to].innerHTML = saveObj;
}
}
}
</script>
调用：
<%@ Page language="c#" Inherits="WebApplication1.WebForm1" CodeFile="WebForm1.aspx.cs" %>
<HTML>
<HEAD>
<title>MoveDataGrid</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" style="BEHAVIOR: url(movegrid.htc)" runat="server" BackColor="White"
BorderWidth="1px" BorderStyle="None" BorderColor="#CC9966" CellPadding="4" Font-Size="9pt">
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
</asp:DataGrid>
</form>
</body>
</HTML>
CIO之家 www.ciozj.com 公众号:imciow