［原創］[利用TDC實作表格的排序，過濾，上下條滾動及表格分頁]

先看張圖檔，需要代碼的朋友，在此留言

一個一個内容傳吧

說明：

共有3個檔案，

其中 tdcdemo.htm是主界面。表格裡的排序圖示是用VML動态畫成的。具體的形狀可以根據自己的喜好來畫。

CBC10.asp是資料檔案，在實際應用中可以通過asp或jsp來動态輸出資料，輸出的資料按照一定格式就可以了，可以用記事本打開CBC10.asp裡看裡面的格式，也可以定義成你自己喜歡的格式

Modal.htm是在tdcDemo.htm在表格裡輕按兩下打開的浏覽視窗。

--------------tdcdemo.htm-------------------

<!---

作者：JoeCom

Email: [email][email protected][/email]

Blog: [url]http://blog.csdn.net/juwuyi[/url]

[url]http://joecom.blogone.net[/url]

Date: 2004-10

--->

<STYLE>

v/:* { BEHAVIOR: url(#default#VML) }

</STYLE>

<OBJECT id=tdcComposers

CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"

WIDTH=0 HEIGHT=0>

</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">

<TD id=hd_cbcmc WIDTH=100 colname="col3">抄表冊名稱</TD>

<TD id=hd_cbcxz WIDTH=100 colname="col4">抄表冊性質</TD>

</TR>

</TABLE>

FillSortDropDownWithFields(cboSort, this.recordset);

</SCRIPT>

var oTd=window.event.srcElement;

var col=oTd.colname;

if (col!=null){

doSort(oTd);

}

</SCRIPT>

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>

</TR>

</THEAD>

<TBODY>

<TR ID=trTemplate

</TR>

</TBODY>

</TABLE>

</DIV>

<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()">

</div>

<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=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=col13></SPAN></TD></TR><TR>

</TR></TBODY>

</TABLE>

</DIV>

tdcComposers.recordset.AbsolutePosition = this.recordNumber;

window.event.cancelBubble = true; // don't bother bubbling to the document

</SCRIPT>

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-------------

//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>

<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=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=col13></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>

［原創］[利用TDC實作表格的排序，過濾，上下條滾動及表格分頁]

繼續閱讀

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element

小程式自定義button元件擷取使用者資訊（使用者授權登入）

Spring MVC+Ajax建立執行個體

probe()函數是什麼時候被調用，裝置和驅動是怎麼聯系起來的

數組的動态記憶體配置設定

二叉樹先序、中序、後序三種周遊的非遞歸算法

在VC6.0開發環境中添加批量注釋和取消注釋

程式設計高手：VC 6.0下利用消息實作内部程序通訊

可變參數宏， Variadic Macros

轉換字元串成ＩＮＴ６４

c寫檔案

基于XOR的加密程式

不用iconv函數實作UTF-8編碼轉換GB2312的PHP函數

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

IE8 CSS設定DIV居中，添加“margin:0 auto”

無元件上傳圖檔到資料庫中，最完整解決方案