javascript 读取XML数据,在页面中表现、编辑、保存

作者:联系我们

首先考虑用什么方法做,考虑到三个方式:1、C#拼HTML构造table,修改和保存通过Ajax实现。2、XML+XSL,展现和修改用两个XSL文件来做,Ajax修改、保存XML。3、GridView控件。 经过细致考虑,首先第三方案GridView控件满足不了需求,因为XML格式多样,可能涉及到很多的行、列合并和行、列表头合并。第一方案太麻烦,坐起来是细致活和体力活,需求变动后不好修改。所以选择第二方案。开始学习XPath、XSLT。AJAX用js异步调用一般处理文件的方式。 1、实现选择框的绑定时出现错误,最终发现是在读取XML时使用了异步方式与Ajax有冲突,用同步就可以解决了。 2、保存XML。修改后的数据怎么保存到XML了?通过Javascript保存,js不能保存,如果用js保存必须用hta;用AJax保存,怎么能让修改后的XML传到AJAX方法里去,瞎琢磨,试了几种方法,还真让我试出来了,源码 js: 复制代码 代码如下: var $=function {return document.getElementById;} var xmlHttp; var curControl; var curValue; function ToEdit(){ var xml = new ActiveXObject; xml.async = false; xml.load; var xsl = new ActiveXObject; xsl.async = false; xsl.load; document.write(xml.transformNode; document.close(); //绑定选择框 LoadSelect(); } //保存xml function Save(){ var oDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");//负责得到响应结果 oDoc.async = false; oDoc.resolveExternals = false; oDoc.load; 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; j0) data[i].text = combox.options[combox.selectedIndex].value; } } else { data[i].text = $.value; } } var strXML = oDoc.xml; var url="saveXML.ashx"; StartRequest(url,null,AfterEdit,strXML,"POST"); } function AfterEdit() { //可以不用下面两个if语句,没有用异步方式 if(xmlHttp.readyState==4) { if { var rtn = xmlHttp.responseText; if { alert; } else { alert; } } } function Show() { // Load XML var xml = new ActiveXObject; xml.async = false; xml.load; // Load XSL var xsl = new ActiveXObject; xsl.async = false; xsl.load; document.write(xml.transformNode; document.close(); } ///////////////////绑定下选择框//////////////////////// function LoadSelect() { var allcontrols = document.all; for(var j=0;j

1。 testlist.aspx页面:

统计 类别 系数 分析 比例1 比例2 比例3 比例4 比例5 比例6 比例7 红 1 01 5.0 2009-10-05 21111 21 21 21 2 2 3 4 4 2 2 2 3 1 2 4 4 2 1 1 小计: 绿 4 4 4 4 4 2 4 4 5 4 4 4 4 2 4 4 6 3 4 4 4 2 3 3 7 4 4 4 4 4 4 4 8 4 4 4 4 3 4 4 9 4 4 4 4 1 5.0 2009-10-14 小计: 蓝 10 4 4 4 4 1 5.0 2009-10-14 11 4 4 4 4 1 5.0 2009-10-14 12 4 4 4 4 1 5.0 2009-10-14 小计:

复制代码 代码如下:

显示页的xsl 复制代码 代码如下:

<html xmlns=";
<head runat="server">
<title></title>
<link rel="stylesheet" href="jscript/autoSuggest.css" type="text/css"/>
<link rel="stylesheet" href="jscript/ac.css" type="text/css"/>
<script language="Javascript" src="jscript/autoSuggest.js"></script>
<script language="Javascript" src="jscript/ac.js"></script>
function ACClient( queryurl, width, objInput, objLable )
{
this.xmldom = getXmlhttp();
this.queryurl = queryurl;
this.prolist = new Array();
this.divwidth = width;
this.objInput = objInput;
this.getEligible = function(ac) {
var eligible = new Array();
if (ac.inputText.length < 1) {
document.getElementById(objInput.name).value = "";
document.getElementById(objLable.name).value = "";
return eligible;
}
var strURL = this.queryurl + escape(ac.inputText) + "&rand=" + Math.random();
this.xmldom.open("GET", strURL, false);
try {
this.xmldom.send();
}
catch (e) {
return;
}
this.prolist = this.xmldom.responseXML.documentElement.selectNodes("/duxion/object");
if (0 == this.prolist.length) {
return eligible;
}
for (var i = 0; i < this.prolist.length; i++) {
if (i > 15)
break;
var node = this.prolist.item(i);
eligible[eligible.length] = node.getAttribute("fullcontent");
}
ac.div.style.width = this.divwidth;
return eligible;
};
this.useSuggestion = function( sel )
{
if( sel>=0 )
{
var node = this.prolist.item(sel);
if(typeof(node.getAttribute( "value" )) != "undefined")
document.getElementById(objInput.name).value = node.getAttribute( "value" );
else
document.getElementById(objInput.name).value = "";
if(typeof(node.getAttribute( "content" )) != "undefined")
document.getElementById(objLable.name).value = node.getAttribute( "content" );
else
document.getElementById(objLable.name).value = "";
if (this.objInput.name == "hidfreq_code") {
document.getElementById("txtfreq_name").value = node.getAttribute("Name");
document.getElementById("hidfreq_code").value = node.getAttribute("Code");
}
}
};
return this;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--div 用于显示下拉查询部分--%>
<div id="autosuggest" style="width:160px;font-size:12px;"><ul></ul></div>
<div>
<asp:TextBox ID="txtfreq_name" CssClass="needtext" runat="server" Width="100px"></asp:TextBox><asp:HiddenField
ID="hidfreq_code" runat="server" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
new AutoSuggest(document.getElementById('txtfreq_name'),
new ACClient("testXml.aspx?tag=yp_frequency&value=", "200px", document.getElementById('hidfreq_code'), document.getElementById('txtfreq_name')));
</script>

table demo

2。 供查询的xml的testxml.aspx.cs文件

编辑页的xsl 复制代码 代码如下:

复制代码 代码如下:

本文由杏彩发布,转载请注明来源

关键词: