当前页面: 开发资料首页 → Javascript 专题 → JavaScript实现的数据表格:冻结列、调整列宽和客户端排序
摘要: JavaScript实现的数据表格:冻结列、调整列宽和客户端排序
根据网上的一些脚本改的,大家看一下,应该对开发有用,准备在.Net下写个Server-Side端控件
把下面的代码另存为.htm文件后看下效果。
<head>
//记录每次右击的列的索引。
var columnRC = 0
//记录被单击过的行的索引。
var rowC = -1;
function SetRowColor(sRowIndex, sColor)
{
for(i=0;i
for(i=0;i
}
function ResetRowColor(sRowIndex)
{
var sColor = null;
if (sRowIndex % 2 ==0)
sColor = RowColor;
else
sColor = RowAlternativeColor;
SetRowColor(sRowIndex, sColor);
}
function SortTableAsc()
{
var cTitle=DataTitles[columnRC].split("#");
switch(cTitle[3])
{
case "文本" :
alert("暂时不支持文本排序!汉字的拼音问题尚未解决!");
break;
case "数值" :
var minIndex = 0;
var tempArray = new Array();
for(i=0;i
minIndex = i;
var leftMin = parseFloat(DataFields[i][columnRC]);
for(j=i+1;j
if (leftMin>parseFloat(DataFields[j][columnRC]))
{
leftMin = parseFloat(DataFields[j][columnRC]);
minIndex = j;
}
}
if (minIndex != i)
{
for(h=0;h
tempArray[h] = DataFields[i][h];
DataFields[i][h] = DataFields[minIndex][h];
DataFields[minIndex][h] = tempArray[h];
}
}
}
ApplyData();
break;
case "日期" :
var minIndex = 0;
var tempArray = new Array();
for(i=0;i
//日期必须是yyyy-mm-dd格式的。
minIndex = i;
var leftMin = DataFields[i][columnRC].split("-");
for(j=i+1;j
var currentDate = DataFields[j][columnRC].split("-");
if ( ( parseInt(leftMin[0]) > parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) > parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) > parseInt(currentDate[2]) ) ) )
{
leftMin[0] = currentDate[0];
leftMin[1] = currentDate[1];
leftMin[2] = currentDate[2];
minIndex = j;
}
}
if (minIndex != i)
{
for(h=0;h
tempArray[h] = DataFields[i][h];
DataFields[i][h] = DataFields[minIndex][h];
DataFields[minIndex][h] = tempArray[h];
}
}
}
ApplyData();
break;
}
}
function SortTableDesc()
{
var cTitle=DataTitles[columnRC].split("#");
switch(cTitle[3])
{
case "文本" :
alert("暂时不支持文本排序!汉字的拼音问题尚未解决!");
break;
case "数值" :
var minIndex = 0;
var tempArray = new Array();
for(i=0;i
minIndex = i;
var leftMin = parseFloat(DataFields[i][columnRC]);
for(j=i+1;j
if (leftMin
leftMin = parseFloat(DataFields[j][columnRC]);
minIndex = j;
}
}
if (minIndex != i)
{
for(h=0;h
tempArray[h] = DataFields[i][h];
DataFields[i][h] = DataFields[minIndex][h];
DataFields[minIndex][h] = tempArray[h];
}
}
}
ApplyData();
break;
case "日期" :
var minIndex = 0;
var tempArray = new Array();
for(i=0;i
//日期必须是yyyy-mm-dd格式的。
minIndex = i;
var leftMin = DataFields[i][columnRC].split("-");
for(j=i+1;j
var currentDate = DataFields[j][columnRC].split("-");
if ( ( parseInt(leftMin[0]) < parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) < parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) < parseInt(currentDate[2]) ) ) )
{
leftMin[0] = currentDate[0];
leftMin[1] = currentDate[1];
leftMin[2] = currentDate[2];
minIndex = j;
}
}
if (minIndex != i)
{
for(h=0;h
tempArray[h] = DataFields[i][h];
DataFields[i][h] = DataFields[minIndex][h];
DataFields[minIndex][h] = tempArray[h];
}
}
}
ApplyData();
break;
}
}
function WriteTable(){ // 写入表格
var iBoxWidth=BoxWidth
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\
<td>
var NewHTML="<table id=\"rightTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i
NewHTML+="<tr bgcolor=\"" + RowColor + "\">"
else
NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">"
for(j=0;j
var cTitle=DataTitles[j].split("#")
NewHTML+="<td>
}
}
NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup2.innerHTML=NewHTML
DataFrame1.style.pixelHeight=RsHeight*ShowLine
DataFrame2.style.pixelHeight=RsHeight*ShowLine
DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight
DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1)
}
function ResetTable(){
var iBoxWidth=0
for(i=0;i
var cTitle=DataTitles[i].split("#")
iBoxWidth+=parseInt(cTitle[1])
}
}
if(iBoxWidth>BoxWidth){
var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽 \n\n度,这可能会造成版面显示不正常。\n\n\n您确定要继续吗?")
}else{
Sure=true
}
if(Sure){
LockCols=(LockCols==columnRC+1)?0:columnRC+1
WriteTable()
}
}
function SYNC_Roll(){
DataGroup1.style.posTop=-DataFrame3.scrollTop
DataGroup2.style.posTop=-DataFrame3.scrollTop
}
function clickColor()
{
try
{
var oEl = event.srcElement;
if (oEl)
if (oEl.tagName == "DIV")
{
try
{
oEl = oEl.parentElement.parentElement;
}
catch (e)
{
return;
}
}
if (oEl.tagName == "TD")
oEl = oEl.parentElement;
var sindex = oEl.rowIndex;
SetRowColor(sindex, RowSelectedColor);
if (rowC >= 0)
if (rowC != sindex)
ResetRowColor(rowC);
rowC = sindex;
}
catch (e)
{}
}
function overcolor()
{
var oEl = event.srcElement;
if (oEl)
if (oEl.tagName == "DIV")
{
try
{
oEl = oEl.parentElement.parentElement;
}
catch (e)
{
return;
}
}
if (oEl.tagName == "TD")
oEl = oEl.parentElement;
var sindex = oEl.rowIndex;
if (rowC >= 0)
if (sindex == rowC)
return;
SetRowColor(sindex, RowMouseOverColor);
}
function outcolor()
{
var oEl = event.srcElement;
if (oEl)
if (oEl.tagName == "DIV")
{
try
{
oEl = oEl.parentElement.parentElement;
}
catch (e)
{
return;
}
}
if (oEl.tagName == "TD")
oEl = oEl.parentElement;
var sindex = oEl.rowIndex;
if (rowC >= 0)
if (sindex == rowC)
return;
ResetRowColor(sindex);
}
function HeadRightClick()
{
var ev = window.event;
var el = ev.srcElement;
if (el.tagName == "DIV")
{
showMenu(ev.clientX, ev.clientY);
ev.cancelBubble = true;
ev.returnValue = false;
var ep = el.parentElement;
columnRC = ep.cellIndex;
ep = el.parentElement.parentElement.parentElement.parentElement;
if (ep.tagName == "TABLE")
{
if (ep.id == "rightHead")
columnRC += LockCols;
}
}
}
function showMenu(x, y)
{
var intRightEdge = window.document.body.clientWidth - x;
var intBottomEdge = window.document.body.clientHeight - y;
var intScrollLeft = window.document.body.scrollLeft + x;
var intScrollTop = window.document.body.scrollTop + y;
if (intRightEdge < objHeadMenu.offsetWidth)
objHeadMenu.style.left = intScrollLeft - objHeadMenu.offsetWidth;
else
objHeadMenu.style.left = intScrollLeft;
if (intBottomEdge < objHeadMenu.offsetHeight)
objHeadMenu.style.top = intScrollTop - objHeadMenu.offsetHeight;
else
objHeadMenu.style.top = intScrollTop;
objHeadMenu.style.zIndex = 50;
objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)";
if (objHeadMenu.filters.blendTrans.status != 2)
{
objHeadMenu.filters.blendTrans.apply();
objHeadMenu.style.visibility = "visible";
objHeadMenu.filters.blendTrans.play();
}
}
function hideMenu()
{
objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)";
if (objHeadMenu.filters.blendTrans.status != 2)
{
objHeadMenu.filters.blendTrans.apply();
objHeadMenu.style.visibility = "hidden";
objHeadMenu.filters.blendTrans.play();
}
}
//加列宽
function SetCWP(valWidth)
{
var cTitle = DataTitles[columnRC].split("#");
var cWidth = parseInt(cTitle[1]) + parseInt(valWidth);
DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3];
WriteTable();
}
//减列宽
function SetCWM(valWidth)
{
var cTitle = DataTitles[columnRC].split("#");
var cWidth = parseInt(cTitle[1]) - parseInt(valWidth);
if (cWidth <= 0) return;
DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3];
WriteTable();
}
/*
右键菜单上的两个调整列宽的文本框的KeyDown事件,用于捕捉"Enter"时调整列宽并隐藏菜单
*/
function CWKeyDown()
{
if (event.keyCode == 13)
{
var oEl = event.srcElement;
if (oEl.id == "txtCWPlus")
SetCWP(txtCWPlus.value);
if (oEl.id == "txtCWMinus")
SetCWM(txtCWMinus.value);
hideMenu();
}
}
function createMenu()
{
var txtHTML = "
</script>
<script language="JavaScript" type="text/JavaScript">