JavaScript は XML データを読み取り、page_javascript スキルに表示、編集、保存します。

まずどの方法を使用するかを検討し、次の 3 つの方法を検討します。 1. C# が HTML を結合してテーブルを構築し、変更と保存は Ajax を通じて実装されます。 2. XML XSL、表示および変更は 2 つの XSL ファイルを使用して行われ、XML の変更および保存には Ajax が使用されます。 3. GridView コントロール。
慎重に検討した結果、まず、3 番目のオプション GridView コントロールはニーズを満たすことができません。これは、XML 形式が多様であり、行と列の結合や行と列のヘッダーの結合が頻繁に行われる可能性があるためです。最初のオプションは、座って行うのが非常に面倒で、細かい肉体的な作業が必要であり、ニーズが変化した後に修正するのは困難です。したがって、2 番目のオプションを選択します。 XPath と XSLT の学習を開始します。 AJAX は js を使用して、ファイルを処理する一般的な方法 (ashx) を非同期的に呼び出します。
1. 選択ボックスのバインド (Ajax を介してデータベースを読み取り、データをバインドする) を実装するときにエラーが発生しました。最終的に、XML を読み取るときに使用される非同期メソッドが Ajax と競合することが判明しました。これは同期によって解決できます。 。
2. XML を保存します。変更したデータを XML に保存するにはどうすればよいですか? Javascriptで保存する場合、jsで保存する場合はhtaを使用する必要がありますが、AJaxで保存する場合、どうすれば変更されたXMLをAJAXメソッドに渡すことができますか？ついに試してみました。 ソースコード
js:

コードをコピー コードは次のとおりです。

var $=function (id){return document.getElementById(id);}
var xmlHttp;
var curValue;
function ToEdit(); 🎜>var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
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 {
var ノード ID;
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"; ,"POST" ;
if(xmlHttp.status==200)
{
var rtn = xmlHttp.responseText;
if(rtn=="true")
alert("正常に保存されました! ");
}
else
{
alert("保存に失敗しました!");
}
Show();
}
}
}
function Show()
{
// XML の読み込み
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("myxml.xml");
// 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 値 = datainfo_sp_sp[1]; datainfo_sp_sp[2];
var control = $(selectID);
var param = "table=" テーブル "&value=" 値 "&text=" テキスト;
curControl = コントロール;
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;
休憩;
}
}
}
}
}
}
///////////////////绑定下选择框///////////////////////
///////////////////实现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对オブジェクトを構築できません!");
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

<セルタイプ="コンテンツ">
<データ id="ID99" Type="数値">4
セル>
<セルタイプ="コンテンツ">
4
セル>
<セルタイプ="コンテンツ">
4
セル>
<セルタイプ="コンテンツ">
1
セル>
<セルタイプ="コンテンツ">
5.0
セル>
<セルタイプ="コンテンツ">
<データ id="ID104" Type="日付">2009-10-14
セル>
行>

<セルタイプ="コンテンツ">
12
セル>
<セルタイプ="コンテンツ">
4
セル>
<セルタイプ="コンテンツ">
4
セル>
<セルタイプ="コンテンツ">
4
セル>
<セルタイプ="コンテンツ">
4
セル>
<セルタイプ="コンテンツ">
1
セル>
<セルタイプ="コンテンツ">
5.0
セル>
<セルタイプ="コンテンツ">
<データ id="ID112" Type="日付">2009-10-14
セル>
行>


小计：
セル>
行>

コンテンツ>
显示页的xsl

复制代码代码如下:

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

center




title
header
コンテンツ
other

编辑页的xsl

复制代码代码如下:

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

center



























title
header
content
other






























































xsl:値>

ajax实现得たデータ集のashx代码

复制代代码如下:

<%@ WebHandler Language="C#" Class="getDataSet" %>
システムを使用しています。
System.Web を使用;
System.Data を使用します。
System.Data.SqlClient を使用;
System.Text を使用;
DHCC.HISHR.BO を使用;
public class getDataSet : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
文字列結果 = "";
文字列テーブル = context.Request.Params["table"].ToString().Trim();
文字列値 = context.Request.Params["value"].ToString().Trim();
文字列テキスト = context.Request.Params["text"].ToString().Trim();
string sql = "SELECT " value "," text " FROM HIHR." テーブル " ";
BOSQLExecuter SQLexec = new BOSQLExecuter();
DataSet ds = SQLexec.GetDataSetSQLExecuter(sql);
if (ds != null)
if (ds.Tables.Count > 0)
{
DataTable dt = ds.Tables[0];
foreach (dt.Rows の DataRow dr)
{
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" %>
システムを使用しています。
System.Web を使用;
System.Xml を使用します。
System.IO を使用;
public class saveXML : IHttpHandler
{
public string xml;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
文字列パス = System.Web.HttpContext.Current.Request.PhysicalApplicationPath;
文字列 strXML =context.Request.Form[0];
試してください
{
if (File.Exists(path "\myxml.xml"))
{
XmlDocument xmldoc = new XmlDocument();
xmldoc.LoadXml(strXML);
xmldoc.Save(パス "\myxml.xml");
context.Response.Write("true");
}
}
catch
{
context.Response.Write("false");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}

主页面



css

复制代码代码如下:

table.admintable {
border :1px ソリッド #AEDEF2;
border-collapse: 折りたたむ;
}
td.other{
色: #0066cc;
フォントサイズ:13px;
カラー:#05B;
font-family: 新宋体;
ボーダー:1px ソリッド #AEDEF2;
}
td.title {
幅: 671px;
カラー: #0066cc;
背景色: #eef6fe;
フォントサイズ:15px;
カラー:#05B;
ボーダー:1px ソリッド #AEDEF2;
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorStr=#AEDEF2,endColorStr=ghostwhite);
}
td.header {
幅: 671px;
カラー: #0066cc;
背景色: #eef6fe;
フォントサイズ:14px;
カラー:#05B;
ボーダー:1px ソリッド #AEDEF2;
}
td.content {
border:1px Solid #AEDEF2;
背景:ゴーストホワイト;
フォントサイズ:13px;
font-family: 新宋体;
カラー: #333;
}

显示データ据页图

编辑データ据页图

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。