先看张图片，需要代码的朋友，在此留言
一个一个内容传吧
说明：
共有3个文件，
其中 tdcdemo.htm是主界面。表格里的排序图标是用VML动态画成的。具体的形状可以根据自己的喜好来画。
CBC10.asp是数据文件，在实际应用中可以通过asp或jsp来动态输出数据，输出的数据按照一定格式就可以了，可以用记事本打开CBC10.asp里看里面的格式，也可以定义成你自己喜欢的格式
Modal.htm是在tdcDemo.htm在表格里双击打开的浏览窗口。
--------------tdcdemo.htm-------------------
<!---
作者：JoeCom
Email: [email]juwuyi@vip.sina.com[/email]
Blog: [url]http://blog.csdn.net/juwuyi[/url]
[url]http://joecom.blogone.net[/url]
Date: 2004-10
--->
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<OBJECT id=tdcComposers
CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
WIDTH=0 HEIGHT=0>
<PARAM NAME="DataURL" VALUE="CBC10.asp">
<PARAM NAME="FieldDelim" VALUE="|">
<PARAM NAME="UseHeader" VALUE="True">
</OBJECT>
<div >
<DIV οnmοuseοver="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
οnmοuseοut="this.style.filter='';"
STYLE=" height:25px; background:#e4e4e4; cursor:hand; width:635">
<TABLE BORDER="1" ID="tblCbcHead" sort="" title="点击标题可以排序">
<TR STYLE="font-weight:bold" id=hd_title>
<TD id=hd_id WIDTH=100 colname="col1">序号 </TD>
<TD id=hd_cbc WIDTH=100 colname="col2">抄表册</TD>
<TD id=hd_cbcmc WIDTH=100 colname="col3">抄表册名称</TD>
<TD id=hd_cbcxz WIDTH=100 colname="col4">抄表册性质</TD>
<TD id=hd_cbczq WIDTH=200 colname="col5">抄表周期</TD>
</TR>
</TABLE>
<SCRIPT FOR=tdcComposers EVENT=ondatasetchanged>
FillSortDropDownWithFields(cboSort, this.recordset);
</SCRIPT>
<SCRIPT FOR=hd_title EVENT=onclick>
var oTd=window.event.srcElement;
var col=oTd.colname;
if (col!=null){
doSort(oTd);
}
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
function doSort(col){
var colname=col.colname;
if (tblCbcHead.sort=="+"+colname){
RemoveSortpic();
CreateDescSortpic(col);
tdcComposers.Sort="-"+colname;
tblCbcHead.sort="-"+colname;
}else if(tblCbcHead.sort==""){
CreateAscSortpic(col);
tdcComposers.Sort="+"+colname;
tblCbcHead.sort="+"+colname;
}else{
RemoveSortpic();
CreateAscSortpic(col);
tdcComposers.Sort="+"+colname;
tblCbcHead.sort="+"+colname;
}
tdcComposers.Reset();
}
function RemoveSortpic(){
document.all.item("sortpic").removeNode(true);
}
function CreateAscSortpic(oTd){
//顺序
var oDiv = document.createElement("DIV");
oTd.appendChild(oDiv);
oDiv.id="sortpic";
oDiv.align="right";
oDiv.οnclick="'doSort(this.parentElement)'";
oDiv.innerHTML='<v:PolyLine filled="false" StrokeColor=red StrokeWeight=1 dashstyle="Dot" Points="-15,-10 -10,-5 -5,-10 -15,-10" style="position:absolute"/>';
}
function CreateDescSortpic(oTd){
//倒序
var oDiv = document.createElement("DIV");
oTd.appendChild(oDiv);
oDiv.id="sortpic";
oDiv.align="right";
oDiv.οnclick="'doSort(this.parentElement)'";
oDiv.innerHTML='<v:PolyLine filled="false" StrokeColor=red StrokeWeight=1 dashstyle="Dot" Points="-15,-5 -5,-5 -10,-10 -15,-5" style="position:absolute"/>';
}
function doSearch(){
tdcComposers.Filter=cboSort.value+"=*"+searchText.value+"*";
tdcComposers.Reset();
}
// Add the specified value/text to the dropdown list
function AddItemToDropDown(oDropDown, cValue, cText)
{
oOption = document.createElement('OPTION');
oOption.value = cValue;
oOption.text = cText;
oDropDown.add(oOption);
}
// Fill the specified dropdown with the metadata from the specified ADO RecordSet
function FillSortDropDownWithFields(oDropDown, oRecordSet)
{
// only do this once. leave it to the caller to clear the drop-down otherwise
if (oDropDown.options.length > 0)
return;
AddItemToDropDown(oDropDown, "None", "None"); // default
// add each of the columns in the data set to the drop-down
//for (i = 0; i < oRecordSet.fields.count; i++)
//{
// oField = oRecordSet.fields(i);
// AddItemToDropDown(oDropDown, oField.name, oField.name);
//}
AddItemToDropDown(oDropDown, "col1", "序号");
AddItemToDropDown(oDropDown, "col2","抄表册");
AddItemToDropDown(oDropDown, "col3", "抄表册名称");
AddItemToDropDown(oDropDown, "col4", "抄表册性质");
AddItemToDropDown(oDropDown, "col5", "抄表周期");
AddItemToDropDown(oDropDown, "col6", "管理部门");
AddItemToDropDown(oDropDown, "col7", "变压器组号");
AddItemToDropDown(oDropDown, "col8", "变压器性质");
AddItemToDropDown(oDropDown, "col9", "抄表员代码");
AddItemToDropDown(oDropDown, "col10", "抄表员姓名");
AddItemToDropDown(oDropDown, "col11", "抄表列日");
AddItemToDropDown(oDropDown, "col12", "浮动天数");
AddItemToDropDown(oDropDown, "col13", "初始化标志");
AddItemToDropDown(oDropDown, "col14", "缴费天数");
AddItemToDropDown(oDropDown, "col15", "抄表方式");
cboSort.selectedIndex = 0;
}
</SCRIPT>
</div>
<div style="filter:'progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';position:absolute; overflow:scroll; overflow-x:hidden; height:200; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<TABLE BORDER="1" DATASRC="#tdcComposers" ID="tblCbc" DATAPAGESIZE=20 >
<COL WIDTH=100><COL WIDTH=100><COL WIDTH=100><COL WIDTH=100><COL WIDTH=200>
<THEAD><TR STYLE="font-weight:bold;display:none" >
</TR>
</THEAD>
<TBODY>
<TR ID=trTemplate
>
<TD ><SPAN DATAFLD="col1"></SPAN></TD>
<TD><SPAN DATAFLD=col2></SPAN></TD>
<TD><SPAN DATAFLD=col3></SPAN></TD>
<TD><SPAN DATAFLD=col4></SPAN></TD>
<TD><SPAN DATAFLD=col5></SPAN></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<div style="position:absolute;TOP:250">
<button ID=cmdpreviousPage οnclick="tblCbc.firstPage();">第一页</button>
<button ID=cmdpreviousPage οnclick="tblCbc.previousPage();">上一页</button>
<button ID=cmdnextPage οnclick="tblCbc.nextPage();">下一页</button>
<button ID=cmdnextPage οnclick="tblCbc.lastPage();">最后页</button>
<INPUT ID=cmdNavFirst TYPE=BUTTON VALUE="<<"
οnclick="tdcComposers.recordset.MoveFirst()">
<INPUT ID=cmdNavPrev TYPE=BUTTON VALUE="<" STYLE="width:20px"
οnclick="tdcComposers.recordset.MovePrevious(); if (tdcComposers.recordset.BOF)tdcComposers.recordset.MoveFirst();">
<INPUT ID=cmdNavNext TYPE=BUTTON VALUE=">" STYLE="width:20px"
οnclick="tdcComposers.recordset.MoveNext(); if(tdcComposers.recordset.EOF)tdcComposers.recordset.MoveLast();">
<INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"
οnclick="tdcComposers.recordset.MoveLast()">
<SELECT ID=cboSort></SELECT><INPUT type=text size=20 id="searchText"><Button οnclick="doSearch()">查找</button>
</div>
<DIV style="position:absolute;TOP:300">
<TABLE BORDER="1" ID="tblCbc1" >
<TBODY><TR >
<TD STYLE="font-weight:bold">序号</TD> <TD ><SPAN DATASRC="#tdcComposers" DATAFLD=col1 ></SPAN></TD></TR>
<TD STYLE="font-weight:bold">抄表册</TD> <TD ><SPAN DATASRC="#tdcComposers" DATAFLD=col2 ></SPAN></TD></TR>
<TD STYLE="font-weight:bold">抄表册名称</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col3></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表册性质</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col4></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表周期</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col5></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">管理部门</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col6></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">变压器组号</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col7></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">变压器性质</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col8></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表员代码</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col9></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表员姓名</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col10></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表列日</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col11></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">浮动天数</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col12></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">初始化标志</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col13></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">缴费天数</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col14></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表方式</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col15></SPAN></TD></TR><TR>
</TR></TBODY>
</TABLE>
</DIV>
<SCRIPT FOR=trTemplate EVENT=onclick>
tdcComposers.recordset.AbsolutePosition = this.recordNumber;
window.event.cancelBubble = true; // don't bother bubbling to the document
</SCRIPT>
<SCRIPT FOR=trTemplate EVENT=ondblclick>
window.external.m2_blocked('Modal.htm',tdcComposers);
</SCRIPT>
</html>
CBC10.asp的内容，它的第一行是表格的列名：
col1:Int|col2|col3|col4|col5|col6|col7|col8|col9|col10|col11|col12|col13|col14|col15
1|00001|聚乐园1222|小用户|每月|10|000003||04|陈建华|21|0|是|0|抄表机
2|00002|五柱|小用户|每月|10|000004||0574|林银炼|21|0|是|0|手工抄表
3|00003|环保|小用户|每月|10|000005||07|杨天民|27|0|是|5|抄表机
4|00004|市政府套房|小用户|每月|10|000006||16|吴鹏飞|26|0|是|5|手工抄表
5|00005|五交仓库|小用户|每月|10|000007||15|黄文龙|24|0|是|5|手工抄表
6|00006|兴安巷|小用户|每月|10|000008||03|刘金烂|24|0|是|5|手工抄表
7|00007|湖中路|小用户|每月|10|000009||01|吕敦艺|24|0|是|5|手工抄表
8|00008|检察院1111|小用户|每月|10|000010||01|吕敦艺|24|0|是|0|手工抄表
9|00009|武装部|小用户|每月|10|000011||02|黄国仁|21|0|是|5|手工抄表
10|00010|白沙崎|小用户|每月|10|000012||11|吴国力|21|0|是|5|手工抄表
11|00012|武荣街|小用户|每月|10|000014||02|黄国仁|24|3|是|8|手工抄表
12|00013|公安局|小用户|每月|10|000015||02|黄国仁|24|0|是|5|手工抄表
13|00014|法院|小用户|每月|10|000016||12|黄江林|24|0|是|5|手工抄表
14|00015|民主街|小用户|每月|10|000017||12|黄江林|24|0|是|5|手工抄表
15|00016|必利达|小用户|每月|10|000018||09|黄军荣|24|0|是|5|手工抄表
16|00017|防堤|小用户|每月|10|000019||08|黄小艺|24|0|是|5|手工抄表
17|00018|农机厂|小用户|每月|10|000020||04|陈建华|24|0|是|5|手工抄表
18|00019|商会|小用户|每月|10|000021||03|刘金灿|24|0|是|5|手工抄表
19|00020|刑警中队|小用户|每月|10|000022||18|王小栋|22|0|是|5|手工抄表
20|00021|高甲|小用户|每月|10|000023||19|张文福|22|0|是|5|手工抄表
21|00022|别墅|小用户|每月|10|000024||17|王江水|26|0|是|5|抄表机
22|00023|建宏花苑|小用户|每月|10|000025||18|王小栋|26|0|是|5|手工抄表
23|00024|水土办|小用户|每月|10|000026||17|王江水|26|0|是|5|抄表机
24|00025|教师新村|小用户|每月|10|000027||18|王小栋|26|0|是|5|抄表机
25|00026|礼朝|小用户|每月|10|000028||18|王小栋|26|0|是|5|抄表机
26|00027|下房|小用户|每月|10|000029||15|黄文龙|21|0|是|5|手工抄表
27|00028|甘仔山|小用户|每月|10|000030||16|吴鹏飞|28|0|否|5|抄表机
28|00029|畜牧场|小用户|每月|10|000031||17|王江水|28|0|是|5|抄表机
29|00030|双塘|小用户|每月|10|000032||16|吴鹏飞|28|0|是|5|抄表机
30|00031|中山3#|小用户|每月|10|000033||03|刘金灿|20|0|是|5|手工抄表
31|00032|成功街|小用户|每月|10|000034||01|吕敦艺|20|0|是|5|手工抄表
32|00033|农行|小用户|每月|10|000035||12|黄江林|20|0|是|5|手工抄表
33|00034|普尾新村-|小用户|每月|10|000036||11|吴国力|20|0|是|5|手工抄表
34|00035|旧交警-|小用户|每月|10|000037||11|吴国力|20|0|是|5|手工抄表
35|00036|国税|小用户|每月|10|000038||50|黄勇志|15|0|是|5|手工抄表
36|00037|地税|小用户|每月|10|000039||50|黄勇志|15|0|是|5|手工抄表
37|00038|金华信用社|小用户|每月|10|000040||50|黄勇志|15|0|是|5|抄表机
38|00039|种子公司|小用户|每月|10|000041||09|黄军荣|20|0|是|5|手工抄表
39|00040|普莲柜|小用户|每月|10|000042||50|黄勇志|15|0|是|5|手工抄表
40|00041|嘉彩变-|小用户|每月|10|000043||04|陈建华|20|0|是|5|手工抄表
41|00042|普莲柜-2|小用户|每月|10|000044||50|黄勇志|15|0|是|5|手工抄表
42|00043|滨江一|小用户|每月|10|000045||01|吕敦艺|20|0|是|5|手工抄表
43|00044|滨江二|小用户|每月|10|000046||01|吕敦艺|20|0|是|5|手工抄表
44|00045|江滨三|小用户|每月|10|000047||15|黄文龙|20|0|是|5|手工抄表
45|00046|港仔渡|小用户|每月|10|000048||08|黄小艺|18|0|是|5|手工抄表
46|00047|顶溪美244|小用户|每月|10|000049||08|黄小艺|18|0|是|0|手工抄表
47|00048|顶溪美2|小用户|每月|10|000050||02|黄国仁|18|0|是|0|手工抄表
--------Modal.htm-------------
<SCRIPT>
//var public_description = new CScriptlet();
var g_RS = null;
var g_DSO = null;
var g_nFirst = 1;
var g_nPrevious = 2;
var g_nNext = 3;
var g_nLast = 4;
function fnInit(){
var oDSO;
oDSO=window.dialogArguments;
SetDSO(oDSO);
fnSetSpanText(g_RS);
}
function fnSetSpanText(oRS){
for (var i=0;i<document.all.tags("span").length;i++){
var oSpan=document.all.tags("span").item(i);
oSpan.innerText=oRS.fields(oSpan.dataFld).value;
}
}
// constructor
function CScriptlet()
{
this.get_DSO = GetDSO;
this.put_DSO = SetDSO;
this.SetCaption = SetCaption;
}
// Change the caption of any of the navigation button
//
// Parameters
//
// nButton - index of button, the caption of which is to be changed. valid range = (0..3)
// cCaption - the new caption
function SetCaption(nButton, cCaption)
{
if (nButton == null || nButton > document.body.children.length - 1 || cCaption == null)
return;
document.body.children(nButton).value = cCaption;
}
// called when the DSO property of the scriptlet is set
function SetDSO(oDSO)
{
g_DSO = oDSO;
g_RS = (g_DSO == null ? null : g_DSO.recordset);
if (g_DSO != null)
g_DSO.ondatasetchanged = HandleDataSetChanged;
}
// called when the DSO property of the scriptlet is retrieved
function GetDSO()
{
return g_DSO;
}
// Navigate through the ADO recordset provided by the DSO
function ADONavigate(nDirection)
{
if (g_RS == null)
{
return;
}
// cDirection indicates the direction to navigate
switch (nDirection)
{
case g_nFirst:
g_RS.MoveFirst();
fnSetSpanText(g_RS);
break;
case g_nPrevious:
if (g_RS.AbsolutePosition > 1)
{
g_RS.MovePrevious();
}
else
{
top.status = 'At beginning of file';
}
fnSetSpanText(g_RS);
break;
case g_nNext:
if (g_RS.AbsolutePosition < g_RS.RecordCount)
{
g_RS.MoveNext();
fnSetSpanText(g_RS);
}
else
{
top.status = 'At end of file';
}
break;
case g_nLast:
g_RS.MoveLast();
fnSetSpanText(g_RS);
break;
default:
alert("Invalid direction (" + nDirection + ")");
}
}
// handle notifications from the DSO that the data set has changed
function HandleDataSetChanged()
{
g_RS = g_DSO.recordset;
}
</SCRIPT>
<body οnlοad="fnInit()">
<TABLE BORDER="1" ID="tblCbc1" >
<TBODY><TR >
<TD STYLE="font-weight:bold">序号</TD> <TD ><SPAN DATASRC="#tdcComposers" DATAFLD=col1 ></SPAN></TD></TR>
<TD STYLE="font-weight:bold">抄表册</TD> <TD ><SPAN DATASRC="#tdcComposers" DATAFLD=col2 ></SPAN></TD></TR>
<TD STYLE="font-weight:bold">抄表册名称</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col3></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表册性质</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col4></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表周期</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col5></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">管理部门</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col6></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">变压器组号</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col7></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">变压器性质</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col8></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表员代码</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col9></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表员姓名</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col10></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表列日</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col11></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">浮动天数</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col12></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">初始化标志</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col13></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">缴费天数</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col14></SPAN></TD></TR><TR>
<TD STYLE="font-weight:bold">抄表方式</TD> <TD><SPAN DATASRC="#tdcComposers" DATAFLD=col15></SPAN></TD></TR><TR>
</TR></TBODY>
</TABLE>
<INPUT ID=cmdNavFirst TYPE=BUTTON VALUE="<<"
οnclick="ADONavigate(g_nFirst)">
<INPUT ID=cmdNavPrev TYPE=BUTTON VALUE="<" STYLE="width:20px"
οnclick="ADONavigate(g_nPrevious)">
<INPUT ID=cmdNavNext TYPE=BUTTON VALUE=">" STYLE="width:20px"
οnclick="ADONavigate(g_nNext)">
<INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"
οnclick="ADONavigate(g_nLast)">
</body>
2717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
