源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-11-14 05:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript 读取XML数据,在页面中展现、编辑、保存的实现
首先考虑用什么方法做,考虑到三个方式: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:
[url=demo.xsl]<Content Name="Content1"> <Table ExpandedColumnCount="9" ExpandedRowCount="16" DefaultColumnWidth="60" DefaultRowHeight="14.25"> <Row> <Cell MergeAcross="9" align="center" Type="title"> <Data id="ID1" Type="String">统计</Data> </Cell> </Row> <Row> <Cell MergeDown="2" Type="header"> <Data id="ID2" Type="String">类别</Data> </Cell> <Cell MergeDown="2" Type="header"> <Data id="ID3" Type="String">系数</Data> </Cell> <Cell MergeAcross="7" Type="header"> <Data id="ID4" Type="String">分析</Data> </Cell> </Row> <Row> <Cell Type="header"> <Data id="ID5" Type="String">比例1</Data> </Cell> <Cell Type="header"> <Data id="ID6" Type="String">比例2</Data> </Cell> <Cell Type="header"> <Data id="ID7" Type="String">比例3</Data> </Cell> <Cell Type="header"> <Data id="ID8" Type="String">比例4</Data> </Cell> <Cell Type="header"> <Data id="ID9" Type="String">比例5</Data> </Cell> <Cell Type="header"> <Data id="ID10" Type="String">比例6</Data> </Cell> <Cell Type="header"> <Data id="ID11" Type="String">比例7</Data> </Cell> </Row> <Row> <Cell MergeDown="4" Type="header"> <Data id="ID12" Type="String">红</Data> </Cell> <Cell Type="content"> <Data id="ID13" Type="Number">1</Data> </Cell> <Cell Type="content"> <Data id="ID14" Type="Combox" IsEdit="1" DataSource="SexTypeInfo^SexType^CONTEXT">01</Data> </Cell> <Cell Type="content"> <Data id="ID15" Type="Double" IsEdit="1">5.0</Data> </Cell> <Cell Type="content"> <Data id="ID16" Type="Date" IsEdit="1">2009-10-05</Data> </Cell> <Cell Type="content"> <Data id="ID17" Type="String" IsEdit="1">21111</Data> </Cell> <Cell Type="content"> <Data id="ID18" Type="Number" IsEdit="1">21</Data> </Cell> <Cell Type="content"> <Data id="ID19" Type="Number" IsEdit="1">21</Data> </Cell> <Cell Type="content"> <Data id="ID20" Type="Number" IsEdit="1">21</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID21" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID22" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID23" Type="Number">3</Data> </Cell> <Cell Type="content"> <Data id="ID24" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID25" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID26" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID27" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID28" Type="Number">2</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID29" Type="Number">3</Data> </Cell> <Cell Type="content"> <Data id="ID30" Type="Number">1</Data> </Cell> <Cell Type="content"> <Data id="ID31" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID32" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID33" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID34" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID35" Type="Number">1</Data> </Cell> <Cell Type="content"> <Data id="ID36" Type="Number">1</Data> </Cell> </Row> <Row> <Cell MergeAcross="8" align="right"> <Data id="ID37" Type="String">小计:</Data> </Cell> </Row> <Row> <Cell MergeDown="7" Type="header"> <Data id="ID38" Type="String">绿</Data> </Cell> <Cell Type="content"> <Data id="ID39" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID40" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID41" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID42" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID43" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID44" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID45" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID46" Type="Number">4</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID47" Type="Number">5</Data> </Cell> <Cell Type="content"> <Data id="ID48" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID49" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID50" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID51" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID52" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID53" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID54" Type="Number">4</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID55" Type="Number">6</Data> </Cell> <Cell Type="content"> <Data id="ID56" Type="Number">3</Data> </Cell> <Cell Type="content"> <Data id="ID57" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID58" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID59" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID60" Type="Number">2</Data> </Cell> <Cell Type="content"> <Data id="ID61" Type="Number">3</Data> </Cell> <Cell Type="content"> <Data id="ID62" Type="Number">3</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID63" Type="Number">7</Data> </Cell> <Cell Type="content"> <Data id="ID64" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID65" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID66" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID67" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID68" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID69" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID70" Type="Number">4</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID71" Type="Number">8</Data> </Cell> <Cell Type="content"> <Data id="ID72" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID73" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID74" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID75" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID76" Type="Number">3</Data> </Cell> <Cell Type="content"> <Data id="ID77" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID78" Type="Number">4</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID79" Type="Number">9</Data> </Cell> <Cell Type="content"> <Data id="ID80" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID81" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID82" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID83" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID84" Type="Combox" DataSource="SexTypeInfo">1</Data> </Cell> <Cell Type="content"> <Data id="ID85" Type="Double">5.0</Data> </Cell> <Cell Type="content"> <Data id="ID86" Type="Date">2009-10-14</Data> </Cell> </Row> <Row> <Cell MergeAcross="8" align="right"> <Data id="ID87" Type="String">小计:</Data> </Cell> </Row> <Row> <Cell MergeDown="4" Type="header"> <Data id="ID88" Type="String">蓝</Data> </Cell> <Cell Type="content"> <Data id="ID89" Type="Number">10</Data> </Cell> <Cell Type="content"> <Data id="ID90" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID91" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID92" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID93" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID94" Type="Combox" DataSource="SexTypeInfo">1</Data> </Cell> <Cell Type="content"> <Data id="ID95" Type="Double">5.0</Data> </Cell> <Cell Type="content"> <Data id="ID96" Type="Date">2009-10-14</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID97" Type="Number">11</Data> </Cell> <Cell Type="content"> <Data id="ID98" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID99" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID100" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID101" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID102" Type="Combox" DataSource="SexTypeInfo">1</Data> </Cell> <Cell Type="content"> <Data id="ID103" Type="Double">5.0</Data> </Cell> <Cell Type="content"> <Data id="ID104" Type="Date">2009-10-14</Data> </Cell> </Row> <Row> <Cell Type="content"> <Data id="ID105" Type="Number">12</Data> </Cell> <Cell Type="content"> <Data id="ID106" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID107" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID108" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID109" Type="Number">4</Data> </Cell> <Cell Type="content"> <Data id="ID110" Type="Combox" DataSource="SexTypeInfo">1</Data> </Cell> <Cell Type="content"> <Data id="ID111" Type="Double">5.0</Data> </Cell> <Cell Type="content"> <Data id="ID112" Type="Date">2009-10-14</Data> </Cell> </Row> <Row> <Cell MergeAcross="8" align="right"> <Data id="ID113" Type="String">小计:</Data> </Cell> </Row> </Table> </Content> 显示页的xsl
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <header> <title>table demo</title> <script src="calendar.js" src="calendar.js" type="text/javascript"></script> <script src="myjs.js" src="myjs.js" type="text/javascript"></script> <link type="text/css" href="css/StyleSheet.css" href="css/StyleSheet.css" rel="stylesheet" /> </header> <body> <form runat="server"> <div width="100%" align="right"> <input type="button" onclick="ToEdit()" value="编辑"></input> </div> <xsl:for-each select="/Content/Table"> <table width="100%" border="1" cellpadding="0" cellspacing="0" class="admintable"> <xsl:variable name="width"> <xsl:value-of select="concat(@DefaultColumnWidth,'px')"/> </xsl:variable> <xsl:variable name="height"> <xsl:value-of select="@DefaultRowHeight"/> </xsl:variable> <xsl:variable name="columncount"> <xsl:value-of select="@ExpandedColumnCount"/> </xsl:variable> <xsl:variable name="rowcount"> <xsl:value-of select="@ExpandedRowCount"/> </xsl:variable> <xsl:for-each select="Row"> <tr> <xsl:variable name="oncetime"> <xsl:choose> <xsl:when test="position()=1"> <xsl:value-of select="1"/> </xsl:when> <xsl:when test="position()!=1"> <xsl:value-of select="n "/> </xsl:when> </xsl:choose> </xsl:variable> <xsl:for-each select="Cell"> <td> <xsl:attribute name="align"> <xsl:choose> <xsl:when test="@align!=''"> <xsl:value-of select="@align"/> </xsl:when> <xsl:when test="boolean('true')">center</xsl:when> </xsl:choose> </xsl:attribute> <xsl:attribute name="class"> <xsl:choose> <xsl:when test="@Type='title'">title</xsl:when> <xsl:when test="@Type='header'">header</xsl:when> <xsl:when test="@Type='content'">content</xsl:when> <xsl:when test="boolean('true')">other</xsl:when> </xsl:choose> </xsl:attribute> <xsl:if test="position()=1"> <xsl:attribute name="height"> <xsl:value-of select="$height"/> </xsl:attribute> </xsl:if> <xsl:if test="$oncetime=1 and @MergeDown=''"> <xsl:attribute name="width"> <xsl:value-of select="$width"/> </xsl:attribute> </xsl:if> <xsl:if test="@MergeDown!=''"> <xsl:attribute name="rowspan"> <xsl:value-of select="@MergeDown"/> </xsl:attribute> </xsl:if> <xsl:if test="@MergeAcross!=''"> <xsl:attribute name="colspan"> <xsl:value-of select="@MergeAcross"/> </xsl:attribute> </xsl:if> <xsl:value-of select="Data/text()"/> </td> </xsl:for-each> </tr> </xsl:for-each> </table> </xsl:for-each> </form> </body> </html> </xsl:template> </xsl:stylesheet>
编辑页的xsl
[url=css/StyleSheet.css]</head> <body> <form id="form1" method="post"> <div> <div width="100%" align="right"> <input id="btSave" type="button" onclick="Save()" runat="server" value="保存"></input> <input id="btCancel" type="button" onclick="Show()" runat="server" value="取消"></input> </div> <table width="100%" border="1" cellpadding="0" cellspacing="0" class="admintable"> <xsl:for-each select="Content/Table"> <xsl:variable name="width"> <xsl:value-of select="concat(@DefaultColumnWidth,'px')"/> </xsl:variable> <xsl:variable name="height"> <xsl:value-of select="@DefaultRowHeight"/> </xsl:variable> <xsl:variable name="columncount"> <xsl:value-of select="@ExpandedColumnCount"/> </xsl:variable> <xsl:variable name="rowcount"> <xsl:value-of select="@ExpandedRowCount"/> </xsl:variable> <xsl:for-each select="Row"> <tr> <xsl:variable name="oncetime"> <xsl:choose> <xsl:when test="position()=1"> <xsl:value-of select="1"/> </xsl:when> <xsl:when test="position()!=1"> <xsl:value-of select="n "/> </xsl:when> </xsl:choose> </xsl:variable> <xsl:for-each select="Cell"> <td> <xsl:attribute name="align"> <xsl:choose> <xsl:when test="@align!=''"> <xsl:value-of select="@align"/> </xsl:when> <xsl:when test="boolean('true')">center</xsl:when> </xsl:choose> </xsl:attribute> <xsl:attribute name="class"> <xsl:value-of select="'adminth'"/> </xsl:attribute> <xsl:if test="position()=1"> <xsl:attribute name="height"> <xsl:value-of select="$height"/> </xsl:attribute> </xsl:if> <xsl:if test="$oncetime=1 and @MergeDown=''"> <xsl:attribute name="width"> <xsl:value-of select="$width"/> </xsl:attribute> </xsl:if> <xsl:if test="@MergeDown!=''"> <xsl:attribute name="rowspan"> <xsl:value-of select="@MergeDown"/> </xsl:attribute> </xsl:if> <xsl:if test="@MergeAcross!=''"> <xsl:attribute name="colspan"> <xsl:value-of select="@MergeAcross"/> </xsl:attribute> </xsl:if> <xsl:attribute name="class"> <xsl:choose> <xsl:when test="@Type='title'">title</xsl:when> <xsl:when test="@Type='header'">header</xsl:when> <xsl:when test="@Type='content'">content</xsl:when> <xsl:when test="boolean('true')">other</xsl:when> </xsl:choose> </xsl:attribute> <xsl:for-each select="Data"> <xsl:choose> <xsl:when test="@IsEdit='1' and @Type='String'"> <input type="text"> <xsl:attribute name="value"> <xsl:value-of select="text()"/> </xsl:attribute> <xsl:attribute name="id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="style"> <xsl:value-of select="concat('width:',$width)"/> </xsl:attribute> </input> </xsl:when> <xsl:when test="@IsEdit='1' and @Type='Date'"> <input type="text" onclick="setday(this)"> <xsl:attribute name="value"> <xsl:value-of select="text()"/> </xsl:attribute> <xsl:attribute name="id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="style"> <xsl:value-of select="concat('width:',concat(string(number(translate($width,'px',''))+30),'px'))"/> </xsl:attribute> </input> </xsl:when> <xsl:when test="@IsEdit='1' and @Type='Number'"> <input type="text"> <xsl:attribute name="value"> <xsl:value-of select="text()"/> </xsl:attribute> <xsl:attribute name="id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="style"> <xsl:value-of select="concat('width:',$width)"/> </xsl:attribute> </input> </xsl:when> <xsl:when test="@IsEdit='1' and @Type='Double'"> <input type="text"> <xsl:attribute name="value"> <xsl:value-of select="text()"/> </xsl:attribute> <xsl:attribute name="id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="style"> <xsl:value-of select="concat('width:',$width)"/> </xsl:attribute> </input> </xsl:when> <xsl:when test="@IsEdit='1' and @Type='Combox'"> <select> <xsl:attribute name="id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="flex"> <xsl:value-of select="concat(concat(@id,'</p><p><br></p>),concat(@DataSource,'</p><p><br></p>),concat(text(),'</p><p><br></p>))"></xsl:value-of> </xsl:attribute> <xsl:attribute name="style"> <xsl:value-of select="concat('width:',$width)"/> </xsl:attribute> </select> </xsl:when> <xsl:when test="boolean('true')"> <span> <xsl:value-of select="text()"/> <xsl:attribute name="id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="style"> <xsl:value-of select="concat('width:',$width)"/> </xsl:attribute> </span> </xsl:when> </xsl:choose> </xsl:for-each> </td> </xsl:for-each> </tr> </xsl:for-each> </xsl:for-each> </table> </div> </form> </body> </html> </xsl:template> </xsl:stylesheet>
ajax实现得到数据集的ashx代码
ajax保存XML的ashx代码
[u]复制代码[/u] 代码如下:
<%@ WebHandler Language="C#" Class="saveXML" %> using System; using System.Web; using System.Xml; using System.IO; public class saveXML : IHttpHandler { public string xml; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string path = System.Web.HttpContext.Current.Request.PhysicalApplicationPath; string strXML =context.Request.Form[0]; try { if (File.Exists(path + "\\myxml.xml")) { XmlDocument xmldoc = new XmlDocument(); xmldoc.LoadXml(strXML); xmldoc.Save(path + "\\myxml.xml"); context.Response.Write("true"); } } catch { context.Response.Write("false"); } } public bool IsReusable { get { return false; } } }
主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script src="myjs.js" type="text/javascript"></script> <script type="text/javascript"> Show(); </script> css
[u]复制代码[/u] 代码如下:
table.admintable { border:1px solid #AEDEF2; border-collapse: collapse; } td.other{ color: #0066cc; font-size:13px; color:#05B; font-family: 新宋体; border:1px solid #AEDEF2; } td.title { width: 671px; color: #0066cc; background-color: #eef6fe; font-size:15px; color:#05B; border:1px solid #AEDEF2; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#AEDEF2,endColorStr=ghostwhite); } td.header { width: 671px; color: #0066cc; background-color: #eef6fe; font-size:14px; color:#05B; border:1px solid #AEDEF2; } td.content { border:1px solid #AEDEF2; background:ghostwhite; font-size:13px; font-family: 新宋体; color: #333; }
显示数据页图 [img]http://files.jb51.net/upload/20091027223014513.jpg[/img] 编辑数据页图 [img]http://files.jb51.net/upload/20091027223014887.jpg[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部