>  기사  >  웹 프론트엔드  >  Javascript는 XML 데이터를 읽고 이를 page_javascript 기술에 표시하고 편집하고 저장합니다.

Javascript는 XML 데이터를 읽고 이를 page_javascript 기술에 표시하고 편집하고 저장합니다.

WBOY
WBOY원래의
2016-05-16 18:43:181136검색

먼저 어떤 방법을 사용할지 고민하고 세 가지 방법을 고려합니다. 1. C#으로 HTML을 결합하여 테이블을 구성하고, 수정 및 저장은 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를 저장할 수 없는데, AJax로 저장할 때 hta를 사용해야 하는데, 수정된 XML을 AJAX 메서드에 어떻게 전달할 수 있을까요? 드디어 해봤습니다. 소스코드
js:

코드 복사 코드는 다음과 같습니다.

var $=function (id){return document.getElementById(id);}
var xmlHttp;
var curControl;
var curValue(){
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 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 콤보x = $(nodeID)
if(combox!=null)
{
if(combox.options. 길이>0)
data[i].text = 콤보x.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("저장이 완료되었습니다! ");
}
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 ()
}
/////////////////绑择框/////////////// ////////
함수 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]; datainfo_sp_sp[2];
var control = $(selectID)
var param = "table=" table "&value=" value "&text=" text;
curControl = 제어;
curValue = selectedValue;
var 콜백 = BindSelect;
StartRequest("getDataSet.ashx", param, BindSelect,null,"GET");
}
}
}
}
function BindSelect()
{
//可以不用下face两个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)
{
시도
{
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");//IE旧版本
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject ("Microsoft.XMLHTTP");//IE新版本
}
catch(e)
{
}
}
if(!xmlHttp)
{
window.alert("불변합니다.XMLHTTPREQUEST가 없습니다!");
거짓을 반환합니다.
}
}
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

















center




제목
헤더
content
기타































































ajax实现得到数据集的ashx代码
复代码 代码如下:

<%@ WebHandler Language="C#" Class="getDataSet" %>
시스템 사용;
System.Web 사용;
System.Data 사용;
System.Data.SqlClient 사용;
System.Text 사용;
DHCC.HISHR.BO 사용;
공용 클래스 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 HISHR." 테이블 " ";
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);
}
//根据HTTP局part请求返回流到页면
context.Response.Write(결과);
}
public bool IsReusable
{
get
{
return false;
}
}
}

ajax保存XML적ashx代码
复system代码 代码如下:

<%@ WebHandler Language="C#" Class="saveXML" %>
시스템 사용;
System.Web 사용;
System.Xml 사용;
System.IO 사용;
공용 클래스 saveXML : IHttpHandler
{
공용 문자열 xml;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
문자열 경로 = System.Web.HttpContext.Current.Request.PhysicalApplicationPath;
string 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
复aze代码 代码如下:

table.admintable {
border :1px 솔리드 #AEDEF2;
국경 붕괴: 붕괴;
}
td.other{
색상: #0066cc;
글꼴 크기:13px;
색상:#05B;
글꼴군: 新宋体;
테두리: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;
글꼴군: 新宋体;
색상: #333;
}

显示数据页图

显示数据页

编辑数据页图

编辑数据页

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.






center



























title
header
content
other

























































<선택>












<스팬>