前端

img juwuyi

[原创][利用TDC实现表格的排序,过滤,上下条滚动及表格分页]

发表于2004/10/18 15:28:00  4195人阅读

先看张图片,需要代码的朋友,在此留言



一个一个内容传吧

说明:
共有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 onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
         onmouseout="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.onclick="'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.onclick="'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 onclick="tblCbc.firstPage();">第一页</button>
<button ID=cmdpreviousPage onclick="tblCbc.previousPage();">上一页</button>
<button ID=cmdnextPage onclick="tblCbc.nextPage();">下一页</button>
<button ID=cmdnextPage onclick="tblCbc.lastPage();">最后页</button>

<INPUT ID=cmdNavFirst TYPE=BUTTON VALUE="<<"
    onclick="tdcComposers.recordset.MoveFirst()">
<INPUT ID=cmdNavPrev TYPE=BUTTON VALUE="<" STYLE="width:20px"
    onclick="tdcComposers.recordset.MovePrevious(); if (tdcComposers.recordset.BOF)tdcComposers.recordset.MoveFirst();">
<INPUT ID=cmdNavNext TYPE=BUTTON VALUE=">" STYLE="width:20px"
    onclick="tdcComposers.recordset.MoveNext(); if(tdcComposers.recordset.EOF)tdcComposers.recordset.MoveLast();">
<INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"
    onclick="tdcComposers.recordset.MoveLast()">
   
<SELECT ID=cboSort></SELECT><INPUT type=text size=20 id="searchText"><Button onclick="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 onload="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="<<"
onclick="ADONavigate(g_nFirst)">
<INPUT ID=cmdNavPrev TYPE=BUTTON VALUE="<" STYLE="width:20px"
onclick="ADONavigate(g_nPrevious)">
<INPUT ID=cmdNavNext TYPE=BUTTON VALUE=">" STYLE="width:20px"
onclick="ADONavigate(g_nNext)">
<INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"
onclick="ADONavigate(g_nLast)">

</body>

阅读全文
0 0

相关文章推荐

img
取 消
img