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方法写的，在项目中挺好用。