首页
所有分类
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 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
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
远程连接(2) 逻辑备份(1) 轮询锁(1) 异步机制(1) into outfile(1) 索引树扫描(1) 限流器(1) 全表扫描(1) sql模式(1) springCloud(6)
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php去除HTML标签实例
2013/11/06 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
asp 取文本框名称代码
2008/12/02 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JS数组去重（4种方法）
2017/03/27 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
玩转python爬虫之正则表达式
2016/02/17 Python
python与字符编码问题
2019/05/24 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
adidas澳大利亚官方网站：adidas Australia
2018/04/15 全球购物
苹果音乐订阅：Apple Music
2018/08/02 全球购物
Famous Footwear加拿大：美国多品牌运动休闲鞋店
2018/12/05 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
高三学习决心书
2014/03/11 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
遗愿清单观后感
2015/06/09 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
2019生态环境保护倡议书！
2019/07/03 职场文书