需求:xml包含html标签比如talbe等,同时包含填充html的table数据,首先加载xml渲染出xml中的html页面,然后用js获取xml的数据填充到html相应的位置
第一步:创建一个加载xml的函数
function loadXmlFile(xmlFile) {
var xmlDom = null;
if (window.ActiveXObject) {
xmlDom = new ActiveXObject("Microsoft.XMLDOM");//上面代码的第一个行创建一个空的微软 XML 文档对象
xmlDom.async = "false";// 第二行关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.load(xmlFile);//第三行告知解析器加载路径为xmlFile的 XML 文档。
} else if (document.implementation && document.implementation.createDocument) {
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", xmlFile, false);
xmlhttp.send(null);
xmlDom = xmlhttp.responseXML;
} else {
xmlDom = null;
}
return xmlDom;
}
第二步:渲染xml中的html,IE兼容
var originalTemplateFilePath =“../yancheng.xml”
var xmlDocSave = loadXmlFile(originalTemplateFilePath);
// 显示xml的页面
$(xmlDocSave).find('structuredBody').children('component').each(function (index, ele) {
var thishtmlasxml = $(ele).children("text")[0];
if (window.ActiveXObject) {
var thishtml = thishtmlasxml.xml//IE显示代码
$('#kb_us_record_id').append(thishtml);
} else {
var s = new XMLSerializer(); //将对象序列化到 XML 文档中和从 XML 文档中反序列化对象
var thishtml = $(s.serializeToString(thishtmlasxml));
$('#kb_us_record_id').append(thishtml.html());
}
});
第三步:解析xml中的数据插入到html
$(".datagroup").each(function (index, ele) {
parseTemplate(originalTemplateFilePath, ele);//自定义方法
});
代码........................................................
yangcheng.xml格式如下:
<?xml version="1.0" encoding="UTF-8"?>
<ClinicalDocument>
<template>
<flag>xxx</flag>
</template>
<component>
<structuredBody>
<component>
<!--ultrasonic_report-->
<templateName>xxxxx</templateName>
<dGIndex></dGIndex>
<text>
<div class="datagroup">html相关代码,这些代码需要渲染到页面显示<div>
</text>
<section>
要插入到html页面的数据
</section>
</component>
</structuredBody>
</component>
</ClinicalDocument>