如何用ASP+JS开发自定义打印报表（添加、删除行列，合并、拆分单元格）？

redfox33 2003-08-19 01:18:42

近来在做一个票据方面的工程，涉及到票据打印功能，因地域的不同票据格式也随之不同，所以现在想做一个可以自定义打印模版的功能，用JS动态的添加，删除，插入table中的行、列和textbox,checkbox,radiobox....，可以合并，拆分单元格，添加动态的数据域（比如说在name列后加上<%=rs("name")%>这个计算域取出数据库中的值）。此外还涉及到票据的套打等问题，我想用CSS来控制预览与打印时是否显示边线的问题。如果能给出部分代码供参考感激不尽，能提供思路也可以，希望大家能够一起把中国软件做强做大做精。不能用第三方控件。

CP(China Programmer)

...全文

283 24 打赏收藏转发到动态举报

写回复

用AI写文章

24 条回复

切换为时间正序

请发表友善的回复…

发表回复

redfox33 2003-08-27

打赏
举报

redfox33 2003-08-26

打赏
举报

to ： yonghengdizhen(卖CSDN门票的小贩) :

我还是没有搞懂。你能否一次给出完整可以运行看到效果的代码？包括你的en.css文件。可以给我发一份吗？
zhang_t@163.com

redfox33 2003-08-26

打赏
举报

to ky99xing(kk) :
在行单元格，列单元格的合并方面，如果能进一步改进（尤其是垂直方向列单元格合并）。
怎么让行、列的宽度，高度支持鼠标拖放？还有我发现当定义好一个表格后，一在单元格里录入数据的时候，整个列宽都发生了变化，反应太敏感，不太适合自定义报表，要是能做出frontpage里编辑table的效果就好了，你能给指点一下，进一步完善吗？谢谢。那边的分已给你了。
还有一个问题是关于票据套打的，我认为应用css控制显示/不显示边线，你有没有这方面的例子？

redfox33 2003-08-25

打赏
举报

to dawn06():
我看了你提供的那个地址：
http://ky99.xiloo.com/_test/rtfedit/savefromhtml.html
基本上很不错，但是合并单元格操作起来不是很方便，可以给我发一份吗？zhang_t@163.com
在ASP论坛里我也发表了一份同名的文章，你也可以去得分。

redfox33 2003-08-25

打赏
举报

to yonghengdizhen(我用青春换面包) :
很感谢你的参与，你提供的代码好像不完全，无法正常运行起来看到效果。希望你能重新提供

redfox33 2003-08-25

打赏
举报

谢谢大家的参与，继续讨论，无论最终是否解决问题，分还是会给大家的

yonghengdizhen 2003-08-25

打赏
举报

下面就是上述代码引用的xsl文件片段 <tr class="content">
<td colspan="6" valign="top">
<xsl:value-of select="root/record/JYSJ/@ChName" />
<xsl:value-of select="root/record/JYSJ/@star" />(限2000汉字)<br/>
<textarea class="scrollbar1" name="txtJYSJ" style="width:98%;display:non" rows="10" >
<xsl:attribute name="onchange">return limitlen(this.value,5000,'检验所见过长')</xsl:attribute>
<xsl:value-of select="root/record/JYSJ" />
</textarea>
<iframe name="txtJYSJ_HTML" frameBorder="0" SCROLLING="NO" src="../inc/HTMLEditor.asp" width="98%"></iframe>
</td>
</tr>
<tr class="content">
<td colspan="6" valign="top">
分析依据(限2000汉字)
<xsl:value-of select="root/record/JLZYYJ/@star" /><br/>
<textarea class="scrollbar1" name="txtJLZYYJ" style="width:98%;display:none" rows="0" >
<xsl:attribute name="onchange">return limitlen(this.value,2000,'分析依据过长')</xsl:attribute>
<xsl:value-of select="root/record/JLZYYJ" />
</textarea>
<iframe name="txtJLZYYJ_HTML" SCROLLING="NO" frameBorder="0" src="../inc/HTMLEditor.asp" width="98%"></iframe>
</td>
</tr>
<tr class="content">
<td colspan="6" valign="top">
检验结论(限2000汉字)
<xsl:value-of select="root/record/JYJL/@star" /><br/>
<textarea class="scrollbar1" name="txtJYJL" style="width:98%;display:none" rows="0" >
<xsl:attribute name="onchange">return limitlen(this.value,2000,'检验结论过长')</xsl:attribute>
<xsl:value-of select="root/record/JYJL" />
</textarea>
<iframe name="txtJYJL_HTML" SCROLLING="NO" frameBorder="0" src="../inc/HTMLEditor.asp" width="98%"></iframe>
</td>
</tr>

majunbo 2003-08-23

打赏
举报

学习…………

yonghengdizhen 2003-08-23

打赏
举报

yonghengdizhen 2003-08-23

打赏
举报

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="en.css">
</HEAD>
<body onfocusout="SyncData('To')" onload="InitHTMLEditor()" onfocus="ChangeSelect()" leftMargin=0 topMargin=0 rightmargin=0 bottomMargin=0>
<table cellspacing=0 cellpadding=0 style="width:100%;color:<%=session("color")%>;font-size:<%=session("size")%>">
<tr class="content2">
<td><input class=button type=button onclick="InsertTable()" value="插入表格"></td>
<td>当前行:<input name=RowIndex size=5 maxlength=5 disabled>当前列:<input disabled name=ColIndex size=5 maxlength=5></td>
<td><input class=button type=button name=btnAddRow onclick="InsertRow()" disabled value="新增行"></td>
<td><input class=button type=button name=btnDelRow onclick="DeleteRow()" disabled value="删除行"></td>
<td><input class=button type=button name=btnAddCol onclick="InsertCol()" disabled value="新增列"></td>
<td><input class=button type=button name=btnDelCol onclick="DeleteCol()" disabled value="删除列"></td>
</tr>
<tr style="content2"><td colspan=6 style="border:1px gainsboro outset;;"><iframe frameborder=0 name="HTMLEditor" src="about:blank" height="100%" width="100%"></iframe></td></tr>
</table>
<script>
var MaxRowIndex=0
var MaxColIndex=0
var oCurrentTable=null
function InsertTable()
{
HTMLEditor.focus();
sHTMLTable="<TABLE><TR><TD></TD><TD></TD></TR><TR><TD></TD><TD></TD></TR></TABLE>"
if(HTMLEditor.document.selection.type!="Control")
{
HTMLEditor.document.selection.createRange().pasteHTML(sHTMLTable)
HTMLEditor.focus();
}
else
{
alert("当前位置不能插入表格!")
}
}
function ChangeSelect()
{
btnAddRow.disabled=true;
btnAddCol.disabled=true;
btnDelRow.disabled=true;
btnDelCol.disabled=true;
RowIndex.disabled=true;
ColIndex.disabled=true;
if(HTMLEditor.document.selection.createRange().length>0)
{
if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
{
oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
}
}
if(oCurrentTable!=null)
{
if(oCurrentTable.rows.length>0)
{
MaxRowIndex=oCurrentTable.rows.length;
MaxColIndex=oCurrentTable.rows[0].cells.length;
btnAddRow.disabled=false;
btnAddCol.disabled=false;
btnDelRow.disabled=false;
btnDelCol.disabled=false;
RowIndex.disabled=false;
RowIndex.value=MaxRowIndex;
ColIndex.disabled=false;
ColIndex.value=MaxColIndex;
}
else
{
oCurrentTable=null;
}
}
}
function InsertRow()
{
if(HTMLEditor.document.selection.createRange().length>0)
{
if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
{
oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
}
}
if(oCurrentTable!=null)
{
var oNewRow=oCurrentTable.insertRow();
for(var i=0;i<oCurrentTable.rows[0].cells.length;i++)
{
oNewRow.insertCell();
}
}
}
function DeleteRow()
{
if(HTMLEditor.document.selection.createRange().length>0)
{
if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
{
oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
}
}
if(oCurrentTable!=null)
{
if(parseInt(RowIndex.value)<=oCurrentTable.rows.length && oCurrentTable.rows.length>1)
{
oCurrentTable.deleteRow(parseInt(RowIndex.value)-1);
MaxRowIndex=oCurrentTable.rows.length;
RowIndex.value=MaxRowIndex;
}
else if(oCurrentTable.rows.length==1 && confirm("当前表格只有一行,删除当前行将同时删除整个表格,是否继续?"))
{
oCurrentTable.removeNode(true)
oCurrentTable=null
}
else
{
alert("您没有选定表格或当前表格没有这么多行!")
}
}
}
function InsertCol()
{
if(HTMLEditor.document.selection.createRange().length>0)
{
if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
{
oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
}
}
if(oCurrentTable!=null)
{
for(var i=0;i<oCurrentTable.rows.length;i++)
{
oCurrentTable.rows[i].insertCell();
}
}
}

delphine 2003-08-22

打赏
举报

ky99xing(kk )谢谢，能给个就最好了！！！

dengfeng@qingdaonews.com

dawn06 2003-08-22

打赏
举报

to ky99xing(kk)

谢谢 dawn_06@163.net

ky99xing 2003-08-22

打赏
举报

我手头有一个编辑器，有表格的功能，不知道和不合你的要求，
http://ky99.xiloo.com/_test/rtfedit/savefromhtml.html
要的话留个邮箱给我

dawn06 2003-08-22

打赏
举报

user.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="JavaScript">
function MouseOver(Obj)
{
Obj.style.cursor = "hand";
Obj.style.backgroundColor="#6487DC";
Obj.style.color = "white";
}
function MouseOut(Obj)
{
Obj.style.backgroundColor="white";
Obj.style.color ="black";
}
/*
*功能：
* 点击table行时，在母窗口填数据，并算出总年龄和非空的行数值nRowCount加1
*
*输入参数：
* Obj - 点击行事件对象；
*
*返回值：
* true -- 成功
* false -- 错误
*==================================================================**/
function MouseClick(Obj)
{
var i=window.opener.strRowNumber;
var nAgeTemp=0;
var nRowTemp=1; /*1表示添加新数据总行数+1*/
var j=parseInt(window.opener.nSumAge);
var strTemp='window.opener.document.form1.userid'+i+'.value!=""' ;

if (eval(strTemp))
{
strTemp='nAgeTemp=parseInt(window.opener.document.form1.age'+i+'.value)';
eval(strTemp);
nRowTemp=0; /*修改数据，总行数+0 */
}
strTemp='window.opener.document.form1.userid'+i+'.value=Obj.cells[0].innerHTML;'
eval(strTemp);
strTemp='window.opener.document.form1.username'+i+'.value=Obj.cells[1].innerHTML;'
eval(strTemp);
strTemp='window.opener.document.form1.sex'+i+'.value=Obj.cells[2].innerHTML;'
eval(strTemp);
strTemp='window.opener.document.form1.age'+i+'.value=Obj.cells[3].innerHTML;'
eval(strTemp);
strTemp=Obj.cells[3].innerHTML;
j=j+parseInt(strTemp)-nAgeTemp; /*如果是修改数据，总年龄=总年龄-原来的年龄+现在的年龄*/
window.opener.nSumAge=j;
window.opener.nRowCount=window.opener.nRowCount+nRowTemp; /*如果是修改数据，总年龄=总年龄-原来的年龄+现在的年龄*/
window.close();

}
</script>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE type=text/css>
.dis { display:none}
body { font-size: 10pt; font-family:Arial }
table { font-size: 10pt; font-family:Arial ;border-width:1pt;background-color:#DCE3FC; }
</STYLE>

</head>

<body bgcolor="#f8f8f8">
<table border="1" cellpadding="0" cellspacing="0" width="300" align="center" >
<tr id="t1" >
<td align="center"> 用户ID </td>
<td align="center"> 用户名 </td>
<td align="center" class="dis"> 性别</td>
<td align="center" class="dis">年龄</td>
</tr>
<tr id="t2" onClick="MouseClick(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
<td align="center"> 111111</td>
<td align="center"> 222222 </td>
<td align="center" class="dis"> 男</td>
<td align="center" class="dis">5</td>
</tr>
<tr id="t3" onClick="MouseClick(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
<td align="center"> 333333</td>
<td align="center"> 444444 </td>
<td align="center" class="dis"> 女</td>
<td align="center" class="dis">15</td>
</tr>
<tr id="t4" onClick="MouseClick(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
<td align="center"> 555555</td>
<td align="center"> 666666 </td>
<td align="center" class="dis"> 女</td>
<td align="center" class="dis">15</td>
</tr>
<tr id="t5" onClick="MouseClick(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
<td align="center"> 777777</td>
<td align="center"> 888888 </td>
<td align="center" class="dis"> 女</td>
<td align="center" class="dis">15</td>
</tr>
</table>

</body>
</html>

dawn06 2003-08-22

打赏
举报

1.html

<script language="JavaScript">
var nNameNumber=1; /*新添加行的标号*/
var nRowCount=0; /*非空的行数*/
var nRowAllCount=0; /*总行数*/
var strRowNumber; /*添加数据时保存的行号，用来确认添加数据时的行号*/
var nSumAge=0; /*总年龄*/
function WinOpen()
{
strRowNumber=event.srcElement.id;
strRowNumber=strRowNumber.substr(3,strRowNumber.length);
// window.open ("user.htm","userinfo","width=350,top=300,left=300,height=220,resizable=yes,toolbar=no");
window.open ("user.htm","userinfo");
}

function Age()
{
var nAge; /*平均年龄*/
if (nRowCount==0)
{ nAge=0;
}else{
nAge=parseInt(nSumAge/nRowCount);
}
document.form1.t5.value=nAge;
}
/*
*功能：
* 增加行，并将总行数+1 （包括空的行）
*
*返回值：
* true -- 成功
* false -- 错误
*==================================================================**/
function AddRow(){
var i=nNameNumber;
var row = activeTable.insertRow(activeTable.rows.length);
var col = row.insertCell(0);
col.innerHTML = '<input name="userid' + i + '" id="userid' + i + '" size="20" readOnly="true">';
col = row.insertCell(1);
col.innerHTML = '<input name="username' + i + '" id="username' + i + '" size="20" readOnly="true">';
col = row.insertCell(2);
col.innerHTML = '<input name="sex' + i + '" id ="sex' + i + '" size="8" readOnly="true">';
col = row.insertCell(3);
col.innerHTML = '<input name="age' + i + '" id="age' + i + '" size="8" readOnly="true">';
col = row.insertCell(4);
col.innerHTML = '<input type="button" onClick="WinOpen()" value="添加" name="add' + i + '" id="add' + i + '" > ';
col = row.insertCell(5);
col.innerHTML = '<button onClick="DelRow()" name="dele' + i + '" id="dele' + i + '">删除此行</button>';
nNameNumber=i+1;
++nRowAllCount;
}
/*
*功能：
* 删除行，并将总行数-1 （包括空的行）
*
*返回值：
* true -- 成功
* false -- 错误
*==================================================================**/
function DelRow () {
var strSrcName = document.getElementsByTagName("button");
var strRowNumberTemp;
var nRowIndex = 0;

for ( i=0;i<strSrcName.length;i++){
if(strSrcName[i]==event.srcElement)
{
nRowIndex=event.srcElement.parentElement.parentElement.rowIndex;
strRowNumberTemp=event.srcElement.id;
}
}

strRowNumberTemp=strRowNumberTemp.substr(4,strRowNumberTemp.length);

var strTemp='if (document.form1.userid'+strRowNumberTemp+'.value!="") { nRowCount=nRowCount-1;nSumAge=nSumAge-document.form1.age'+strRowNumberTemp+'.value;}';

eval(strTemp);

activeTable.deleteRow(nRowIndex);
--nRowAllCount;
}
/*
*功能：
* 提交前的确认
*
*返回值：
* true -- 成功
* false -- 错误
*==================================================================**/
function CheckData()
{
if(nRowCount==0&&nRowAllCount==0)
{ alert("请先增加行，并输入！");
return false;
}
if(nRowCount!=nRowAllCount&&nRowAllCount!=0)
{ alert("您未填满，请填满再提交！");
return false;
}

}
</script>

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>用户ID</title>
<style>

</style>
</head>

<body>
<form method="POST" action="check.htm" name="form1" id="form1" onSubmit="return CheckData()">

<table id="activeTable" border="1" width="75%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" >
<tr >
<td width="26%" align="center" bgcolor="#E6E6E6" height="22" id="userid0" >用户ID</td>
<td width="20%" align="center" bgcolor="#E6E6E6" height="22" id="username0">用户名</td>
<td width="7%" align="center" bgcolor="#E6E6E6" height="22" id="sex0">性别</td>
<td width="9%" align="center" bgcolor="#E6E6E6" height="22" id="age0">年龄</td>
<td width="16%" align="center" bgcolor="#E6E6E6" height="22" id="add0">添加</td>
<td width="22%" align="center" bgcolor="#E6E6E6" height="22" id="dele0">删除</td>
</tr>

</table>

<p><input type="button" value="增加一行" name="B3" onClick="AddRow()" ><input type="submit" value="提交" name="b1"><input type="button" value="平均年龄" name="b6" onClick="Age()"> <input type="text" id="t5" name="t5" size="7">岁</p>
</form>

</body>

</html>

redfox33 2003-08-22