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

实现要求:在前期的工作中要实现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();
        }

呵呵,工作到此结束,如果哪位朋友有兴趣可以给我留言联系