zoukankan      html  css  js  c++  java
  • 页面优化改写时使用的一些技术(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;

    }

  • 相关阅读:
    [kuangbin带你飞]专题十二 基础DP1 E
    hdu 1203 I NEED A OFFER! (01背包)
    hdu 2602 Bone Collector (01背包)
    hdu 4513 吉哥系列故事——完美队形II (manacher)
    hdu 2203 亲和串 (KMP)
    hdu 1686 Oulipo (KMP)
    hdu 1251 统计难题 (字典树)
    hdu 2846 Repository (字典树)
    hdu 1711 Number Sequence (KMP)
    poj 3461 Oulipo(KMP)
  • 原文地址:https://www.cnblogs.com/Williamchen/p/1782312.html
Copyright © 2011-2022 走看看