WEB自定义数据组件

  

      大家在写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>

 第二步： 建立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","&nbsp;");
   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>

  OK，到此，一个TABLE数据自定义组件完成了，  不过有些地方需要说明一下，比如TABLE的class、nodes、sitedata、columns属性，这些都是为tablist.htc文件定义的属性，如果您对HTC不太熟悉的话可以去GOOGLE一下，该TABEL组件还用很多可以扩充的地方，比如当前行编辑，删除，排序，交换列等等，另外我来有一个SELECT数据组件也是以HTC方法写的，在项目中挺好用。