我做的reportview代码放出

[guliang]

Report View Control 1.0
file list:
reportview.jsp
reportview.css
sample.html
--------------------------------------------------------
//reportview.jsp

///////////////////////////////////////////////////
/////// Report View Control 1.0
///////////////////////////////////////////////////
//Author : guliang
//Last modified at : 2002-10-23
///////////////////////////////////////////////////
document.writeln('<link rel="stylesheet" href="reportview.css">');
//Construct function
//id: must same as new obj name
function ReportView(id,width,height,lineType,ReadOnly,MultLine,Fixed)
{
//Properties
this.id = "";
if (id!="")
{
this.id = id;
}
this.headLayerId = this.id + "_HeadLayer";
this.headTableId = this.id + "_HeadTable";
this.contentLayerId = this.id + "_ContentLayer";
this.contentTableId = this.id + "_ContentTable";

this.bgColor = "#FFFFFF";
this.fontColor = "#3300CC";
this.selectFontColor="#FFFFFF";
this.selectBgColor="#000000";

this.width = 200;
this.height = 200;

this.lineType = "NOLINE";//NOLINE VLINE VHLINE
this.bReadOnly = false;//true:READONLY ;false:WRITE
this.bMultLine = false;//true:MultLine ;false:SingleLine
this.Fixed = "auto";//true:col width could not changed ;false:col width can exceeded by data
this.selectLineNumber = -1;//select line number(get)


//Methods
this.setTitle=setTitle;

this.addLine=addLine;
this.addLines=addLines;
this.delLine=delLine;
this.getLine=getLine;//get line obj
this.getCell=getCell;//get cell obj
this.onSelect=onSelect;
// this.onDoubleClick=onDoubleClick;
this.getSelectLineNumber=getSelectLineNumber;
this.appendOnSelect=appendOnSelect;
this.setValue=setValue;
this.getValue=getValue;
this.getLinesNumber=getLinesNumber;//get number of data lines

//init
if (typeof(lineType)!="undefined" && (lineType.toUpperCase()=="NOLINE" || lineType.toUpperCase()=="VLINE" || lineType.toUpperCase()=="VHLINE"))
{
this.lineType = lineType.toUpperCase();
}
if (width > 0)
{
this.width = width;
}
if (height > 0)
{
this.height = height;
}
if (typeof(ReadOnly)!="undefined" && ReadOnly.toUpperCase() != "WRITE")
{
this.bReadOnly = true;
this.bgColor = "#CCCCCC";
}
if (typeof(MultLine)!="undefined" && MultLine.toUpperCase() == "MULTLINE")
{
this.bMultLine = true;
}
if (typeof(Fixed)!="undefined" && Fixed.toUpperCase() == "FIXED")
{
this.Fixed = "fixed";
}

//create titlebar
document.writeln('<TABLE border="1" class="reportview" id="' + this.id + '"><TR><TD>');
document.writeln('<DIV id="'+ this.headLayerId +'" style=" width:'+ this.width +';position: absolute; z-index:2">');
document.writeln(' ');
document.writeln('</DIV>');
//create content
document.writeln('<DIV id="' + this.contentLayerId + '" style="width:'+ this.width +';height:'+ this.height +';background-color:'+ this.bgColor +';overflow-x:auto;overflow-y:scroll; z-index:1;">');
document.writeln('</DIV>');
document.writeln('</TD></TR></TABLE>');

//Objects
this.headLayer = document.all[this.headLayerId];
this.contentLayer = document.all[this.contentLayerId];

//Properties(private)
this.appendOnSelectCmd= "";

//Methods(private)
this.fitTab=fitTab;
this.headingUpdate=headingUpdate;
this.synchronizeHeader=synchronizeHeader;
this.findPosX=findPosX;
}

//set title content and table width
function setTitle(str,tableWidth)
{
if (str=="")
{
str='<td> </td>';
}
if(typeof(tableWidth)=="undefined" || tableWidth<=0)
{
tableWidth = this.width;
}
else if (tableWidth>0 && tableWidth<this.width)
{
this.width = tableWidth;
}
// alert(tableWidth);
tbStr = '<TABLE id="'+ this.headTableId +'" border="0" cellpadding="2" cellspacing="0" style="table-layout:' + this.Fixed + '" class="lable">';
// tbStr += '<TR>';
tbStr += str;
// tbStr += '</TR>';
tbStr += '</TABLE>'
this.headLayer.innerHTML = tbStr;
//obj
this.headTable = document.all[this.headTableId];

tbStr = '<TABLE cellpadding="2" cellspacing="0" id="'+ this.contentTableId +'" class="'+ this.lineType +'" bgcolor="'+ this.bgColor +'" style="table-layout:'+ this.Fixed +'" onclick="'+this.id+'.onSelect()">';// style="table-layout:fixed" ondblclick="'+this.id+'.onDoubleClick()"
tbStr += str;
tbStr += '</TABLE>'
this.contentLayer.innerHTML = tbStr;
//obj
this.contentTable = document.all[this.contentTableId];

this.contentTable.rows[0].height = this.headTable.rows[0].offsetHeight;


//set content table width
document.all[this.contentTableId].style.width = tableWidth;

//adding scrollBar width to the dataContainer div
document.all[this.contentLayerId].style.width = document.all[this.contentTableId].offsetWidth + getScrollBarWidth ();

//adding scrollBar width to the headContainer div
document.all[this.headLayerId].style.width = document.all[this.contentTableId].offsetWidth;

this.fitTab();
// this.synchronizeHeader();
//attach scroll even to content layer
document.all[this.contentLayerId].attachEvent("onscroll",new Function(this.id+'.headingUpdate()'));
//attach even to content layer
document.all[this.contentTableId].attachEvent("onselectstart",cancelSelect);

}

//下一贴继续

[guliang]

function cancelSelect()//disable text select when select line
{
if (event.ctrlKey || event.shiftKey)
{
event.cancelBubble=true;
event.returnValue = false;
}
}

function addLine(lineNumber)
{
if (typeof(lineNumber)=="undefined")
{
lineNumber = -1;
}
lineNumber = lineNumber+1;
var contentTable = document.all[this.contentTableId];
tdNumber = this.headTable.rows[0].cells.length;


trNumber = contentTable.rows.length;
var newTr;
if (lineNumber<=0 || lineNumber>trNumber)
{
//add to the end line
newTr = contentTable.insertRow(trNumber);
lineNumber = trNumber;
// newTr.attachEvent("onclick",new Function(this.id+".onSelect()"));
}
else
{
//insert line
newTr = contentTable.insertRow(lineNumber);
}
for(j=0;j<tdNumber;j++)
{
//alert("cell"+j+"="+t1.rows[0].cells[j].style.textAlign);
newTd = newTr.insertCell();
newTd.innerHTML = " ";
newTd.noWrap = true;
if (document.all[this.headTableId].rows[0].cells[j].style.textAlign=="left")
{
contentTable.rows[lineNumber].cells[j].style.textAlign="left";
}
else if (document.all[this.headTableId].rows[0].cells[j].style.textAlign=="right")
{
contentTable.rows[lineNumber].cells[j].style.textAlign="right";
}
else if (document.all[this.headTableId].rows[0].cells[j].style.textAlign=="center")
{
contentTable.rows[lineNumber].cells[j].style.textAlign="center";
}
else
{
contentTable.rows[lineNumber].cells[j].style.textAlign=document.all[this.headTableId].rows[0].style.textAlign;
}
}
if (lineNumber-1<=this.selectLineNumber)
{
// alert((lineNumber-1)+"/"+this.selectLineNumber);
this.selectLineNumber++;
}
return lineNumber-1;
}

//add multi Line to the end line
function addLines(lineNumber)
{
var contentTable = document.all[this.contentTableId];
tdNumber = contentTable.rows[0].cells.length;
// alert(contentTable.rows.length);
trNumber = contentTable.rows.length+lineNumber;
for(i=contentTable.rows.length;i<trNumber;i++)
{
newTr = contentTable.insertRow();
for(j=0;j<tdNumber;j++)
{
//alert("cell"+j+"="+t1.rows[0].cells[j].style.textAlign);
newTd = newTr.insertCell();
newTd.innerHTML = " ";
newTd.noWrap = true;

if (contentTable.rows[0].cells[j].style.textAlign=="center")
{
contentTable.rows[i].cells[j].style.textAlign="center";
}
else if (contentTable.rows[0].cells[j].style.textAlign=="right")
{
contentTable.rows[i].cells[j].style.textAlign="right";
}
else if (contentTable.rows[0].cells[j].style.textAlign=="center")
{
contentTable.rows[i].cells[j].style.textAlign="center";
}
else
{
contentTable.rows[i].cells[j].style.textAlign=document.all[this.headTableId].rows[0].style.textAlign;
}
}
}

}

//下一贴继续

[guliang]

function delLine(lineNumber)
{
lineNumber++;
Rows = this.contentTable.rows.length;
if (lineNumber>0 && lineNumber<Rows)
{
this.contentTable.deleteRow(lineNumber);
this.selectLineNumber=-1;
this.synchronizeHeader();
return true;
}
return false;
}

function getLine(lineNumber)
{
lineNumber++;
Rows = this.contentTable.rows.length;
if (lineNumber>0 && lineNumber<Rows)
{
return this.contentTable.rows[lineNumber];
}
return null;
}

function getCell(lineNumber,cellNumber)
{
lineNumber++;
Rows = this.contentTable.rows.length;
if (lineNumber>0 && lineNumber<Rows)
{
Cells= this.contentTable.rows[lineNumber].cells.length;
if (cellNumber>=0 && cellNumber<Cells)
{
return this.contentTable.rows[lineNumber].cells[cellNumber];
}
}
return null;
}

function appendOnSelect(strCmd)
{
this.appendOnSelectCmd = strCmd;
}

function onSelect(lineNumber)
{

// alert("onclick");
var contentTable = document.all[this.contentTableId];
obj=event.srcElement;
for (i = 0; i <10 ; i++)
{
if (obj.tagName=="TR")
{
break;
}
obj = obj.parentElement;
}
if (i>=10)
{
return;
}
Rows = contentTable.rows.length;
// alert(Rows);
if (this.bMultLine==false || (event.ctrlKey==false && event.shiftKey==false)
|| this.selectLineNumber<0 || this.selectLineNumber+1>=contentTable.rows.length)
{
for(i=0;i<Rows;i++)
{
contentTable.rows[i].style.backgroundColor = this.bgColor;
contentTable.rows[i].style.color = this.fontColor;
}
contentTable.rows[obj.sectionRowIndex].style.color = this.selectFontColor;
contentTable.rows[obj.sectionRowIndex].style.backgroundColor = this.selectBgColor;
this.selectLineNumber = obj.sectionRowIndex-1;
}
else//multline
{
if (event.ctrlKey==true)
{
if (obj.style.backgroundColor == this.selectBgColor)
{//unselect line
obj.style.backgroundColor = this.bgColor;
obj.style.color = this.fontColor;
if (this.getSelectLineNumber().length==0)
{
this.selectLineNumber = -1;
}
}
else
{//select line
obj.style.color = this.selectFontColor;
obj.style.backgroundColor = this.selectBgColor;
this.selectLineNumber = obj.sectionRowIndex-1;
}
}
if (event.shiftKey==true)
{
x=this.selectLineNumber+1;
y=obj.sectionRowIndex;
if (x>y)
{
x=obj.sectionRowIndex;
y=this.selectLineNumber+1;
}
for (i = x; i <= y; i++)
{
contentTable.rows[i].style.color = this.selectFontColor;
contentTable.rows[i].style.backgroundColor = this.selectBgColor;
}
}
}

//append onClick event
eval(this.appendOnSelectCmd);
}


//if multline mode ,return a array of selected line number
function getSelectLineNumber()
{
if (this.bMultLine)
{
var contentTable = document.all[this.contentTableId];
Rows = contentTable.rows.length;
var selectedLines = 0;
var strNumbers = "";
for(i=1;i<Rows;i++)
{
if (contentTable.rows[i].style.backgroundColor == this.selectBgColor)
{
selectedLines++;
strNumbers+= (i-1)+";";
}
}
if (selectedLines==0)
{
return new Array(0);
}
// var arr = new Array(selectedLines);
if (selectedLines>0)
{
arr = strNumbers.split(';');
arrt= new Array(arr.length-1);
for (i = 0; i < arr.length-1; i++)
{
arrt[i] = parseInt(arr[i]);
}
return arrt;
}
}
else
{
if(typeof(this.selectLineNumber)=="undefined")
{
this.selectLineNumber = -1;
}
return this.selectLineNumber;
}
}

//下一贴继续

[guliang]

function setValue(rowIndex,cellIndex,value,align)
{
if (rowIndex+1>=this.contentTable.rows.length || rowIndex<0)
{
return false;
}
if (cellIndex>=this.contentTable.rows[rowIndex].cells.length || cellIndex<0)
{
return false;
}
cell = this.contentTable.rows[rowIndex+1].cells[cellIndex];
if(typeof(value)=="undefined")
{
value = " ";
}
value = value.toString();
if (value == "")
{
value=" ";
}
if (this.bReadOnly==false)
{
cell.innerHTML = value;
}
else
{
cell.innerHTML = value;
}
if (typeof(align)!="undefined")
{
if (align.toUpperCase() == "LEFT")
{
cell.style.textAlign = "left";
}
else if (align.toUpperCase() == "CENTER")
{
cell.style.textAlign = "center";
}
else if (align.toUpperCase() == "RIGHT")
{
cell.style.textAlign = "right";
}
}
return true;
}

function getValue(rowIndex,cellIndex)
{
if (rowIndex+1>=this.contentTable.rows.length || rowIndex<0)
{
return null;
}
if (cellIndex>=this.contentTable.rows[rowIndex+1].cells.length || cellIndex<0)
{
return null;
}
value = this.contentTable.rows[rowIndex+1].cells[cellIndex].innerHTML;
return value;
}

function getLinesNumber()
{
return this.contentTable.rows.length-1;
}

function findPosX (obj)
{
var curleft = 0;

// go into a loop that continues as long as the object has an offsetParent
while (obj.tagName!="BODY")
{
// add the offsetLeft of the element relative to the offsetParent to curleft and set the object to this offsetParent
if(obj.border)
{
curleft += parseInt(obj.offsetLeft)+parseInt(obj.border);
}
else if (obj.tagName=="FIELDSET")
{
curleft += parseInt(obj.offsetLeft)+2;
}
else
{
curleft += obj.offsetLeft

}
obj = obj.offsetParent;
}
return curleft - document.all[this.id].border;
}

// reading the scrollBars width (depending on the OS settings).
function getScrollBarWidth ()
{
try
{
var elem = document.createElement("DIV");
elem.id = "asdf";
elem.style.width = 100;
elem.style.height = 100;
elem.style.overflow = "scroll";
elem.style.position = "absolute";
elem.style.visibility = "hidden";
elem.style.top = "0";
elem.style.left = "0";

document.body.appendChild (elem);

scrollWidth = document.all['asdf'].offsetWidth - document.all['asdf'].clientWidth;

document.body.removeChild (elem);
delete elem;
}
catch (ex)
{
return false;
}

return scrollWidth;
}

// setting the table width and cutting the header as it is necesarry
function fitTab ()
{
document.all[this.contentLayerId].style.width = this.width + getScrollBarWidth();
document.all[this.headLayerId].style.clip = "rect (auto, " + this.width + "px,auto, auto)";
}

// synchronize the header when horizontal scrolling
function headingUpdate()
{
document.all[this.headLayerId].style.clip = "rect (auto,"+(this.width+document.all[this.contentLayerId].scrollLeft)+"px, auto,"+document.all[this.contentLayerId].scrollLeft+")";
document.all[this.headLayerId].style.pixelLeft = -document.all[this.contentLayerId].scrollLeft + this.findPosX(document.all[this.contentTableId])+document.all[this.headLayerId].clientLeft;
}


// function that synchronize adjust header's width
function synchronizeHeader ()
{
colNum = this.contentTable.rows[0].cells.length;
var fixed = 0;
if (this.Fixed.toUpperCase() != "FIXED")
{
fixed = 1+this.contentTable.cellPadding*2;//Why? I have no idea, I determined this value experimentally
}
for (var j = 0; j < colNum; j++)
{
this.headTable.rows[0].cells[j].style.pixelWidth = this.contentTable.rows[0].cells[j].offsetWidth-fixed;
}
this.headTable.style.pixelWidth = this.contentTable.offsetWidth;
}

[gugoo]

//reportview.css

table.reportview{border-width:1px;border-collapse:collapse;border-color:#000000}
table.lable td
{background-color:#aaaaaa;color:#000000;font-size:11pt;border-bottom:1px solid black;border-right:1px solid black;
border-top:0px solid lavender;border-left:0px solid lavender;
border-color:#000000}
table.noline tr,table.vline tr,table.vhline tr{color:#3300CC;font-size:11pt;cursor:default}
table.noline td,table.vline td,table.vhline td{overflow:fixed;}
table.vline td
{border-bottom:0px solid #808080;border-right:1px solid #808080;
border-top:0px solid #808080;border-left:0px solid #808080;
border-color:#808080}
table.vhline td
{border-bottom:1px solid #808080;border-right:1px solid #808080;
border-top:0px solid #808080;border-left:0px solid #808080;
border-color:#808080}

[gugoo]

奇怪，原来的id不能贴了，只好换个id来贴。

//sample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> my reportview </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="guliang">
<!-- <link rel="stylesheet" href="reportview.css"> -->
<SCRIPT LANGUAGE="JavaScript" src="reportview.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>
<style type="text/css">
<!--
-->
</style>
<INPUT TYPE="hidden" NAME="lineno">
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//note:
// myReportView PLEASE SAME AS THE NEW OBJ NAME!!!
// WRITE/READONLY is no truely mean here,only change the background of reportview now
// SINGLELINE/MULTLINE used for line select
// AUTO/FIXED AUTO:col width can exceeded by data;FIXED:col width could not changed ;
myReportView = new ReportView("myReportView",300,200,"VHLINE","WRITE","MULTLINE","AUTO");
//-->
</SCRIPT>
<br>
<INPUT TYPE="button" NAME="add" value="add line" onclick="onAddLine()">  
<INPUT TYPE="button" NAME="del" value="del line" onclick="onDelLine()">

<SCRIPT LANGUAGE="JavaScript">
<!--//please add this at the end of the file,or use onload function
//set title cells(must use this function first)
myReportView.setTitle('<COL STYLE="DISPLAY:"></COL><COL></COL><COL></COL><TR style="text-align:center"><td style="width:50;text-align:center">t0</td><td style="width:100;text-align:center">t1</td><td style="width:250;">t2</td></TR>',400);//content width,default = width of reportview control
//add blank lines to the reportview
myReportView.addLines(5);
//myReportView.addLine(i);//add/insert one line at position i
//setvalue
for(i=0;i<5;i++)
{
myReportView.setValue(i,0,i,"left");
myReportView.setValue(i,1,"t1","right");
myReportView.setValue(i,2,"t2");
// myReportView.setValue(i,0);//set this cell to blank
}

//synchronize title cells width with content cells width
myReportView.synchronizeHeader();

function onAddLine()
{
lineNumber = myReportView.selectLineNumber;
trueLineNumber = myReportView.addLine(lineNumber);
//set cells align
myReportView.setValue(trueLineNumber,0,"","left");
myReportView.setValue(trueLineNumber,1,"","right");
//update the date
updateIndexDate();
}

function onDelLine()
{
if(myReportView.selectLineNumber==-1)
{
return;
}
if(myReportView.bMultLine)
{
arr = myReportView.getSelectLineNumber();
for(i=arr.length-1;i>=0;i--)
{
myReportView.delLine(arr[i]);
}
}
else
myReportView.delLine(myReportView.getSelectLineNumber());
//update the date
updateIndexDate();
}

function updateIndexDate()
{
for (i=0;i<myReportView.getLinesNumber();i++)
{
myReportView.setValue(i,0,i);
}
//synchronize title cells width with content cells width
myReportView.synchronizeHeader();
}

//custum function,auto insert input box when double-click the cell
function onDblClick()
{
elm = event.srcElement;
if (elm.tagName != "TD" || elm.cellIndex==0) return;
elm.innerHTML = "<input onblur='hide()' class='inputintable' value='"+elm.innerText+"' style='width:100%' id='input1'></input>";
input1.style.textAlign = elm.style.textAlign;
input1.focus();
input1.select();
}
function hide()
{
// elm = event.srcElement;
// elm.parentNode.innerHTML = elm.value;
if(input1.value.search(/^\s*$/)==0)
{
input1.value=" ";
}
input1.parentElement.innerHTML = input1.value;
myReportView.synchronizeHeader();

}

//attach double-click event to reportview
myReportView.contentTable.attachEvent("ondblclick",onDblClick);

//-->
</SCRIPT>
</BODY>
</HTML>

[gugoo]

这个reportview实现了类似微软reportview标准控件的功能，还不是很完善。
大家可以随意修改使用本代码，愿意的话就把作者信息留着，无所谓啦。
在作者个reportview的时候，得到了csdn上许多人朋友的帮助，在这里一并感谢了！
我没有时间写详细的帮助了，有兴趣的朋友可以参考源代码整理一下，在发表过。

一般情况下我不会在更新代码了，如果有什么问题，可以在这里发贴子，我有时间的会看的。

[kendison]

打印功能的代码以后提不提供啊？

[gugoo]

补充说明一下，reportview 允许扩展onselect事件响应，函数是appendOnSelect（strCmd）
动态得到选中行号的示例：
1，在上面的例子里加个input控件，
selected line<INPUT TYPE="text" NAME="curLineNo" size="5">

2，在上面的例子的最下面的脚本后加上，
strCmd = "window.curLineNo.value = this.selectLineNumber";
myReportView.appendOnSelect(strCmd);
这个简单的例子只可以得到单选的行号，要得到多选时的行号，大家看代码吧，里面有支持了。

[gugoo]

打印的功能没有考虑过，用浏览器自己的不行吗？没测试过。。。

[guliang]

自己UP一下。

[一声雷响老子闪亮登场]

好长 啊！看的眼花 ！