首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript 读取XML数据，在页面中展现、编辑、保存的实现

Posted in Javascript onOctober 27, 2009

首先考虑用什么方法做，考虑到三个方式：1、C#拼HTML构造table，修改和保存通过Ajax实现。2、XML+XSL，展现和修改用两个XSL文件来做，Ajax修改、保存XML。3、GridView控件。
经过细致考虑，首先第三方案GridView控件满足不了需求，因为XML格式多样，可能涉及到很多的行、列合并和行、列表头合并。第一方案太麻烦，坐起来是细致活和体力活，需求变动后不好修改。所以选择第二方案。开始学习XPath、XSLT。AJAX用js异步调用一般处理文件(ashx)的方式。
1、实现选择框（通过Ajax读取数据库，绑定数据）的绑定时出现错误，最终发现是在读取XML时使用了异步方式与Ajax有冲突，用同步就可以解决了。
2、保存XML。修改后的数据怎么保存到XML了？通过Javascript保存，js不能保存，如果用js保存必须用hta；用AJax保存，怎么能让修改后的XML传到AJAX方法里去，瞎琢磨，试了几种方法，还真让我试出来了，源码
js： 

var $=function (id){return document.getElementById(id);} 
var xmlHttp; 
var curControl; 
var curValue; 
function ToEdit(){ 
var xml = new ActiveXObject("Microsoft.XMLDOM"); 
xml.async = false; 
xml.load("myxml.xml"); 
var xsl = new ActiveXObject("Microsoft.XMLDOM"); 
xsl.async = false; 
xsl.load("myxsl_edit.xsl"); 
document.write(xml.transformNode(xsl)); 
document.close(); 
//绑定选择框 
LoadSelect(); 
} 
//保存xml 
function Save(){ 
var oDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");//负责得到响应结果 
oDoc.async = false; 
oDoc.resolveExternals = false; 
oDoc.load("myxml.xml"); 
var data = oDoc.selectNodes("//Data[@IsEdit='1']");//读取所有请求大类所属小类的类名 
for(var i=0; i < data.length; i++) 
{ 
var nodeEdit; 
var nodeID; 
var nodeType; 
for(var j=0; j<data[i].attributes.length; j++) 
{ 
if(data[i].attributes[j].nodeName=="IsEdit") 
{ 
nodeEdit = data[i].attributes[j].nodeValue; 
} 
else if(data[i].attributes[j].nodeName=="id") 
{ 
nodeID = data[i].attributes[j].nodeValue; 
} 
else if(data[i].attributes[j].nodeName=="Type") 
{ 
nodeType = data[i].attributes[j].nodeValue; 
} 
} 
if(nodeType=="Combox") 
{ 
var combox = $(nodeID); 
if(combox!=null) 
{ 
if(combox.options.length>0) 
data[i].text = combox.options[combox.selectedIndex].value; 
} 
} 
else 
{ 
data[i].text = $(nodeID).value; 
} 
} 
var strXML = oDoc.xml; 
var url="saveXML.ashx"; 
StartRequest(url,null,AfterEdit,strXML,"POST"); 
} 
function AfterEdit() 
{ 
//可以不用下面两个if语句，没有用异步方式 
if(xmlHttp.readyState==4) 
{ 
if(xmlHttp.status==200) 
{ 
var rtn = xmlHttp.responseText; 
if(rtn=="true") 
{ 
alert("保存成功！"); 
} 
else 
{ 
alert("保存失败！"); 
} 
Show(); 
} 
} 
} 
function Show() 
{ 
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM"); 
xml.async = false; 
xml.load("myxml.xml"); 
// Load XSL 
var xsl = new ActiveXObject("Microsoft.XMLDOM"); 
xsl.async = false; 
xsl.load("myxsl.xsl"); 
document.write(xml.transformNode(xsl)); 
document.close(); 
} 
///////////////////绑定下选择框//////////////////////// 
function LoadSelect() 
{ 
var allcontrols = document.all; 
for(var j=0;j<allcontrols.length;j++) 
{ 
if(allcontrols[j].tagName=="SELECT") 
{ 
var datainfo = allcontrols[j].flex; 
//datainfo:tablename^value^name^selectedvalue 
var datainfo_sp = datainfo.split('</p>); 
if(datainfo_sp.length>2) 
{ 
var selectID = datainfo_sp[0]; 
var selectedValue = datainfo_sp[2]; 
var datainfo_sp_sp = datainfo_sp[1].split('^'); 
var table = datainfo_sp_sp[0]; 
var value = datainfo_sp_sp[1]; 
var text = datainfo_sp_sp[2]; 
var control = $(selectID); 
var param = "table=" + table + "&value=" + value + "&text=" + text; 
curControl = control; 
curValue = selectedValue; 
var callback = BindSelect; 
StartRequest("getDataSet.ashx", param, BindSelect,null,"GET"); 
} 
} 
} 
} 
function BindSelect() 
{ 
//可以不用下面两个if语句，没有用异步方式 
if(xmlHttp.readyState==4) 
{ 
if(xmlHttp.status==200) 
{ 
var control = curControl; 
var selectedValue = curValue; 
var data = xmlHttp.responseText; 
if(data != null || data !="") 
{ 
control.add(new Option("","")); 
var data_sp = data.split('</p>); 
for(var i=0; i<data_sp.length; i++) 
{ 
var data_sp_sp = data_sp[i].split('^'); 
if(data_sp_sp.length>1) 
control.add(new Option(data_sp_sp[1], data_sp_sp[0])); 
} 
for(var i =0;i<control.options.length;i++) 
{ 
if(control.options[i].value == selectedValue) 
{ 
control.selectedIndex = i; 
break; 
} 
} 
} 
} 
} 
} 
///////////////////绑定下选择框//////////////////////// 
///////////////////实现Ajax/////////////////////////// 
function StartRequest(url,param,callback,sendString,type) 
{ 
if(window.XMLHttpRequest) 
{ 
xmlHttp=new XMLHttpRequest();//mozilla浏览器 
} 
else if(window.ActiveXObject) 
{ 
try 
{ 
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");//ＩＥ旧版本 
} 
catch(e) 
{ 
try 
{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//ＩＥ新版本 
} 
catch(e) 
{ 
} 
} 
if(!xmlHttp) 
{ 
window.alert("不能创建XMLHTTPREQUEST对象!"); 
return false; 
} 
} 
var strURL = url + (param != "" && param!=null ? "?" + param : ""); 
sendString = "param=" + sendString; 
xmlHttp.open(type,strURL,false); 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") 
xmlHttp.onreadystatechange=callback; 
xmlHttp.send(sendString); 
}

xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="demo.xsl"?>
<Content Name="Content1">
<Table ExpandedColumnCount="9" ExpandedRowCount="16" DefaultColumnWidth="60" DefaultRowHeight="14.25">
<Row>
<Cell MergeAcross="9" align="center" Type="title">
<Data id="ID1" Type="String">统计</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="2" Type="header">
<Data id="ID2" Type="String">类别</Data>
</Cell>
<Cell MergeDown="2" Type="header">
<Data id="ID3" Type="String">系数</Data>
</Cell>
<Cell MergeAcross="7" Type="header">
<Data id="ID4" Type="String">分析</Data>
</Cell>
</Row>
<Row>
<Cell Type="header">
<Data id="ID5" Type="String">比例1</Data>
</Cell>
<Cell Type="header">
<Data id="ID6" Type="String">比例2</Data>
</Cell>
<Cell Type="header">
<Data id="ID7" Type="String">比例3</Data>
</Cell>
<Cell Type="header">
<Data id="ID8" Type="String">比例4</Data>
</Cell>
<Cell Type="header">
<Data id="ID9" Type="String">比例5</Data>
</Cell>
<Cell Type="header">
<Data id="ID10" Type="String">比例6</Data>
</Cell>
<Cell Type="header">
<Data id="ID11" Type="String">比例7</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="4" Type="header">
<Data id="ID12" Type="String">红</Data>
</Cell>
<Cell Type="content">
<Data id="ID13" Type="Number">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID14" Type="Combox" IsEdit="1" DataSource="SexTypeInfo^SexType^CONTEXT">01</Data>
</Cell>
<Cell Type="content">
<Data id="ID15" Type="Double" IsEdit="1">5.0</Data>
</Cell>
<Cell Type="content">
<Data id="ID16" Type="Date" IsEdit="1">2009-10-05</Data>
</Cell>
<Cell Type="content">
<Data id="ID17" Type="String" IsEdit="1">21111</Data>
</Cell>
<Cell Type="content">
<Data id="ID18" Type="Number" IsEdit="1">21</Data>
</Cell>
<Cell Type="content">
<Data id="ID19" Type="Number" IsEdit="1">21</Data>
</Cell>
<Cell Type="content">
<Data id="ID20" Type="Number" IsEdit="1">21</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID21" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID22" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID23" Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data id="ID24" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID25" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID26" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID27" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID28" Type="Number">2</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID29" Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data id="ID30" Type="Number">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID31" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID32" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID33" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID34" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID35" Type="Number">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID36" Type="Number">1</Data>
</Cell>
</Row>
<Row>
<Cell MergeAcross="8" align="right">
<Data id="ID37" Type="String">小计：</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="7" Type="header">
<Data id="ID38" Type="String">绿</Data>
</Cell>
<Cell Type="content">
<Data id="ID39" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID40" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID41" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID42" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID43" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID44" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID45" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID46" Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID47" Type="Number">5</Data>
</Cell>
<Cell Type="content">
<Data id="ID48" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID49" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID50" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID51" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID52" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID53" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID54" Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID55" Type="Number">6</Data>
</Cell>
<Cell Type="content">
<Data id="ID56" Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data id="ID57" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID58" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID59" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID60" Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data id="ID61" Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data id="ID62" Type="Number">3</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID63" Type="Number">7</Data>
</Cell>
<Cell Type="content">
<Data id="ID64" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID65" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID66" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID67" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID68" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID69" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID70" Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID71" Type="Number">8</Data>
</Cell>
<Cell Type="content">
<Data id="ID72" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID73" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID74" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID75" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID76" Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data id="ID77" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID78" Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID79" Type="Number">9</Data>
</Cell>
<Cell Type="content">
<Data id="ID80" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID81" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID82" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID83" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID84" Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID85" Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data id="ID86" Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell MergeAcross="8" align="right">
<Data id="ID87" Type="String">小计：</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="4" Type="header">
<Data id="ID88" Type="String">蓝</Data>
</Cell>
<Cell Type="content">
<Data id="ID89" Type="Number">10</Data>
</Cell>
<Cell Type="content">
<Data id="ID90" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID91" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID92" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID93" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID94" Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID95" Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data id="ID96" Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID97" Type="Number">11</Data>
</Cell>
<Cell Type="content">
<Data id="ID98" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID99" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID100" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID101" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID102" Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID103" Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data id="ID104" Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data id="ID105" Type="Number">12</Data>
</Cell>
<Cell Type="content">
<Data id="ID106" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID107" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID108" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID109" Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data id="ID110" Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data id="ID111" Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data id="ID112" Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell MergeAcross="8" align="right">
<Data id="ID113" Type="String">小计：</Data>
</Cell>
</Row>
</Table>
</Content>
显示页的xsl 
<?xml version="1.0" encoding="utf-8"?> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/"> 
<html> 
<header> 
<title>table demo</title> 
<script src="calendar.js" src="calendar.js" type="text/javascript"></script> 
<script src="myjs.js" src="myjs.js" type="text/javascript"></script> 
<link type="text/css" href="css/StyleSheet.css" href="css/StyleSheet.css" rel="stylesheet" /> 
</header> 
<body> 
<form runat="server"> 
<div width="100%" align="right"> 
<input type="button" onclick="ToEdit()" value="编辑"></input> 
</div> 
<xsl:for-each select="/Content/Table"> 
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="admintable"> 
<xsl:variable name="width"> 
<xsl:value-of select="concat(@DefaultColumnWidth,'px')"/> 
</xsl:variable> 
<xsl:variable name="height"> 
<xsl:value-of select="@DefaultRowHeight"/> 
</xsl:variable> 
<xsl:variable name="columncount"> 
<xsl:value-of select="@ExpandedColumnCount"/> 
</xsl:variable> 
<xsl:variable name="rowcount"> 
<xsl:value-of select="@ExpandedRowCount"/> 
</xsl:variable> 
<xsl:for-each select="Row"> 
<tr> 
<xsl:variable name="oncetime"> 
<xsl:choose> 
<xsl:when test="position()=1"> 
<xsl:value-of select="1"/> 
</xsl:when> 
<xsl:when test="position()!=1"> 
<xsl:value-of select="n "/> 
</xsl:when> 
</xsl:choose> 
</xsl:variable> 
<xsl:for-each select="Cell"> 
<td> 
<xsl:attribute name="align"> 
<xsl:choose> 
<xsl:when test="@align!=''"> 
<xsl:value-of select="@align"/> 
</xsl:when> 
<xsl:when test="boolean('true')">center</xsl:when> 
</xsl:choose> 
</xsl:attribute> 
<xsl:attribute name="class"> 
<xsl:choose> 
<xsl:when test="@Type='title'">title</xsl:when> 
<xsl:when test="@Type='header'">header</xsl:when> 
<xsl:when test="@Type='content'">content</xsl:when> 
<xsl:when test="boolean('true')">other</xsl:when> 
</xsl:choose> 
</xsl:attribute> 
<xsl:if test="position()=1"> 
<xsl:attribute name="height"> 
<xsl:value-of select="$height"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:if test="$oncetime=1 and @MergeDown=''"> 
<xsl:attribute name="width"> 
<xsl:value-of select="$width"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:if test="@MergeDown!=''"> 
<xsl:attribute name="rowspan"> 
<xsl:value-of select="@MergeDown"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:if test="@MergeAcross!=''"> 
<xsl:attribute name="colspan"> 
<xsl:value-of select="@MergeAcross"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:value-of select="Data/text()"/> 
</td> 
</xsl:for-each> 
</tr> 
</xsl:for-each> 
</table> 
</xsl:for-each> 
</form> 
</body> 
</html> 
</xsl:template> 
</xsl:stylesheet>

编辑页的xsl 
<?xml version="1.0" encoding="utf-16"?> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:output method="html"/> 
<xsl:template match="/"> 
<html> 
<head> 
<title>table demo</title> 
<script src="calendar.js" src="calendar.js" type="text/javascript"></script> 
<script src="myjs.js" src="myjs.js" type="text/javascript"></script> 
<link type="text/css" href="css/StyleSheet.css" href="css/StyleSheet.css" rel="stylesheet" /> 
</head> 
<body> 
<form id="form1" method="post"> 
<div> 
<div width="100%" align="right"> 
<input id="btSave" type="button" onclick="Save()" runat="server" value="保存"></input> 
<input id="btCancel" type="button" onclick="Show()" runat="server" value="取消"></input> 
</div> 
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="admintable"> 
<xsl:for-each select="Content/Table"> 
<xsl:variable name="width"> 
<xsl:value-of select="concat(@DefaultColumnWidth,'px')"/> 
</xsl:variable> 
<xsl:variable name="height"> 
<xsl:value-of select="@DefaultRowHeight"/> 
</xsl:variable> 
<xsl:variable name="columncount"> 
<xsl:value-of select="@ExpandedColumnCount"/> 
</xsl:variable> 
<xsl:variable name="rowcount"> 
<xsl:value-of select="@ExpandedRowCount"/> 
</xsl:variable> 
<xsl:for-each select="Row"> 
<tr> 
<xsl:variable name="oncetime"> 
<xsl:choose> 
<xsl:when test="position()=1"> 
<xsl:value-of select="1"/> 
</xsl:when> 
<xsl:when test="position()!=1"> 
<xsl:value-of select="n "/> 
</xsl:when> 
</xsl:choose> 
</xsl:variable> 
<xsl:for-each select="Cell"> 
<td> 
<xsl:attribute name="align"> 
<xsl:choose> 
<xsl:when test="@align!=''"> 
<xsl:value-of select="@align"/> 
</xsl:when> 
<xsl:when test="boolean('true')">center</xsl:when> 
</xsl:choose> 
</xsl:attribute> 
<xsl:attribute name="class"> 
<xsl:value-of select="'adminth'"/> 
</xsl:attribute> 
<xsl:if test="position()=1"> 
<xsl:attribute name="height"> 
<xsl:value-of select="$height"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:if test="$oncetime=1 and @MergeDown=''"> 
<xsl:attribute name="width"> 
<xsl:value-of select="$width"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:if test="@MergeDown!=''"> 
<xsl:attribute name="rowspan"> 
<xsl:value-of select="@MergeDown"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:if test="@MergeAcross!=''"> 
<xsl:attribute name="colspan"> 
<xsl:value-of select="@MergeAcross"/> 
</xsl:attribute> 
</xsl:if> 
<xsl:attribute name="class"> 
<xsl:choose> 
<xsl:when test="@Type='title'">title</xsl:when> 
<xsl:when test="@Type='header'">header</xsl:when> 
<xsl:when test="@Type='content'">content</xsl:when> 
<xsl:when test="boolean('true')">other</xsl:when> 
</xsl:choose> 
</xsl:attribute> 
<xsl:for-each select="Data"> 
<xsl:choose> 
<xsl:when test="@IsEdit='1' and @Type='String'"> 
<input type="text"> 
<xsl:attribute name="value"> 
<xsl:value-of select="text()"/> 
</xsl:attribute> 
<xsl:attribute name="id"> 
<xsl:value-of select="@id"/> 
</xsl:attribute> 
<xsl:attribute name="style"> 
<xsl:value-of select="concat('width:',$width)"/> 
</xsl:attribute> 
</input> 
</xsl:when> 
<xsl:when test="@IsEdit='1' and @Type='Date'"> 
<input type="text" onclick="setday(this)"> 
<xsl:attribute name="value"> 
<xsl:value-of select="text()"/> 
</xsl:attribute> 
<xsl:attribute name="id"> 
<xsl:value-of select="@id"/> 
</xsl:attribute> 
<xsl:attribute name="style"> 
<xsl:value-of select="concat('width:',concat(string(number(translate($width,'px',''))+30),'px'))"/> 
</xsl:attribute> 
</input> 
</xsl:when> 
<xsl:when test="@IsEdit='1' and @Type='Number'"> 
<input type="text"> 
<xsl:attribute name="value"> 
<xsl:value-of select="text()"/> 
</xsl:attribute> 
<xsl:attribute name="id"> 
<xsl:value-of select="@id"/> 
</xsl:attribute> 
<xsl:attribute name="style"> 
<xsl:value-of select="concat('width:',$width)"/> 
</xsl:attribute> 
</input> 
</xsl:when> 
<xsl:when test="@IsEdit='1' and @Type='Double'"> 
<input type="text"> 
<xsl:attribute name="value"> 
<xsl:value-of select="text()"/> 
</xsl:attribute> 
<xsl:attribute name="id"> 
<xsl:value-of select="@id"/> 
</xsl:attribute> 
<xsl:attribute name="style"> 
<xsl:value-of select="concat('width:',$width)"/> 
</xsl:attribute> 
</input> 
</xsl:when> 
<xsl:when test="@IsEdit='1' and @Type='Combox'"> 
<select> 
<xsl:attribute name="id"> 
<xsl:value-of select="@id"/> 
</xsl:attribute> 
<xsl:attribute name="flex"> 
<xsl:value-of select="concat(concat(@id,'</p><p><br></p>),concat(@DataSource,'</p><p><br></p>),concat(text(),'</p><p><br></p>))"></xsl:value-of> 
</xsl:attribute> 
<xsl:attribute name="style"> 
<xsl:value-of select="concat('width:',$width)"/> 
</xsl:attribute> 
</select> 
</xsl:when> 
<xsl:when test="boolean('true')"> 
<span> 
<xsl:value-of select="text()"/> 
<xsl:attribute name="id"> 
<xsl:value-of select="@id"/> 
</xsl:attribute> 
<xsl:attribute name="style"> 
<xsl:value-of select="concat('width:',$width)"/> 
</xsl:attribute> 
</span> 
</xsl:when> 
</xsl:choose> 
</xsl:for-each> 
</td> 
</xsl:for-each> 
</tr> 
</xsl:for-each> 
</xsl:for-each> 
</table> 
</div> 
</form> 
</body> 
</html> 
</xsl:template> 
</xsl:stylesheet>

ajax实现得到数据集的ashx代码 
<%@ WebHandler Language="C#" Class="getDataSet" %> 
using System; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient; 
using System.Text; 
using DHCC.HISHR.BO; 
public class getDataSet : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string result = ""; 
string table = context.Request.Params["table"].ToString().Trim(); 
string value = context.Request.Params["value"].ToString().Trim(); 
string text = context.Request.Params["text"].ToString().Trim(); 
string sql = "SELECT " + value + "," + text + " FROM HISHR." + table + " "; 
BOSQLExecuter SQLexec = new BOSQLExecuter(); 
DataSet ds = SQLexec.GetDataSetSQLExecuter(sql); 
if (ds != null) 
if (ds.Tables.Count > 0) 
{ 
DataTable dt = ds.Tables[0]; 
foreach (DataRow dr in dt.Rows) 
{ 
result += "$" + dr[value].ToString() + "^" + dr[text].ToString(); 
} 
if (result.Length > 0) 
result = result.Substring(1); 
} 
//根据ＨＴＴＰ局部请求返回流到页面 
context.Response.Write(result); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

ajax保存XML的ashx代码 
<%@ WebHandler Language="C#" Class="saveXML" %> 
using System; 
using System.Web; 
using System.Xml; 
using System.IO; 
public class saveXML : IHttpHandler 
{ 
public string xml; 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string path = System.Web.HttpContext.Current.Request.PhysicalApplicationPath; 
string strXML =context.Request.Form[0]; 
try 
{ 
if (File.Exists(path + "\\myxml.xml")) 
{ 
XmlDocument xmldoc = new XmlDocument(); 
xmldoc.LoadXml(strXML); 
xmldoc.Save(path + "\\myxml.xml"); 
context.Response.Write("true"); 
} 
} 
catch 
{ 
context.Response.Write("false"); 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

主页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="myjs.js" type="text/javascript"></script>
<script type="text/javascript">
Show();
</script>
css 
table.admintable { 
border:1px solid #AEDEF2; 
border-collapse: collapse; 
} 
td.other{ 
color: #0066cc; 
font-size:13px; 
color:#05B; 
font-family: 新宋体; 
border:1px solid #AEDEF2; 
} 
td.title { 
width: 671px; 
color: #0066cc; 
background-color: #eef6fe; 
font-size:15px; 
color:#05B; 
border:1px solid #AEDEF2; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#AEDEF2,endColorStr=ghostwhite); 
} 
td.header { 
width: 671px; 
color: #0066cc; 
background-color: #eef6fe; 
font-size:14px; 
color:#05B; 
border:1px solid #AEDEF2; 
} 
td.content { 
border:1px solid #AEDEF2; 
background:ghostwhite; 
font-size:13px; 
font-family: 新宋体; 
color: #333; 
}

显示数据页图

javascript 读取XML数据，在页面中展现、编辑、保存的实现

编辑数据页图

javascript 读取XML数据，在页面中展现、编辑、保存的实现

javascript 读取XML数据，在页面中展现、编辑、保存的实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
jquery实现带缩略图的可定制高度画廊效果（5种）
Aug 28 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Ajax+Json 级联菜单实现代码
Oct 27 #Javascript
javascript 关于# 和 void的区别分析
Oct 26 #Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 #Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 #Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 #Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 #Javascript
几个javascript操作word的参考代码
Oct 26 #Javascript
通知(159) 观后感(479) 文书(291) 闭幕词(9) 申请书(21) 慰问信(53) 开幕词(63) 导游词(322) 计划(88) 实用文书(952)
You might like
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP彩蛋信息介绍和阻止泄漏的方法（隐藏功能）
2014/08/06 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
解析微信JS-SDK配置授权，实现分享接口
2016/12/09 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
python中list常用操作实例详解
2015/06/03 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python实现快递价格查询系统
2020/03/03 Python
美国家用电器和电子产品商店：Abt
2016/09/06 全球购物
英国奢侈品牌时尚购物平台：Farfetch（支持中文）
2020/02/18 全球购物
自我评价中英文语句
2013/11/30 职场文书
民生工作实施方案
2014/05/31 职场文书
爱护公物标语
2014/06/24 职场文书
幼师求职自荐信
2015/03/26 职场文书
小学同学聚会感言
2015/07/30 职场文书
入党申请书怎么写?
2019/06/11 职场文书