javascript,xml,xslt,html動態表單架構範例

1.檔案說明

tpl.xml:表單域及內容資料檔案,引用tpl.xsl

tpl.xslt:表單域呈現控制指令碼,引用tpl.js

tpl.js:表單域呈現輔助控制標本

tpl.html:用戶端html頁面.

2.運行效果

將tpl.xml,tpl.xslt,tpl.xsl,tpl.js,tpl.html放置在同一目錄下.在瀏覽器中運行tpl.html即可.

3.檔案內容

tpl.xml

-----------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="tpl.xslt" type="text/xsl" ?>
<tpl id="guid">
 <table >
  <cell index = "1" name="c1" datasource="yes/no" value="no"/>
  <cell index = "2" name="c2" datasource="" value="333"/>
  <cell index = "3" name="c3" datasource="" value="444"/>
  <cell index = "4" name="c4" datasource="" value="555"/>
  <cell index = "5" name="c5" datasource="en1/en2/en3" value="en2"/>
 </table>
</tpl>

-----------------------------------------------------------------------------------------------------

tpl.xslt

-----------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html" />
<xsl:template match="/">
<script src="tpl.js" type="text/javascript"></script>
<input type="hidden" id="h_text" value=''/>
<input type="hidden" id="h_select" value=''/>
<input type="hidden" id="h_tpl" value=''/>
<script type="text/javascript">pushValue('h_tpl','<xsl:value-of select="tpl/@id" />');</script>
<table width="151" border="0" align="center" cellpadding="0" cellspacing="0">
 <xsl:for-each select="tpl/table/cell">
  <xsl:apply-templates select="." mode="cell" />
 </xsl:for-each>
</table>
</xsl:template>
<xsl:template match="cell" mode="cell">
    <xsl:variable name="P_DATASOURCE">
        <xsl:value-of select="@datasource" />
    </xsl:variable>
    <xsl:variable name="P_TYPE">
        <xsl:value-of select="@type" />
    </xsl:variable>
    <tr>
 <td><xsl:value-of select="@name" /></td>
 <xsl:choose>
  <xsl:when   test= "string-length($P_DATASOURCE) = 0 ">
   <td>
        <input type="text" width="40" >
    <xsl:attribute name="id">
       <xsl:value-of select="concat('cell_',@index)" />
    </xsl:attribute>
    <xsl:attribute name="value">
       <xsl:value-of select="@value" />
    </xsl:attribute>
        </input>
        <script type="text/javascript">
        var sendValue = '';
        sendValue += '<xsl:value-of select="concat('cell_',@index)" />' + '|';
        sendValue += '<xsl:value-of select="@index" />' + '|';
        sendValue += '<xsl:value-of select="@name" />'+ '|';
        sendValue += '<xsl:value-of select="@datasource" />';
        pushValue('h_text',sendValue);
        </script>
   </td>
  </xsl:when>
  <xsl:when   test= "string-length($P_DATASOURCE) > 0 ">
   <td>
        <select>
    <xsl:attribute name="id">
       <xsl:value-of select="concat('cell_',@index)" />
    </xsl:attribute>
        </select>
        <script type="text/javascript">prepareSelect('<xsl:value-of select="concat('cell_',@index)" />','<xsl:value-of select="$P_DATASOURCE" />','<xsl:value-of select="@value" />');</script>
        <script type="text/javascript">
        var sendValue = '';
        sendValue += '<xsl:value-of select="concat('cell_',@index)" />' + '|';
        sendValue += '<xsl:value-of select="@index" />' + '|';
        sendValue += '<xsl:value-of select="@name" />'+ '|';
        sendValue += '<xsl:value-of select="@datasource" />';
        pushValue('h_select',sendValue);
        </script>
   </td>
  </xsl:when>          
 </xsl:choose>
    </tr>
</xsl:template>
</xsl:stylesheet>

-----------------------------------------------------------------------------------------------------

tpl.js

-----------------------------------------------------------------------------------------------------

function prepareSelect(id,datasource,value)
{
    var selectObj = document.getElementById(id);
 var array = datasource.split('/');
 var selectIndex = -1;
 for(var i = 0; i < array.length;i++)
 {  
  var itemname = array[i];
  var itemvalue = array[i];
  var item = new Option(itemname,itemvalue);
  selectObj.options.add(item);
  if(itemvalue == value)
   selectIndex = i; 
  
 }
 selectObj.selectedIndex = selectIndex;
}
function pushValue(id,value)
{
 var hiddenObj = document.getElementById(id);
 if(hiddenObj.value == '')
  hiddenObj.value = value;
 else
  hiddenObj.value = hiddenObj.value + "^" + value;
}

-----------------------------------------------------------------------------------------------------

tpl.html

-----------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> demo </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
 function loadData()
 {
  var obj = document.getElementById('ifr');
  //get data from server
  obj.src = 'tpl.xml';
 }
 function saveData()
 {
  var obj = document.getElementById('ifr');
  var refDoc = obj.contentWindow.document;
  if(!refDoc.getElementById('h_text'))
  {
    alert('press load-button please.');
    return;
  }
  var txtArray = refDoc.getElementById('h_text').value.split('^');
  var selectArray = refDoc.getElementById('h_select').value.split('^');
  var tplId = refDoc.getElementById('h_tpl').value;
  var saveXml = '';
  saveXml += "<?xml version='1.0' encoding='utf-8' ?>";
  saveXml += "<?xml-stylesheet href='tpl.xslt' type='text/xsl' ?>";
  saveXml += "<tpl id='"+ tplId +"'>";
  saveXml += "<table >";
  for(var i=0;i<txtArray.length;i++ )
  {
   var id = txtArray[i].split('|')[0];
   var index = txtArray[i].split('|')[1];
   var value = refDoc.getElementById(id).value;
   var name =txtArray[i].split('|')[2];
   var datasource = txtArray[i].split('|')[3];
   saveXml += "<cell index='"+ index +"' name = '"+name+"' datasource='"+datasource+"' value='"+ value +"' />";
  }
  for(var i=0;i<selectArray.length;i++ )
  {
   var id = selectArray[i].split('|')[0];
   var index = selectArray[i].split('|')[1];
   var value = refDoc.getElementById(id).value;
   var name =selectArray[i].split('|')[2];
   var datasource = selectArray[i].split('|')[3];
   saveXml += "<cell index='"+ index +"'  name = '"+name+"' datasource='"+datasource+"' value='"+ value +"'/>";
  }
  saveXml += "</table >";
  saveXml += "</tpl>";
  alert(saveXml);
  //post to server then save
 }
  </script>
 </head>
 <body>
    <input type="button" value="load" onclick="loadData();" />
 <input type="button" value="save" onclick="saveData();" />
 <br/>
 <iframe id = "ifr" src="" />
 <br/> 
 </body>
</html>

-----------------------------------------------------------------------------------------------------