我做的reportview代码放出

Question

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 = "&nbsp;";
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 = "&nbsp;";
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;
}
}
}}//下一贴继续

Answer 1

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;
}
}//下一贴继续

Answer 2

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 = "&nbsp;";
}
value = value.toString();
if (value == "")
{
value="&nbsp;";
}
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;
}

Answer 3

//reportview.csstable.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}

Answer 4

奇怪，原来的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()">&nbsp;&nbsp;
<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="&nbsp;";
}
input1.parentElement.innerHTML = input1.value;
myReportView.synchronizeHeader();}//attach double-click event to reportview
myReportView.contentTable.attachEvent("ondblclick",onDblClick);//-->
</SCRIPT>
</BODY>
</HTML>

Answer 5

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

Answer 6

补充说明一下，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);
这个简单的例子只可以得到单选的行号，要得到多选时的行号，大家看代码吧，里面有支持了。