William Chen 2010-07-21
近日,在公司的一个项目中做页面优化改写动作,使用了下面的方法:
1. 服务器端控件改为html原生控件(GridView --> table)
2. table 操作 新增行,删除行
3. webservice使用
4. 序列化,反序列化
5. XDocument linq to xml
6. window.showModalDialog 参数与传值。
改写后成果:
主要源码修改结果:
SparePartsMaintainNewBom.aspx.cs 源码从1761行到377行
SparePartsMaintainNewBom.aspx 源码从1165行到687行
SparePartsMaintainNewBom.js 源码从1258行到1375行
SparePartsNewBomBusiness.cs 源码从1152行到1186行
SpacePartsItemNewBom.aspx 源码从502行到673行
SpacePartsItemNewBom.aspx.cs 源码从687行到60行
总代码行数 6525行到4358 总代码行数减少了33%
运行后操作性能比较,
以一笔有600个子孙料号的BOM为例:
测试环境:客户端,服务器端在同1台机器,2.2G双核CPU 1.5G内存
1. SparePartsMaintainNewBom.aspx在浏览器端生成的Html从原来的40000行下降到700行, Html源码行数减少了98%,文件大小从3MB到120KB,Html源码大小减少了96%
2. PageLoad功能 从服务器耗时2分钟 --> 服务器6s + 客户端19s. 效率提高80%
3. button Add(P),Replace(R),Add Alt(A),Add Incomplitable(C)
四个功能按钮从原来要传回服务器处理耗时>2分钟 --> 纯客户端操作耗时<10s 效率提高90%
4. button check 从原来要传回服务器处理耗时>2分钟 --> 纯客户端操作耗时<10s 效率提高90%
5. button save,send 从原来要传回服务器处理耗时>2分钟 --> 纯客户端+webservice操作耗时<20s. 效率提高80%
一、 服务器端控件改写为html标签控件
在页面中,请优先使用html控件。这样的控件不需要服务器端解释,而是直接输出,对服务器压力小。下面是一些功能相同的常见控件的改写方式。
1. Label
Asp:
<asp:Label ID="lblSelectNum" runat="server">0</asp:Label>
HTML:
<span id="lblSelectNum">0</span>
<label id="lblSelectNum">0</label>
2. TextBox
Asp:
<asp:TextBox ID="txtOrignalItemtype" runat="server"/>
HTML:
<input type="text" id="txtOrignalItemtype"/>
3. Button
Asp:
<asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick="return btnOk_ClientClick();" />
HTML:
<input type="button" value="OK" id="btnOk" onclick="return btnOk_ClientClick();"/>
4. CheckBox
Asp:
<asp:CheckBox ID="cbRepLevel" runat="server" Text="Include RepLevel"/>
HTML:
<input id="cbRepLevel" type="checkbox" />
<label for="cbRepLevel">
Include RepLevel
</label>
5. RadioButton
Asp:
<asp:RadioButton ID="rbSelectAll" runat="server" Text="Select All" TextAlign="Left" Width="90px" GroupName="cbSelect3" onclick="return CheckAllgv1(true,'cbSelect')" />
<asp:RadioButton ID="rbClearAll" runat="server" Text="Clear All" TextAlign="Left" Width="90px" GroupName="cbSelect3" onclick="return CheckAllgv1(false,'cbSelect')" />
HTML:
<span style="width: 90px;">
<label for="rbSelectAll">Select All</label>
<input id="rbSelectAll" type="radio" name="cbSelect3" value="rbSelectAll" onclick="selectNumAll(true,'table1');selectNumAll(false,'table2');" />
</span>
<span style="width: 90px;">
<label for="rbClearAll">Clear All</label>
<input id="rbClearAll" type="radio" name="cbSelect3" value="rbClearAll" onclick="selectNumAll(false,'table1');selectNumAll(true,'table2');" />
</span>
6. Panel
Asp:
<asp:Panel ID="Panel1" ScrollBars="Both" Height="400px" runat="server" Width="97%">
</asp:Panel>
HTML:
<div style="height: 400px; width: 97%; overflow: scroll; position: relative;">
</div>
7. GridView
Asp:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%" EmptyDataText="No Data Found." OnRowDataBound="GridView1_RowDataBound" GridLines="None" DataKeyNames="No">
……
</asp:GridView>
HTML:
<table class="myGV" cellspacing="0" rules="all" border="1" id="table1" style="border-width: 1px; border-style: Solid; width: 150%; border-collapse: collapse;">
<tr class="DGTitle">
……
</tr>
……
</table>
在使用asp控件时,如果它不需要回传给服务器,那么尽量把它的ViewState给禁掉,即设置为EnableViewState="false"。
二、 HTML table 操作
1. 新增行
tableObject.insertRow(index)
返回一个 TableRow,表示新插入的行对象
新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。
如果没有此参数,则新行将被附加到表的末尾。
应用示例:
var newTr = tableobject.insertRow();//在tableobject最后一行增加新的一行。
2. 删除行
tableObject.deleteRow(index)
参数 index 指定了要删除的行在表中的位置。
应用示例:
table2.deleteRow(i); //删除table2的rowindex = i的这一行
3. 新增单元格
tablerowObject.insertCell(index)
一个 TableCell 对象,表示新创建并被插入的 <td> 元素对象
新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。
如果没有此参数,则新单元格将被附加到行的末尾。
应用示例:
newTd[0] = newTr.insertCell();
4. 删除单元格
tablerowObject.deleteCell(index)
参数 index 是要删除的表元在行中的位置。
该方法将删除表行中指定位置的表元。
5. innerHTML
设置或返回对象的开始标签和结束标签之间的 HTML
object.innerHTML=HTML;
6. innerText
设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体。
object.innerText = text;
应用示例:
var newTr = tableobject.insertRow();
newTr.setAttribute("class", "GVDataTR");
if (rowclick) {
newTr.setAttribute("onclick", "selectrow(this)");
}
newTr.setAttribute("Cpprod", bomInfo.Cpprod);
newTd[5] = newTr.insertCell();
if (isEdit) {
var repl = bomInfo.Repl;
if (repl == undefined || repl == null) {
repl = "";
}
repl = repl.trim();
var td5InnerHTML = "<select name=\"ddlRepl\" class=\"DropDownList\" style=\"95%;\">";
var count = ArrayRepl.length;
for (var i = 0; i < count; i++) {
td5InnerHTML += "<option value=\"" + ArrayRepl[i].trim() + "\">" + ArrayRepl[i].trim() + " </option>";
}
td5InnerHTML += "</select>";
newTd[5].innerHTML = td5InnerHTML;
newTd[5].childNodes[0].value = repl;
}
else {
newTd[5].innerHTML = bomInfo.Repl;
}
newTd[12] = newTr.insertCell();
newTd[12].setAttribute("align", "right");
if (isEdit) {
newTd[12].innerHTML = "<input name=\"txtCust\" type=\"text\" maxlength=\"16\" class=\"EditTextBox\" onkeypress=\"keyNumber();\" onblur=\"return checkPrice(this);\" style=\"95%;" value=\"" + bomInfo.Cust + "\" /> ";
}
else {
newTd[12].innerHTML = bomInfo.Cust;
}
在要求极高性能的情况下,可以用table 替代GridView,不过这回要求写一些javascript.
在某种情况下, GridView(或者table) 要求有隐藏栏位,请使用方法 elementNode.setAttribute(name,value) 和 elementNode.getAttribute(name)
三、 WebService的使用
一种是aspx页面调用后台cs文件中的public static 的WebMothod方法,另一种是调用指定位置的WebService.
第一中情况, 调用后台WebMothod方法
1. aspx文件启用Ajax. EnablePageMethods 设置为true.
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ToolkitScriptManager1"
AsyncPostBackTimeout="1200" EnablePageMethods="true">
</ajaxToolkit:ToolkitScriptManager>
此处也可以使用 <asp:ScriptManager></asp:ScriptManager>
2. 后台cs函数。必须是public static,并且是webMethod的。
[System.Web.Services.WebMethod]
public static string SaveData(string dataxml)
{
// 相关逻辑处理
SparePartsNewBomBusiness sparePartsNewBomBusiness = new SparePartsNewBomBusiness();
var result = sparePartsNewBomBusiness.SaveData(dataxml);
return result;
}
3. aspx文件中的javascript 调用后台方法
<script language="javascript" type="text/javascript">
function SaveData() {
var sendxml = GetDataXml();
PageMethods.SaveData(sendxml, saveDataSucceededCallback, saveDataFailedCallback);
return false;
}
function saveDataSucceededCallback(serializeSavaResult) {
//成功后的一些事后处理
}
function saveDataFailedCallback(failResult) {
//失败后的一些事后处理,典型应用如下:
$get("Showmsg").innerText = " Fail. " + failResult.get_message();
}
</script>
第二中情况是异步调用指定位置的WebService 方法
var webRequest = Sys.Net.WebServiceProxy.invoke(path, methodName, useHttpGet, parameters, succeededCallback, failedCallback, userContext, timeout);
各参数含义如下:
path: WebService URL。path 可设置为完全限定URL (http://www.mySite.com/myService.asmx)、没有主机名或完全限定域名 (FQDN) 的绝对 URL (/myService.asmx),或者相对 URL (../myService.asmx)。
mothodName: 要调用的 Web 服务方法的名称。
useHttpGet: (可选)如果 Web 请求 HTTP 谓词为 POST,则为 false;否则为 true。默认值为 false。
parameters:
(可选)一个 JavaScript 字典,包含与要调用的方法的参数相对应的命名属性(字段),如下例所示:
{"param1":196610,"param2":"Hello"}
字典中的字段名必须与 Web 服务方法的名称匹配。
如果 Web 服务器方法不接受任何参数,则 parameters 可省略、可为 null,也可为空字典 ({})。这种情况下,传递的任何值都将被忽略。
如果字典包含的键/值对不对应于 Web 服务器方法的参数,则它们也将被忽略。
succeededCallback:
(可选)在 Web 服务方法调用成功返回时,所调用的回调函数。
如果不需要 succeededCallback,并且必须为其余参数指定值,则该回调函数可设置为 null。
如果未提供任何回调函数,则在 Web 服务方法成功完成后,不会执行任何操作。
failedCallback:
(可选)在 Web 服务方法调用失败时,所调用的回调函数。
如果不需要 failedCallback,并且必须为其余参数指定值,则该回调函数可设置为 null。
如果未提供任何回调函数,则在 Web 服务方法调用期间出现错误时,不会执行任何操作。
userContext:
(可选)任何特定于用户的信息。userContext 可以为任何 JavaScript 基元类型、数组或对象。
userContext 的内容(如果有)将传给回调函数。如果未提供 userContext,则 null 将传递给回调函数。
timeout:
(可选)在 Web 请求超时之前,网络执行器必须等待的时间(以毫秒为单位)。timeout 可以为整数或 null。通过定义超时时间间隔,可以控制应用程序必须等待回调完成的时间。
返回值
用于调用该方法的 WebRequest 实例。此实例可用于停止调用。
示例:
Sys.Net.WebServiceProxy.invoke(webServicePath,
webMethod, false,
{"greeting":"Have a nice day", "name":" to You (via POST)!"},
OnSucceeded,OnFailed, "User Context",100);
四、序列化,反序列化
1. C# 中
每个要求可序列化的类必须加上[Serializable]属性
例如:
[Serializable]
public class BqSpLine
{
……
}
//System.SerializableAttribute
using System.Web.Script.Serialization;
JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
序列化:
将对象转换为 JSON 字符串。
string serializerListRefBomInfo = javaScriptSerializer.Serialize(listRefBomInfo);
反序列化:
将指定的 JSON 字符串转换为对象图。
object listRefBomInfo = javaScriptSerializer. DeserializeObject(serializerListRefBomInfo);
将指定的 JSON 字符串转换为 T 类型的对象。
T listRefBomInfo = javaScriptSerializer. Deserialize <T> (serializerListRefBomInfo);
2. Ajax javascript 中
序列化:
将 ECMAScript (JavaScript) 对象图转换为 JSON 字符串。
var result = JavaScriptSerializer.serialize(value);
参数 value 要序列化的 JavaScript 对象图
反序列化:
将 JSON 字符串转换为 ECMAScript (JavaScript) 对象图。
var result = JavaScriptSerializer.deserialize(value);
参数 value 要反序列化的 JSON 字符串。
五、 XML
C#3.0(dotnet3.5)新增了xml操作。
System.Xml.Linq.XDocument类
下面是他的一些常用方法介绍:
1. 静态Load方法。(载入xml格式字符串)
public static XDocument Load(
TextReader textReader
)
从 TextReader 创建新的 XDocument.
例如:
TextReader tr = new StringReader("<Root>Content</Root>");
XDocument doc = XDocument.Load(tr);
2. 静态Load方法。(从文件创建新 XDocument)
public static XDocument Load(
string uri
)
例如:
XDocument doc = XDocument.Load("PurchaseOrder.xml");
3. 属性 Root
获取此文档的 XML 树的根元素。
public XElement Root { get; }
4. Element 方法
获取具有指定 XName 的第一个(按文档顺序)子元素。
public XElement Element(
XName name
)
例如:
XElement srcTree = new XElement("Root",
new XElement("Element1", 1),
new XElement("Element2", 2),
new XElement("Element3", 3),
new XElement("Element4", 4),
new XElement("Element5", 5)
);
srcTree.Element("Element3").ToString() 的结果为 "<Element3>3</Element3>"
5. Elements 方法
按文档顺序返回此元素或文档的子元素集合.
public IEnumerable<XElement> Elements()
此方法使用延迟执行。
例如:
XElement xmlTree = new XElement("Root",
new XElement("Child1", 1),
new XElement("Child2", 2),
new XElement("Child3", 3),
new XElement("Child4", 4),
new XElement("Child5", 5)
);
IEnumerable<XElement> elements =
from el in xmlTree.Elements()
where (int)el <= 3
select el;
foreach (XElement el in elements)
Console.WriteLine(el);
该示例产生下面的输出:
<Child1>1</Child1>
<Child2>2</Child2>
<Child3>3</Child3>
下面看一个综合示例。
Xml 字符串string p_Dataxml有下列值
<XML>
<ISSEND>false</ISSEND>
<SITE>QCS</SITE>
<FACILITY>CQ</FACILITY>
<PARTNO>9J.0QE71.72M</PARTNO>
<MODEL>Q7101</MODEL>
<LOGINNAME>Kidd.Huang</LOGINNAME>
<GID>GA</GID>
<FORMKIND>GBP</FORMKIND>
<FORMSERIALNO>E003639</FORMSERIALNO>
<TABLE1>
<TR>
<LINEID><![CDATA[1]]></LINEID>
<CPPROD><![CDATA[9J.0QE71.72M]]></CPPROD>
<NO><![CDATA[1]]></NO>
<REF><![CDATA[false]]></REF>
<SELECT><![CDATA[true]]></SELECT>
<LEVEL><![CDATA[1]]></LEVEL>
<ACTION><![CDATA[]]></ACTION>
<REPL><![CDATA[ ]]></REPL>
<PARTNO><![CDATA[5G.0QE71.72M]]></PARTNO>
<ITEMTYPE><![CDATA[0]]></ITEMTYPE>
<DESC><![CDATA[CASE ASSY Q7101]]></DESC>
<REPLACE><![CDATA[]]></REPLACE>
<FACTOR1><![CDATA[0]]></FACTOR1>
<SPO><![CDATA[0]]></SPO>
<CUST><![CDATA[0]]></CUST>
<MOQ><![CDATA[1]]></MOQ>
<REPAIR><![CDATA[]]></REPAIR>
<REMARK><![CDATA[ ]]></REMARK>
<LEADTIME><![CDATA[0]]></LEADTIME>
<CRITICAL><![CDATA[ ]]></CRITICAL>
<EFFDATE><![CDATA[20100511]]></EFFDATE>
<DISDATE><![CDATA[20491231]]></DISDATE>
</TR>
<TR>
<LINEID><![CDATA[2]]></LINEID>
<CPPROD><![CDATA[5G.0QE71.72M]]></CPPROD>
<NO><![CDATA[2]]></NO>
….
</TR>
</TABLE1>
<TABLE2></TABLE2>
</XML>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Xml.Linq;
private void GetBomInfoByXml(string p_Dataxml, ref bool p_IsSend, ref string p_Site, ref string p_Facility, ref string p_Partno, ref string p_Model, ref string p_Loginname, ref string p_Gid, ref string p_Formkind, ref string p_Formserialno, ref IList<BOMInfo> p_ListBomInfo1, ref IList<BOMInfo> p_ListBomInfo2)
{
TextReader textReader = new StringReader(p_Dataxml);
XDocument xdocument = XDocument.Load(textReader);
//使用查询语法获取指定的section集合
var root = xdocument.Root;
p_IsSend = string.IsNullOrEmpty((root.Element("ISSEND").Value ?? string.Empty).Trim())
? false
: bool.Parse(root.Element("ISSEND").Value.Trim());
p_Site = root.Element("SITE").Value;
p_Facility = root.Element("FACILITY").Value;
p_Partno = root.Element("PARTNO").Value;
p_Model = root.Element("MODEL").Value;
p_Loginname = root.Element("LOGINNAME").Value;
p_Gid = root.Element("GID").Value;
p_Formkind = root.Element("FORMKIND").Value;
p_Formserialno = root.Element("FORMSERIALNO").Value;
var table1 = root.Element("TABLE1");
var table2 = root.Element("TABLE2");
p_ListBomInfo1 = new List<BOMInfo>();
p_ListBomInfo2 = new List<BOMInfo>();
if (table1 != null && table1.HasElements)
{
p_ListBomInfo1 = GetBomInfoList(table1);
}
if (table2 != null && table2.HasElements)
{
p_ListBomInfo2 = GetBomInfoList(table2);
}
}
private IList<BOMInfo> GetBomInfoList(XElement xelement)
{
var bomInfos = xelement.Elements("TR")
.Select(t =>
FormatBOMInfo(
new BOMInfo()
{
No = (t.Element("NO").Value ?? string.Empty).Trim() == string.Empty ? 0 : int.Parse(t.Element("NO").Value),
Ref = (t.Element("REF").Value ?? string.Empty).Trim() == string.Empty ? false : bool.Parse(t.Element("REF").Value),
Select = (t.Element("SELECT").Value ?? string.Empty).Trim() == string.Empty ? false : bool.Parse(t.Element("SELECT").Value),
Level = (t.Element("LEVEL").Value ?? string.Empty).Replace(".", ""),
Action = t.Element("ACTION").Value,
Repl = t.Element("REPL").Value,
Partno = t.Element("PARTNO").Value,
Itemtype = t.Element("ITEMTYPE").Value,
Desc = t.Element("DESC").Value,
Replace = t.Element("REPLACE").Value,
Factor1 = t.Element("FACTOR1").Value,
Spo = t.Element("SPO").Value,
Cust = t.Element("CUST").Value,
Moq = t.Element("MOQ").Value,
Repair = t.Element("REPAIR").Value,
Remark = t.Element("REMARK").Value,
Leadtime = t.Element("LEADTIME").Value,
Critical = t.Element("CRITICAL").Value,
Effdatefrom = t.Element("EFFDATE").Value,
Effdateto = t.Element("DISDATE").Value,
Cpprod = t.Element("CPPROD").Value,
LineId = (t.Element("LINEID").Value ?? string.Empty).Trim() == string.Empty ? 0 : int.Parse(t.Element("LINEID").Value)
})
)
.OrderBy(t => t.No);
return bomInfos.ToList();
}
再看一个从文件中读取xml的示例:
Connection.xml 文件具有如下内容:
<?xml version="1.0" encoding="utf-8" ?>
<ConnectionConfig>
<Items>
<Item Name="Entities" Metadata="res://*/EntityModel.csdl|res://*/EntityModel.ssdl|res://*/EntityModel.msl" Provider="System.Data.SqlClient" ProviderConnectionString="CBC791316B24A4F25078E75496770FF635CBD4E89AF3E32C915BE0F0718381D745D2EC6B5B55F6BA3CC74B74DFA9C9CA3ACA8BC78F028436FA61F082A11B0A6D287AC209A7CE488F50CE3C8B12D335DF2B4A7380DFDFFD83001AC7EDE3E2B6D9BA0899F4569ED8B10A5CB79CCC5128C6F02453E1BAE8DD607246F7511174B27AE8DC27FCB26AE35C" ProviderName="System.Data.EntityClient"></Item>
</Items>
</ConnectionConfig>
用法如下:
string XmlPath = XmlPath = HttpContext.Current.Server.MapPath(@"~/Connection.XML");
/// <summary>
/// 加载文件
/// </summary>
public static void LoadXML(string xmlPath, string itemName)
{
// 加载指定的xml文件
XDocument xml = XDocument.Load(xmlPath);
// 使用查询语法获取指定的section集合
var query = from p in xml.Root.Elements("Items").Elements("Item")
where p.Attribute("Name").Value == itemName
select p;
if( query.Count() <= 0 )
{
return;
}
var item = query.First();
name = item.Attribute("Name").Value;
metadata = item.Attribute("Metadata").Value;
provider = item.Attribute("Provider").Value;
providerConnectionString = item.Attribute("ProviderConnectionString").Value;
providerName = item.Attribute("ProviderName").Value;
}
JavaScript解析XML的一种方法
xml文件Login.xml如下:
<?xml version="1.0" encoding="utf-8" ?>
<Login>
<Character>
<C Text="热血" Value="0"></C>
<C Text="弱气" Value="1"></C>
<C Text="激情" Value="2"></C>
<C Text="冷静" Value="3"></C>
<C Text="冷酷" Value="4"></C>
</Character>
<Weapon>
<W Text="光束剑" Value="0"></W>
<W Text="光束配刀" Value="1"></W>
</Weapon>
<EconomyProperty>
<P Text="平均型" Value="0"></P>
<P Text="重视攻击" Value="1"></P>
<P Text="重视敏捷" Value="2"></P>
<P Text="重视防御" Value="3"></P>
<P Text="重视命中" Value="4"></P>
</EconomyProperty>
</Login>
现在需要对这个xml文件的内容进行操作。
首先,需要加载这个xml文件,JavaScript中加载xml文件,是通过XMLDOM来进行的:
// 加载xml文档
loadXML = function(xmlFile) {
var xmlDoc;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFile);
}
else {
return null;
}
return xmlDoc;
}
xml文件对象出来了, 接下去就要对这个文档进行操作了。
比如说,现在需要得到节点Login/Weapon/W的第一个节点的属性,那么我们可以如下进行:
// 首先对xml对象进行判断
checkXMLDocObj = function(xmlFile) {
var xmlDoc = loadXML(xmlFile);
if (xmlDoc == null) {
alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
window.location.href = '/Index.aspx';
}
return xmlDoc;
}
// 然后开始获取需要的Login/Weapon/W的第一个节点的属性值
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var v = xmlDoc.getElementsByTagName('Login/Weapon/W')[0].childNodes.getAttribute('Text');
在程序中的写法可以这样
initializeSelect = function(oid, xPath) {
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var n;
var l;
var e = $(oid);
if (e != null) {
n = xmlDoc.getElementsByTagName(xPath)[0].childNodes;
l = n.length;
for (var i = 0; i < l; i++) {
var option = document.createElement('option');
option.value = n[i].getAttribute('Value');
option.innerHTML = n[i].getAttribute('Text');
e.appendChild(option);
}
}
}
上面的访问代码中,是通过xmlDoc.getElementsByTagName(xPath)来进行的。
还可以通过 xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute('Text') 进行访问。
一些常用方法:
xmlDoc.documentElement.childNodes(0).nodeName,可以得到这个节点的名称;
xmlDoc.documentElement.childNodes(0).nodeValue,可以得到这个节点的值. 这个值是来自于这样子的xml格式:<a>b</b>, 于是可以得到b这个值;
xmlDoc.documentElement.childNodes(0).hasChild,可以判断是否有子节点。
根据经验,最好是使用getElementsByTagName(xPath)的方法对节点进行访问,因为这样子可以直接通过xPath来定位节点,这样子会有更好的性能。
六、 window.showModalDialog
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
传入参数:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,
可以通过window.returnValue向打开对话框的窗口返回信息,也可以是对象.
示例如下:
var surl = "SpacePartsItemNewBom.aspx";
var vArguments = new Array(type, site, facility, fnpartno, bomInfo);
var sFeatures = "";
if (type == "P") {
sFeatures = "dialogHeight:260px;dialogWidth:650px;status:no;help:no;scroll:no";
}
else {
sFeatures = "dialogHeight:460px;dialogWidth:650px;status:no;help:no;scroll:no";
}
//弹出新编辑窗口
var returnValue = window.showModalDialog(surl, vArguments, sFeatures);
if (returnValue == undefined || returnValue == null) {
return false;
}
var newbomInfo = returnValue[0];
var orignalAction = returnValue[1];
var orignalEffdateto = returnValue[2];
再来看看SpacePartsItemNewBom.aspx中是如何接受参数的:
function pageLoad() {
var vArguments = window.dialogArguments;
ArgumentsType = vArguments[0];
ArgumentsSite = vArguments[1];
ArgumentsFacility = vArguments[2];
ArgumentsFnpartno = vArguments[3];
ArgumentsBomINfo = vArguments[4];
……
return;
}
SpacePartsItemNewBom.aspx 向主窗口回传数据:
function btnOk_ClientClick() {
if (!checkConditionBeforeOK()) {
return false;
}
var bomInfo = getBomInfo();
var orignalAction = txtOrignalAction.value;
var orignalEffdateto = txtOrignalDisdate.value;
var returnValue = new Array(bomInfo, orignalAction, orignalEffdateto);
closeWindows(returnValue);
return false;
}
function btnCancel_ClientClick() {
closeWindows(null);
return false;
}
function closeWindows(returnValue) {
window.returnValue = returnValue;
window.opener = null;
window.close();
return false;
}