作者：135369一生真爱_890 | 2022-01-25 21:35
最近需要做这样一个需求，数据保存在XML里，在页面上通过表格显示其内容，可以修改内容，再保存到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：
复制代码 代码如下:
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
{
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{
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">
编辑页的xsl
复制代码 代码如下:
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
table demo
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;
}
显示数据页图
编辑数据页图
京公网安备 11010802040832号 | 京ICP备19059560号-6 