先记录一下自己最近的积累吧(XSL+XML导出及JS对XML的操作)

最新推荐文章于 2021-06-01 20:56:11 发布

转载最新推荐文章于 2021-06-01 20:56:11 发布 · 163 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/tnspop/archive/2011/12/30/2307292.html

实现要求:在前期的工作中要实现silverlight工作流编辑器与web业务层的信息交互,当然也可以不通过web页面,不过需要架设通信服务通道,可以考虑在v2.0中实现.

在silverlight与web页面以XML作用信息载体,在silverlight中进行解析封装,在web页面中以js来对xml进行解析封装,因为xml格式是

<?xml version="1.0" encoding="utf-8"?>
<ParticipatorInfo>
<RoleList>
<RoleInfo ID='1' Name='234' />
<RoleInfo ID='2' Name='234' />
<RoleInfo ID='3' Name='234' />
<RoleInfo ID='4' Name='234' />
</RoleList>
<DeptList>
<DeptInfo ID='5' Name='234234' />
<DeptInfo ID='6' Name='234234' />
</DeptList>
<PostList>
<PostInfo ID='7' Name='234234234' />
</PostList>
<UserList>
<UserInfo ID='8' Name='23242432' />
</UserList>
</ParticipatorInfo>

需要在web页面中显示这些信息,方案一是通过后台将xml作为数据源绑定,方案二是通过数据岛的形式绑定到web页中的table中,

考虑到页面中操作,绑定,显示的分离,选择第二种方案,它可以保证xml的独立性,添删改信息可以通过js对xml对象进行操作.

但table绑定xml数据岛要求xml的格式,上述xml不符合要求,不知有什么更好的解决方法

在对xml进行格式化转换的时候可以用xsl来进行格式化,新建一个xsl来展示xml数据如下代码

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--File Name:xsl-->
<xsl:template match="/">
<table border="1" bgcolor="#4eb7de" align="center">
<tr>
<th>类型</th>
<th>参与者</th>
</tr>
<xsl:apply-templates select="//RoleInfo"/>
<xsl:apply-templates select="//DeptInfo"/>
<xsl:apply-templates select="//PostInfo"/>
<xsl:apply-templates select="//UserInfo"/>
</table>
</xsl:template>
<xsl:template match="//RoleInfo">
<tr>
<td>角色</td>
<td>
<xsl:value-of select="@Name"/>
</td>
</tr>
</xsl:template>
<xsl:template match="//DeptInfo">
<tr>
<td>组织结构</td>
<td>
<xsl:value-of select="@Name"/>
</td>
</tr>
</xsl:template>
<xsl:template match="//PostInfo">
<tr>
<td>岗位</td>
<td>
<xsl:value-of select="@Name"/>
</td>
</tr>
</xsl:template>
<xsl:template match="//UserInfo">
<tr>
<td>用户</td>
<td>
<xsl:value-of select="@Name"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>

然后通过js脚本将此xml以该xsl格式输出

web页面中定义得到siverlight载体页面中的xml字符串函数,转换xsl函数,输出函数代码如下

//加载自流程编辑器的XML
        function loadxml() {
var xmlstr = window.dialogArguments.SendPart();
            xmldom = createXml(xmlstr);//将xml字符串转换为xml对象
            writediv();//将xml对象输出到div中
        }
//将xml对象内容格式化输出div中
        function writediv() {
            document.getElementById('divDataArea').innerHTML = transxmlbyxsl(xmldom);//将xml对象以xsl格式转换
        }
//将流程编辑器中的string(xml) 转换成xml对象
        function createXml(str) {
var xml;
if (document.all) {
                xml = new ActiveXObject("Microsoft.XMLDOM");
                xml.loadXML(str);
            }
else {
                xml = new DOMParser().parseFromString(str, "text/xml");
            }
            xml.async = false
return xml;
        }
//将格式化后的xml对象输出
        function transxmlbyxsl(dom) {
var xsl = new ActiveXObject("Microsoft.XMLDOM")
            xsl.async = false
            xsl.load("ParticipatorInfo.xsl")
return dom.transformNode(xsl)
        }

到此xml转换xsl格式输出完成

在添加,删除,修改可对数据源xml操作,然后重新设用wirtediv()函数输出,代码如下

//移除xml对象的节点
        function removeNode(type, id) {
var parentnode = type;
var pnode = xmldom.selectSingleNode("//" + parentnode);
var snodes = xmldom.selectNodes("//" + parentnode.replace("List", "Info"));
for (var i = 0; i < snodes.length; i++) {
if (snodes[i].attributes[0].value == id) {
                    pnode.removeChild(snodes[i]);
break;
                }
            }
            writediv();
        }
//添加xml对象的节点
        function addNode(type, name, id) {
if (id == '_0')
return;
var parentnode = type;
var pnode = xmldom.selectSingleNode("//" + parentnode); //父亲节点
            var snodes = xmldom.selectNodes("//" + parentnode.replace("List", "Info"));
for (var i = 0; i < snodes.length; i++) {
if (snodes[i].attributes[0].value == id)
return;
            }
var snode = xmldom.createElement(parentnode.replace("List", "Info")); //创建一个字节点
            var attrid = xmldom.createAttribute("ID");
            attrid.value = id;
            snode.setAttributeNode(attrid);
var attrname = xmldom.createAttribute("Name");
            attrname.value = name;
            snode.setAttributeNode(attrname);
            pnode.appendChild(snode);
            writediv();
        }