这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
首先考虑用什么方法做,考虑到三个方式: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:
最近需要做这样一个需求,数据保存在 XML 里,在页面上通过表格显示其内容,可以修改内容,再保存到 XML。下面把做这个东西的过程记录下来,做个笔记,也给需要的人一些帮助。
- 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");//IE旧版本
- }
- catch(e)
- {
- try
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE新版本
- }
- 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
显示页的 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
- <?xml version="1.0" encoding="utf-16" ?>
- <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:output method="html" />
- <xsl:template match="/">
- <html>
- <head>
- <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" />
- </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 代码
<%@ WebHandler Language="C#" Class="getDataSet" %> using System; using System.Web; using System.Data; using System.Data.SqlClient; using System.Text; using DHCC.HISHR.BO; public class getDataSet : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = ""; string table = context.Request.Params["table"].ToString().Trim(); string value = context.Request.Params["value"].ToString().Trim(); string text = context.Request.Params["text"].ToString().Trim(); string sql = "SELECT " + value + "," + text + " FROM HISHR." + table + " "; BOSQLExecuter SQLexec = new BOSQLExecuter(); DataSet ds = SQLexec.GetDataSetSQLExecuter(sql); if (ds != null) if (ds.Tables.Count > 0) { DataTable dt = ds.Tables[0]; foreach (DataRow dr in dt.Rows) { result += "$" + dr[value].ToString() + "^" + dr[text].ToString(); } if (result.Length > 0) result = result.Substring(1); } //根据HTTP局部请求返回流到页面 context.Response.Write(result); } public bool IsReusable { get { return false; } } }
ajax 保存 XML 的 ashx 代码
<%@ 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; } } }
主页面
css
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; }
显示数据页图
编辑数据页图
来源: http://www.phperz.com/article/17/0414/286362.html