Javascript reads XML data, displays, edits, and saves it on the page_javascript skills

First consider what method to use, and consider three methods: 1. C# combines HTML to construct the table, and modification and saving are implemented through Ajax. 2. XML XSL, display and modification are done using two XSL files, and Ajax is used to modify and save the XML. 3. GridView control.
After careful consideration, first of all, the third option GridView control cannot meet the needs because XML formats are diverse and may involve a lot of row and column merging and row and column header merging. The first option is too cumbersome. Sitting up requires detailed and physical work, and it is difficult to modify it after the needs change. So choose the second option. Start learning XPath and XSLT. AJAX uses js to asynchronously call the general way of processing files (ashx).
1. An error occurred when implementing the binding of the selection box (reading the database through Ajax and binding data). Finally, it was found that the asynchronous method used when reading XML conflicted with Ajax, which can be solved by synchronization.
2. Save the XML. How to save the modified data to XML? When saving through Javascript, js cannot be saved. If you use js to save, you must use hta; when saving with AJax, how can I pass the modified XML to the AJAX method? After thinking about it, I tried several methods, and I finally tried it. , source code
js:

Copy code The code is as follows:

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() ;
//Bind selection box
LoadSelect();
}
//Save xml
function Save(){
var oDoc = new ActiveXObject("MSXML2.DOMDocument. 3.0");//Responsible for getting the response result
oDoc.async = false;
oDoc.resolveExternals = false;
oDoc.load("myxml.xml");
var data = oDoc. selectNodes("//Data[@IsEdit='1']");//Read the class names of all small classes to which the requested major class belongs
for(var i=0; i < data.length; i )
{
var nodeEdit;
var nodeID;
var nodeType;
for(var j=0; 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" ;
if(xmlHttp.status==200)
{
var rtn = xmlHttp.responseText;
if(rtn=="true")
{
alert("Save successfully ! ");
}
else
{
alert("Save failed!");
}
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{
if(allcontrols[j].tagName=="SELECT")
{
var datainfo = allcontrols[j].flex;
//datainfo:tablename^value^name^selectedvalue
var datainfo_sp = datainfo.split('

);
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('

);
for(var i=0; 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{
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");//ＩＥ旧版本
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//ＩＥ新版本
}
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






统计




类别


系数


分析




比例1


比例2


比例3


比例4


比例5


比例6


比例7




红


1


01


5.0


2009-10-05


21111


21


21


21




2


2


3


4


4


2


2


2




3


1


2


4


4


2


1


1




小计：




绿


4


4


4


4


4


2


4


4




5


4


4


4


4


2


4


4




6


3


4


4


4


2


3


3




7


4


4


4


4


4


4


4




8


4


4


4


4


3


4


4




9


4


4


4


4


1


5.0


2009-10-14




小计：




蓝


10


4


4


4


4


1


5.0


2009-10-14




11


4


4


4


4


1


5.0


2009-10-14




12


4


4


4


4


1


5.0


2009-10-14




小计：




显示页的xsl

复制代码 代码如下:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

center




title
header
content
other

编辑页的xsl

复制代码 代码如下:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

center



























title
header
content
other

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);
}
//根据ＨＴＴＰ局部请求返回流到页面
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;
}

显示数据页图

编辑数据页图