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

日期：2020-06-12 栏目：程序人生 浏览：次

首先考虑用什么方法做，考虑到三个方式：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="https://www.jb51.net/demo.xsl"?>
<Content>
<Table ExpandedColumnCount="9" ExpandedRowCount="16" DefaultColumnWidth="60" DefaultRowHeight="14.25">
<Row>
<Cell MergeAcross="9" Type="title">
<Data Type="String">统计</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="2" Type="header">
<Data Type="String">类别</Data>
</Cell>
<Cell MergeDown="2" Type="header">
<Data Type="String">系数</Data>
</Cell>
<Cell MergeAcross="7" Type="header">
<Data Type="String">分析</Data>
</Cell>
</Row>
<Row>
<Cell Type="header">
<Data Type="String">比例1</Data>
</Cell>
<Cell Type="header">
<Data Type="String">比例2</Data>
</Cell>
<Cell Type="header">
<Data Type="String">比例3</Data>
</Cell>
<Cell Type="header">
<Data Type="String">比例4</Data>
</Cell>
<Cell Type="header">
<Data Type="String">比例5</Data>
</Cell>
<Cell Type="header">
<Data Type="String">比例6</Data>
</Cell>
<Cell Type="header">
<Data Type="String">比例7</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="4" Type="header">
<Data Type="String">红</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Combox" IsEdit="1" DataSource="SexTypeInfo^SexType^CONTEXT">01</Data>
</Cell>
<Cell Type="content">
<Data Type="Double" IsEdit="1">5.0</Data>
</Cell>
<Cell Type="content">
<Data Type="Date" IsEdit="1">2009-10-05</Data>
</Cell>
<Cell Type="content">
<Data Type="String" IsEdit="1">21111</Data>
</Cell>
<Cell Type="content">
<Data Type="Number" IsEdit="1">21</Data>
</Cell>
<Cell Type="content">
<Data Type="Number" IsEdit="1">21</Data>
</Cell>
<Cell Type="content">
<Data Type="Number" IsEdit="1">21</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">1</Data>
</Cell>
</Row>
<Row>
<Cell MergeAcross="8">
<Data Type="String">小计：</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="7" Type="header">
<Data Type="String">绿</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">5</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">6</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">2</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">3</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">7</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">8</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">3</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">9</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell MergeAcross="8">
<Data Type="String">小计：</Data>
</Cell>
</Row>
<Row>
<Cell MergeDown="4" Type="header">
<Data Type="String">蓝</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">10</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">11</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell Type="content">
<Data Type="Number">12</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Number">4</Data>
</Cell>
<Cell Type="content">
<Data Type="Combox" DataSource="SexTypeInfo">1</Data>
</Cell>
<Cell Type="content">
<Data Type="Double">5.0</Data>
</Cell>
<Cell Type="content">
<Data Type="Date">2009-10-14</Data>
</Cell>
</Row>
<Row>
<Cell MergeAcross="8">
<Data Type="String">小计：</Data>
</Cell>
</Row>
</Table>
</Content>
显示页的xsl

复制代码 代码如下:

上一篇：html 锁定页面(js遮罩层弹出div效果)
下一篇：Ajax+Json 级联菜单实现代码

内容版权声明：除非注明，否则皆为本站原创文章。

转载注明出处：https://www.heiqu.com/wjyzwx.html

相关推荐