如何用htc对datagrid的数据排序

Question

如何用htc对datagrid的数据排序

Answer 1

<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();" />
<public:attach  event=oncontentready onevent="doClick(e);" />
<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);
}

Answer 2

//找到所在的行，然后决定是否改变背景颜色
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
            }
        }
    }
}

Answer 3

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>

Answer 4

以上这个htc文件，datagrid里面运行，，datagrid可以单击标题达到排序的效果。现在本人想，对以上htc文件进行修改，使得datagrid一运行，datagrid自动按降序排序。
而用不着去单击。
本人对JS一点也不熟悉。有那位高手指点一下，帮我改一下。。谢啦