• 页面优化改写时使用的一些技术(html, table, webservice 调用,序列化,xml, showModalDialog)


     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 URLpath 可设置为完全限定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;

    }

  • 相关阅读:
    KMP算法与字符串匹配问题
    贪婪算法(贪心算法)
    普里姆算法(Prim)与最小生成树问题
    克鲁斯卡尔算法(Kruskal算法)与最小生成树问题
    Dijkstra算法与最短路径问题
    SpringCloud(十一)使用actuator和dashborad、turbine对微服务进行监控
    博客美化——页面白天黑夜切换
    Spring5学习笔记——day01
    Mybatis学习笔记——day06
    Mybatis学习笔记——day05
  • 原文地址:https://www.cnblogs.com/Williamchen/p/1782312.html
Copyright © 2020-2023  润新知