大家在写WEB应用的时候,无论任何服务端技术,为了将数据呈现给用户,都需要将数据从服务端获取后再送
到客户端, 但可能有的人将服务端代码和HTML代码及JAVASCRIPT代码混合在一起,第一这样的页面代码非常难
看,第二页面不够通用。为此我想了一个办法,利用HTC组件技术将普通的表单控件改为数据控件,最重要的是它
们能重用,符合《AJAX实战》作者的SOA思想。下面就是一个TABEL的数据控件,它可以将数据库中的数据显示出
来,并分页
首先,首先在服务端建立数据页面XXX.XML,文件名自定,我这里文件名为:sbgldatalist.asp
<
%@LANGUAGE
=
"
VBSCRIPT
"
CODEPAGE
=
"
65001
"
%
><
!
--
#include file
=
"
../CONNECTIONS/CONN.asp
"
--><
!
--
#include file
=
"
../define/define.asp
"
--><
?xml version
=
"
1.0
"
encoding
=
"
UTF-8
"
?
>
< sbgldatas >< %
set rs = server.CreateObject( " ADODB.RecordSet " )
page = Request.QueryString ( " page " )
sqlstr = " select device_name,type,standard,devi_check_time,buy_time,sum,status,device_no,lf_no,unit_code from sbk where scrap_flag=1 and status=1 "
if page = "" then page = 1
rs.source = sqlstr & " order by device_no desc "
if rs.source <> "" then rs.Open rs.Source,conn, 3 , 1
rs.PageSize = 15
rs.CacheSize = RS.PageSize
for i = 1 to rs.PageSize * ( page - 1 )
if not rs.EOF then rs.MoveNext
next
For i = 1 to rs.PageSize
if rs.source <> "" then
if not rs.EOF then
% >
< sbgldata >
< unit_code >< % = get_dev_unit(rs( " unit_code " ))% ></ unit_code >
< facaption >< % = trim (rs( " device_name " ))% ></ facaption >
< type >< % = rs( " type " )% ></ type >
< standard >< % = rs( " standard " )% ></ standard >
< lfno >< % = rs( " lf_no " )% ></ lfno >
< buytime >< % = rs( " buy_time " )% ></ buytime >
< sum >< % = rs( " sum " )% ></ sum >
< status >< % = rs( " status " )% ></ status >
</ sbgldata >
< %
rs.movenext
end if
end if
next
% >
</ sbgldatas >
< sbgldatas >< %
set rs = server.CreateObject( " ADODB.RecordSet " )
page = Request.QueryString ( " page " )
sqlstr = " select device_name,type,standard,devi_check_time,buy_time,sum,status,device_no,lf_no,unit_code from sbk where scrap_flag=1 and status=1 "
if page = "" then page = 1
rs.source = sqlstr & " order by device_no desc "
if rs.source <> "" then rs.Open rs.Source,conn, 3 , 1
rs.PageSize = 15
rs.CacheSize = RS.PageSize
for i = 1 to rs.PageSize * ( page - 1 )
if not rs.EOF then rs.MoveNext
next
For i = 1 to rs.PageSize
if rs.source <> "" then
if not rs.EOF then
% >
< sbgldata >
< unit_code >< % = get_dev_unit(rs( " unit_code " ))% ></ unit_code >
< facaption >< % = trim (rs( " device_name " ))% ></ facaption >
< type >< % = rs( " type " )% ></ type >
< standard >< % = rs( " standard " )% ></ standard >
< lfno >< % = rs( " lf_no " )% ></ lfno >
< buytime >< % = rs( " buy_time " )% ></ buytime >
< sum >< % = rs( " sum " )% ></ sum >
< status >< % = rs( " status " )% ></ status >
</ sbgldata >
< %
rs.movenext
end if
end if
next
% >
</ sbgldatas >
第二步: 建立HTC文件,tablist.htc
<
PUBLIC:COMPONENT
>
< public:property name = " sitedata " />
< public:property name = " nodes " />
< public:property name = " columns " />
< public:attach event = " ondocumentready " onevent = " event_ondocumentready() " />
< public:attach event = " onclick " onevent = " gourl() " />
< script language = " jscript " >
var global = window.document;
var tabObj = this ;
var xmlconf = new ActiveXObject( " MSXML2.DOMDocument " );
xmlconf.async = false ;
var bkcolor = ' #C0C0FE ' ;
var selrowIndex ;
var currPage = 1 ;
function event_ondocumentready() ... {
listtab(currPage);
disPage();
var actButNext = document.createElement("input");
var actButPre = document.createElement("input");
var actDiv = document.createElement("div");
actDiv.border='1';
actDiv.position='absolute';
actDiv.align='right';
actButNext.type = 'button';
actButNext.value= '下页';
actButNext.className='input_button2';
actButPre.type='button';
actButPre.value= '上页';
actButPre.className='input_button2';
actButNext.onclick=onatcNextclick;
actButPre.onclick=onatcPreclick;
actDiv.insertAdjacentElement("beforeEnd",actButPre);
actDiv.insertAdjacentHTML("beforeEnd"," ");
actDiv.insertAdjacentElement("beforeEnd",actButNext);
global.body.appendChild(actDiv);
}
function onatcNextclick() ... {
var obj = global.getElementById('mytab');
for(var i=obj.rows.length-1;i>1;i--)
obj.deleteRow(i-1);
listtab(currPage++);
disPage();
}
function onatcPreclick() ... {
var obj = global.getElementById('mytab');
for(var i=obj.rows.length-1;i>1;i--)
obj.deleteRow(i-1);
listtab((currPage <= 1) ? 1 : currPage--);
disPage();
}
function mouseclick() ... {
var elmt=event.srcElement;
var to = elmt.parentNode.parentNode.parentNode;
if(elmt.tagName.toUpperCase()!="TD") return;
if(elmt.parentNode.style.backgroundColor != bkcolor)...{
if (selrowIndex) to.rows[selrowIndex].style.backgroundColor='';
selrowIndex = elmt.parentNode.sectionRowIndex;
elmt.parentNode.style.backgroundColor=bkcolor;
}
}
function gourl() ... {
var url=event.srcElement.href;
if(url) location.href=url;
}
function listtab(page) ... {
xmlconf.load(sitedata+'?page='+page);
if(xmlconf.parseError.errorCode!=0)...{
alert("无法加载部门列表!原因:"+xmlconf.parseError.reason+" 地址:"+sitedata);
return;
}
//alert(this.rows[0].cells.length)
var tn = xmlconf.selectNodes(nodes);
var mytr,mytd;
for (var r = 0;r < tn.length;r++)...{
mytr=this.insertRow();
for(var c = 0;c < columns;c++)...{
mytd=mytr.insertCell();
mytd.innerText=tn.item(r).childNodes.item(c).text;
mytd.style.color="#336699";
mytd.onclick = mouseclick;
mytd.style.cursor="hand";
}
}
}
function disPage() ... {
window.status='第 '+currPage+' 页';
}
</ script >
</ PUBLIC:COMPONENT >
< public:property name = " sitedata " />
< public:property name = " nodes " />
< public:property name = " columns " />
< public:attach event = " ondocumentready " onevent = " event_ondocumentready() " />
< public:attach event = " onclick " onevent = " gourl() " />
< script language = " jscript " >
var global = window.document;
var tabObj = this ;
var xmlconf = new ActiveXObject( " MSXML2.DOMDocument " );
xmlconf.async = false ;
var bkcolor = ' #C0C0FE ' ;
var selrowIndex ;
var currPage = 1 ;
function event_ondocumentready() ... {
listtab(currPage);
disPage();
var actButNext = document.createElement("input");
var actButPre = document.createElement("input");
var actDiv = document.createElement("div");
actDiv.border='1';
actDiv.position='absolute';
actDiv.align='right';
actButNext.type = 'button';
actButNext.value= '下页';
actButNext.className='input_button2';
actButPre.type='button';
actButPre.value= '上页';
actButPre.className='input_button2';
actButNext.onclick=onatcNextclick;
actButPre.onclick=onatcPreclick;
actDiv.insertAdjacentElement("beforeEnd",actButPre);
actDiv.insertAdjacentHTML("beforeEnd"," ");
actDiv.insertAdjacentElement("beforeEnd",actButNext);
global.body.appendChild(actDiv);
}
function onatcNextclick() ... {
var obj = global.getElementById('mytab');
for(var i=obj.rows.length-1;i>1;i--)
obj.deleteRow(i-1);
listtab(currPage++);
disPage();
}
function onatcPreclick() ... {
var obj = global.getElementById('mytab');
for(var i=obj.rows.length-1;i>1;i--)
obj.deleteRow(i-1);
listtab((currPage <= 1) ? 1 : currPage--);
disPage();
}
function mouseclick() ... {
var elmt=event.srcElement;
var to = elmt.parentNode.parentNode.parentNode;
if(elmt.tagName.toUpperCase()!="TD") return;
if(elmt.parentNode.style.backgroundColor != bkcolor)...{
if (selrowIndex) to.rows[selrowIndex].style.backgroundColor='';
selrowIndex = elmt.parentNode.sectionRowIndex;
elmt.parentNode.style.backgroundColor=bkcolor;
}
}
function gourl() ... {
var url=event.srcElement.href;
if(url) location.href=url;
}
function listtab(page) ... {
xmlconf.load(sitedata+'?page='+page);
if(xmlconf.parseError.errorCode!=0)...{
alert("无法加载部门列表!原因:"+xmlconf.parseError.reason+" 地址:"+sitedata);
return;
}
//alert(this.rows[0].cells.length)
var tn = xmlconf.selectNodes(nodes);
var mytr,mytd;
for (var r = 0;r < tn.length;r++)...{
mytr=this.insertRow();
for(var c = 0;c < columns;c++)...{
mytd=mytr.insertCell();
mytd.innerText=tn.item(r).childNodes.item(c).text;
mytd.style.color="#336699";
mytd.onclick = mouseclick;
mytd.style.cursor="hand";
}
}
}
function disPage() ... {
window.status='第 '+currPage+' 页';
}
</ script >
</ PUBLIC:COMPONENT >
第三步:
数据源和组件都已定义好,我们可以使用了,建立test.html页面
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档 </ title >
< LINK href ="css/style.css" rel =stylesheet >
< style type ="text/css" > ...
<!--
.tabview{...}{ font-size:12px;behavior: url(htc/tablist.htc);}
-->
</ style >
</ head >
< body >
< table id ="mytab" width ="86%" border ="1" class ="tabview" nodes ="/sbgldatas/sbgldata" sitedata ="xml/sbgldatalist.asp" columns ="5" >
< tr >
< th > A </ th >
< th > B </ th >
< th > C </ th >
< th > D </ th >
< th > E </ th >
</ tr >
</ table >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档 </ title >
< LINK href ="css/style.css" rel =stylesheet >
< style type ="text/css" > ...
<!--
.tabview{...}{ font-size:12px;behavior: url(htc/tablist.htc);}
-->
</ style >
</ head >
< body >
< table id ="mytab" width ="86%" border ="1" class ="tabview" nodes ="/sbgldatas/sbgldata" sitedata ="xml/sbgldatalist.asp" columns ="5" >
< tr >
< th > A </ th >
< th > B </ th >
< th > C </ th >
< th > D </ th >
< th > E </ th >
</ tr >
</ table >
</ body >
</ html >
OK,到此,一个TABLE数据自定义组件完成了, 不过有些地方需要说明一下,比如TABLE的class、nodes、sitedata、columns属性,这些都是为tablist.htc文件定义的属性,如果您对HTC不太熟悉的话可以去GOOGLE一下,该TABEL组件还用很多可以扩充的地方,比如当前行编辑,删除,排序,交换列等等,另外我来有一个SELECT数据组件也是以HTC方法写的,在项目中挺好用。