JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源


0. 有关JS、XMLDOM、XSLT的基础知识,可以参考我前面的三篇学习笔记:
《JS学习笔记》
《XML DOM学习笔记(JS) 》
《XSLT学习笔记 》

 

1. 中英文切换:
    原本打算是用一个XML文件(Language.xml)作为语言的配置文件,然后在HTML/JS中传入所选择得语言种类,来加载不同的XML节点,我最原始的思路:

None.gif < xsl:param name = " langg " > xsl:param >
None.gif
< xsl:variable name = " languag "  select = " document($filename)/language/$langg " > xsl:variable >

None.gif // Language.XML
None.gif

None.gif
xml version = " 1.0 "  encoding = " gb2312 " ?>
None.gif
< language >
None.gif    
< zh >
None.gif        
< title > 员工信息 title >
None.gif        
< btnAdd > 新建员工 btnAdd >
None.gif        
< column1 > 姓名 column1 >
None.gif        
< column2 > 部门 column2 >
None.gif        
< column3 > 备注 column3 >
None.gif        
< column4 > 删除 column4 >
None.gif        
< CurrentPage > 当前页码 CurrentPage >
None.gif        
< TotelPage > 总页数 TotelPage >
None.gif        
< TotelCount > 总记录数 TotelCount >         
None.gif        
< FirstPage > 首页 FirstPage >
None.gif        
< PrevPage > 前一页 PrevPage >
None.gif        
< NextPage > 后一页 NextPage >
None.gif        
< LastPage > 最后一页 LastPage >
None.gif    
zh >
None.gif    
< en >
None.gif        
< title > Employee Information title >
None.gif        
< btnAdd > Add New Employee btnAdd >
None.gif        
< column1 > Name column1 >
None.gif        
< column2 > Department column2 >
None.gif        
< column3 > Memo column3 >
None.gif        
< column4 > Delete column4 >
None.gif        
< CurrentPage > Current Page CurrentPage >
None.gif        
< TotelPage > Totel Page Count TotelPage >
None.gif        
< TotelCount > Totel Record Count TotelCount >
None.gif        
< FirstPage > First Page FirstPage >
None.gif        
< PrevPage > Previous Page PrevPage >
None.gif        
< NextPage > Next Page NextPage >
None.gif        
< LastPage > Last Page LastPage >
None.gif    
en >
None.gif
language >

    但在实践过程中,发现XSL中document函数后的Xpath不能带参数变量,只好改成两个文件(zh.xml和en.xml),通过HTML/JS传入所选择的语言的种类,来加载不同的语言所对应的配置文件:

None.gif
None.gif
< xsl:param name = " langg " > xsl:param >
None.gif
< xsl:variable name = " filename "  select = " concat($langg,'.xml') " > xsl:variable >
None.gif
< xsl:variable name = " languag "  select = " document($filename)/language " > xsl:variable >

 

None.gif // zh.xml
None.gif

None.gif
xml version = " 1.0 "  encoding = " gb2312 " ?>
None.gif
< language >
None.gif        
< title > 员工信息 title >
None.gif        
< btnAdd > 新建员工 btnAdd >
None.gif        
< column1 > 姓名 column1 >
None.gif        
< column2 > 部门 column2 >
None.gif        
< column3 > 备注 column3 >
None.gif        
< column4 > 删除 column4 >
None.gif        
< CurrentPage > 当前页码 CurrentPage >
None.gif        
< TotelPage > 总页数 TotelPage >
None.gif        
< TotelCount > 总记录数 TotelCount >         
None.gif        
< FirstPage > 首页 FirstPage >
None.gif        
< PrevPage > 前一页 PrevPage >
None.gif        
< NextPage > 后一页 NextPage >
None.gif        
< LastPage > 最后一页 LastPage >
None.gif        
< add >
None.gif            
< NotNull > 员工姓名不能为空! NotNull >
None.gif            
< NameRepeat > 姓名重复,请重新输入姓名! NameRepeat >
None.gif            
< Save > 保存 Save >
None.gif            
< Cancel > 取消 Cancel >
None.gif            
< Title > 员工信息 Title >
None.gif            
< Name > 姓名 Name >
None.gif            
< Dept > 部门 Dept >
None.gif            
< Memo > 备注 Memo >
None.gif        
add >
None.gif        
< del >
None.gif            
< Text1 > 确定删除  Text1 >
None.gif            
< Text2 >  记录吗? Text2 >
None.gif        
del >
None.gif        
< edit >
None.gif        
edit >
None.gif
language >

 

None.gif // en.xml
None.gif

None.gif
xml version = " 1.0 "  encoding = " gb2312 " ?>
None.gif
< language >
None.gif        
< title > Employee Information title >
None.gif        
< btnAdd > Add New Employee btnAdd >
None.gif        
< column1 > Name column1 >
None.gif        
< column2 > Department column2 >
None.gif        
< column3 > Memo column3 >
None.gif        
< column4 > Delete column4 >
None.gif        
< CurrentPage > Current Page CurrentPage >
None.gif        
< TotelPage > Totel Page Count TotelPage >
None.gif        
< TotelCount > Totel Record Count TotelCount >
None.gif        
< FirstPage > First Page FirstPage >
None.gif        
< PrevPage > Previous Page PrevPage >
None.gif        
< NextPage > Next Page NextPage >
None.gif        
< LastPage > Last Page LastPage >
None.gif        
< add >
None.gif            
< NotNull > You must enter employee name! NotNull >
None.gif            
< NameRepeat > Name  is  already exists,please input again! NameRepeat >
None.gif            
< Save > Save Save >
None.gif            
< Cancel > Cancel Cancel >
None.gif            
< Title > Employee Information Title >
None.gif            
< Name > Name Name >
None.gif            
< Dept > Department Dept >
None.gif            
< Memo > Memo Memo >
None.gif        
add >
None.gif        
< del >
None.gif            
< Text1 > Do you confirm to delete  Text1 >
None.gif            
< Text2 >  record ? Text2 >
None.gif        
del >
None.gif
language >

 

2. 分页:

None.gif // JS中
None.gif
xslProcessor.addParameter( " currentPage " , currentPage);
None.gifxslProcessor.addParameter(
" totelPage " , GetTotlePage());
None.gifxslProcessor.addParameter(
" totelEmployee " , GetTotleEmplyee());
None.gifxslProcessor.addParameter(
" pageSize " , pageSize);
None.gif
// 定义要读取的Employee记录的范围
None.gif
xslProcessor.addParameter( " startEmployee " , (currentPage - 1 ) * pageSize);
None.gifxslProcessor.addParameter(
" endEmployee " , currentPage * pageSize);
None.gif
None.gif
// XSL中
None.gif
xsl中,只读取一定范围的节点(startEmployee < position() <= endEmployee):
None.gif
< xsl: for - each select = " //employee[position()>$startEmployee and position()<=$endEmployee] " >

 

3. 排序:

None.gif // JS中:
None.gif
xslProcessor.addParameter( " order " , order); // order是排序依据的列名
None.gif
xslProcessor.addParameter( " scending " , scending); // 顺序还是倒序,做得很粗糙,尚待完善dot.gif.
None.gif
// XSL中
None.gif
< xsl:sort select = " *[name()=$order] "  order = " {$scending} " />
None.gif
// 很多文章介绍说可以这样,但在我自己的机器上测试不行的说dot.gif

 

4. 增删查改:基本的XMLDOM操作,直接看代码吧...

ContractedBlock.gif ExpandedBlockStart.gif 数据文件
 1None.gif//employee.xml
 2None.gif
 3None.gifxml version="1.0" encoding="gb2312"?>
 4None.gif<employees>
 5None.gif  <employee>
 6None.gif    <name>aname>
 7None.gif    <dept>dept1dept>
 8None.gif    <memo>1memo>
 9None.gif  employee>
10None.gif  <employee>
11None.gif    <name>bname>
12None.gif    <dept>dept2dept>
13None.gif    <memo>2memo>
14None.gif  employee>
15None.gif  <employee>
16None.gif    <name>cname>
17None.gif    <dept>dept3dept>
18None.gif    <memo>3memo>
19None.gif  employee>
20None.gif  <employee>
21None.gif    <name>dname>
22None.gif    <dept>dept4dept>
23None.gif    <memo>4memo>
24None.gif  employee>
25None.gif  <employee>
26None.gif    <name>ename>
27None.gif    <dept>dept5dept>
28None.gif    <memo>5memo>
29None.gif  employee>
30None.gif  <employee>
31None.gif    <name>fname>
32None.gif    <dept>dept6dept>
33None.gif    <memo>6memo>
34None.gif  employee>
35None.gif  <employee>
36None.gif    <name>gname>
37None.gif    <dept>dept7dept>
38None.gif    <memo>7memo>
39None.gif  employee>
40None.gif  <employee>
41None.gif    <name>hname>
42None.gif    <dept>dept8dept>
43None.gif    <memo>8memo>
44None.gif  employee>
45None.gifemployees>

 

ContractedBlock.gif ExpandedBlockStart.gif XSL文件
 1None.gif//employee.xsl
 2None.gif
 3None.gifxml version="1.0" encoding="gb2312"?>
 4None.gif<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 5None.gif                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
 6None.gif                version="1.0">
 7None.gif
 8None.gif<xsl:param name="currentPage">xsl:param>
 9None.gif<xsl:param name="totelPage">xsl:param>
10None.gif<xsl:param name="totelEmployee">xsl:param>
11None.gif<xsl:param name="pageSize">xsl:param>
12None.gif<xsl:param name="startEmployee">xsl:param>
13None.gif<xsl:param name="endEmployee">xsl:param>
14None.gif<xsl:param name="order">xsl:param>
15None.gif<xsl:param name="scending">xsl:param>
16None.gif<xsl:param name="langg">xsl:param>
17None.gif
18None.gif<xsl:variable name="filename" select="concat($langg,'.xml')">xsl:variable>
19None.gif<xsl:variable name="languag" select="document($filename)/language">xsl:variable>
20None.gif<xsl:template match="/">
21None.gif<table border="1" cellspacing="0" style="font-size:14pt">
22None.gif    <tbody>
23None.gif        <tr align="center" bgcolor="#33CCCC">
24None.gif            <th><a href="javascript:sort('name')"><xsl:value-of select="$languag/column1"/>a>th>
25None.gif            <th><a href="javascript:sort('dept')"><xsl:value-of select="$languag/column2"/>a>th>
26None.gif            <th><a href="javascript:sort('memo')"><xsl:value-of select="$languag/column3"/>a>th>
27None.gif            <th>               th>
28None.gif        tr>
29None.gif        <xsl:for-each select="//employee[position()>$startEmployee and position()<=$endEmployee]">
30None.gif        <xsl:sort select="*[name()=$order]" order="{$scending}"/>
31None.gif            <tr align="center">    
32None.gif                <xsl:variable name="name" select="name">xsl:variable>
33None.gif                <td><a href="javascript:Edit('{$name}')"><xsl:value-of select="name"/>a>td>
34None.gif                <td><xsl:value-of select="dept"/>td>
35None.gif                <td><xsl:value-of select="memo"/>td>
36None.gif                <td><a href="javascript:delEmployee('{$name}')"><xsl:value-of select="$languag/column4"/>a>td>
37None.gif            tr>
38None.gif    xsl:for-each>
39None.gif    tbody>
40None.giftable>
41None.gif<br/>
42None.gif<xsl:value-of select="$languag/CurrentPage"/><xsl:value-of select="$currentPage">xsl:value-of> <xsl:value-of select="'   '">xsl:value-of>
43None.gif<xsl:value-of select="$languag/TotelPage"/><xsl:value-of select="$totelPage">xsl:value-of><xsl:value-of select="'   '">xsl:value-of>
44None.gif<xsl:value-of select="$languag/TotelCount"/><xsl:value-of select="$totelEmployee">xsl:value-of><xsl:value-of select="'   '">xsl:value-of>
45None.gif<xsl:choose>
46None.gif    <xsl:when test="$currentPage=1">
47None.gif    <xsl:value-of select="$languag/FirstPage"/> |  <xsl:value-of select="$languag/PrevPage"/>  | 
48None.gif    xsl:when>
49None.gif    <xsl:otherwise>
50None.gif      <a href="javascript:firstPage()"><xsl:value-of select="$languag/FirstPage"/>a> |  <a href="javascript:prevPage()"><xsl:value-of select="$languag/PrevPage"/>a> |  
51None.gif    xsl:otherwise>
52None.gifxsl:choose>
53None.gif
54None.gif<xsl:choose>
55None.gif    <xsl:when test="$currentPage=$totelPage">
56None.gif   <xsl:value-of select="$languag/NextPage"/> |  <xsl:value-of select="$languag/LastPage"/>
57None.gif    xsl:when>
58None.gif    <xsl:otherwise>
59None.gif   <a href="javascript:nextPage()"><xsl:value-of select="$languag/NextPage"/>a> | <a href="javascript:lastPage()"><xsl:value-of select="$languag/LastPage"/>a>
60None.gif    xsl:otherwise>
61None.gifxsl:choose>
62None.gifxsl:template>
63None.gifxsl:stylesheet>

 

ContractedBlock.gif ExpandedBlockStart.gif List.html
  1None.gif<html>
  2None.gif    <head>
  3None.gif        <title>Employee Informationtitle>
  4None.gif    head>
  5None.gif    
  6None.gif    <body>
  7None.gif        <div>
  8None.gif            <button align="middle" id="btnAdd" onclick="addEmployee()">新建员工button>
  9None.gif            <div align="right">
 10None.gif                <a href="javascript:languageChange('zh')">中文版a>|<a href="javascript:languageChange('en')">English Versiona>
 11None.gif            div>
 12None.gif        div>
 13None.gif        <div id="divContent" align="center">
 14None.gif        div>
 15None.gif        
 16None.gif        <script language="javascript" type="text/javascript">
 17None.gif            var lngg = new ActiveXObject("MSXML2.DOMDocument");
 18None.gif            var langg = "zh";
 19None.gif            var scending = "ascending";
 20None.gif            lngg.load("language.xml");
 21None.gif            function languageChange(str)
 22ExpandedBlockStart.gifContractedBlock.gif            dot.gif{                
 23InBlock.gif                lnggRoot = lngg.selectSingleNode("//" + str);
 24InBlock.gif                btnAdd.value = lnggRoot.selectSingleNode("btnAdd").childNodes[0].xml;
 25InBlock.gif                langg=str;
 26InBlock.gif                showTable();
 27ExpandedBlockEnd.gif            }

 28None.gif            //全局变量
 29None.gif            var currentPage = 1;
 30None.gif            var pageSize = 5;
 31None.gif            var order = "name";
 32None.gif            
 33None.gif            //初始化
 34None.gif            var xml = new ActiveXObject("MSXML2.DOMDocument");
 35None.gif          xml.load("employee.xml");
 36None.gif            var root=xml.documentElement;            
 37None.gif          var xsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
 38None.gif          xsl.load("employee.xsl");            
 39None.gif          var xslTemplate = new ActiveXObject("MSXML2.XSLTemplate");
 40None.gif          xslTemplate.stylesheet = xsl;
 41None.gif          var xslProcessor = xslTemplate.createProcessor();   
 42None.gif          xslProcessor.input = xml;
 43None.gif            
 44None.gif            //总记录数
 45None.gif            function GetTotleEmplyee()
 46ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
 47InBlock.gif                return xml.documentElement.childNodes.length;
 48ExpandedBlockEnd.gif            }

 49None.gif            
 50None.gif            //总页数
 51None.gif            function GetTotlePage()
 52ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
 53InBlock.gif                return Math.ceil(GetTotleEmplyee()/pageSize);
 54ExpandedBlockEnd.gif            }

 55None.gif            
 56None.gif            //
 57None.gif            function addEmployee()
 58ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
 59InBlock.gif                var tmpObj = new Object();
 60InBlock.gif                tmpObj.XML = xml;
 61InBlock.gif                var lgg = new ActiveXObject("MSXML2.DOMDocument");
 62InBlock.gif                lgg.load(langg+".xml");                
 63InBlock.gif                tmpObj.language = lgg;    
 64InBlock.gif                window.showModalDialog("add.html",tmpObj,
 65InBlock.gif                    "dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
 66InBlock.gif                showTable();    
 67ExpandedBlockEnd.gif            }

 68None.gif            
 69None.gif            //
 70None.gif            function delEmployee(str)
 71ExpandedBlockStart.gifContractedBlock.gif            dot.gif{                
 72InBlock.gif                var node=xml.selectSingleNode("//employee[name='"+str+"']");
 73InBlock.gif                var lgg = new ActiveXObject("MSXML2.DOMDocument");
 74InBlock.gif                lgg.load(langg+".xml");    
 75InBlock.gif                var del = lgg.documentElement.selectSingleNode('del');
 76InBlock.gif                if(!confirm(del.selectSingleNode('Text1').childNodes[0].xml 
 77InBlock.gif                    + str + del.selectSingleNode('Text2').childNodes[0].xml))
 78ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
 79InBlock.gif                    return;
 80ExpandedSubBlockEnd.gif                }

 81InBlock.gif                root.removeChild(node);
 82InBlock.gif                try
 83ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
 84InBlock.gif                    xml.save("employee.xml")
 85ExpandedSubBlockEnd.gif                }
catch(E)
 86ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
 87InBlock.gif                    alert(E.description);
 88ExpandedSubBlockEnd.gif                }

 89InBlock.gif                showTable();
 90ExpandedBlockEnd.gif            }

 91None.gif            
 92None.gif            function sort(str)
 93ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
 94InBlock.gif                order = str;
 95InBlock.gif                if(scending == "ascending")
 96ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
 97InBlock.gif                    scending = "descending";
 98ExpandedSubBlockEnd.gif                }

 99InBlock.gif                else
100ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
101InBlock.gif                    scending = "ascending";
102ExpandedSubBlockEnd.gif                }

103InBlock.gif                showTable();
104ExpandedBlockEnd.gif            }

105None.gif            
106None.gif            function showTable()
107ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
108InBlock.gif            xslProcessor.addParameter("currentPage", currentPage);
109InBlock.gif            xslProcessor.addParameter("totelPage", GetTotlePage());
110InBlock.gif            xslProcessor.addParameter("totelEmployee", GetTotleEmplyee());
111InBlock.gif            xslProcessor.addParameter("pageSize", pageSize);
112InBlock.gif            //定义要读取的Employee记录的范围
113InBlock.gif            xslProcessor.addParameter("startEmployee", (currentPage-1)*pageSize);
114InBlock.gif            xslProcessor.addParameter("endEmployee", currentPage*pageSize);
115InBlock.gif            //排序
116InBlock.gif            xslProcessor.addParameter("order", order);
117InBlock.gif            xslProcessor.addParameter("scending", scending);
118InBlock.gif            //语言切换
119InBlock.gif            xslProcessor.addParameter("langg", langg);
120InBlock.gif            xslProcessor.transform();
121InBlock.gif            divContent.innerHTML = xslProcessor.output;    
122ExpandedBlockEnd.gif            }

123None.gif            showTable();
124None.gif            
125None.gif            function Edit(str)
126ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
127InBlock.gif                var tmpObj = new Object();
128InBlock.gif                tmpObj.XML = xml;
129InBlock.gif                tmpObj.Ename = str;                
130InBlock.gif                var lgg = new ActiveXObject("MSXML2.DOMDocument");
131InBlock.gif                lgg.load(langg+".xml");
132InBlock.gif                tmpObj.lgg = lgg;    
133InBlock.gif                window.showModalDialog("edit.html",tmpObj,
134InBlock.gif                    "dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
135InBlock.gif                showTable();
136ExpandedBlockEnd.gif            }

137None.gif            
138None.gif            function firstPage()
139ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
140InBlock.gif                currentPage = 1;
141InBlock.gif                showTable();
142ExpandedBlockEnd.gif            }

143None.gif            
144None.gif            function nextPage()
145ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
146InBlock.gif                currentPage=currentPage+1;
147InBlock.gif                showTable();
148ExpandedBlockEnd.gif            }

149None.gif            
150None.gif            function prevPage()
151ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
152InBlock.gif                currentPage=currentPage-1;
153InBlock.gif                showTable();
154ExpandedBlockEnd.gif            }

155None.gif            
156None.gif            function lastPage()
157ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
158InBlock.gif                currentPage=GetTotlePage();
159InBlock.gif                showTable();
160ExpandedBlockEnd.gif            }

161None.gif        script>
162None.gif    body>
163None.gifhtml>

 

ContractedBlock.gif ExpandedBlockStart.gif Add.html
 1None.gif<html>
 2None.gif<head>
 3None.gif    <title>Untitled Pagetitle>        
 4None.gifhead>
 5None.gif<body style="text-align: center"  bgcolor="#D5ECFF">
 6None.gif   <br/>
 7None.gif   <h2 id="title" style="text-align: center" ><br/>h2> 
 8None.gif    <br />
 9None.gif    <table>
10None.gif        <tr>
11None.gif            <td><span id="empName">span>td>
12None.gif            <td><input id="ename" type="text" />td>
13None.gif        tr>
14None.gif        <tr>
15None.gif            <td><span id="empDept">span>td>
16None.gif            <td><input id="dept" type="text" />td>
17None.gif          tr>
18None.gif          <tr>
19None.gif            <td><span id="empMemo">span>td>
20None.gif            <td><input id="memo" type="text" />td>
21None.gif        tr>
22None.gif    table>
23None.gif    <br />
24None.gif    &nbsp;&nbsp;
25None.gif    <input id="save" type="button" value="" onclick="Save()" />
26None.gif    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
27None.gif    <input id="cancel" type="button" value="" onclick="Cancel()"/><br />
28None.gif    
29None.gif    
30None.gif    <script language="javascript" type="text/javascript">
31None.gif        var xml,root,lgg;        
32None.gif        xml = window.dialogArguments.XML;
33None.gif        root=xml.documentElement;
34None.gif        lgg = window.dialogArguments.language;
35None.gif        var add = lgg.documentElement.selectSingleNode('add');
36None.gif        
37None.gif        title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
38None.gif        empName.innerText = add.selectSingleNode('Name').childNodes[0].xml;
39None.gif        empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
40None.gif        empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
41None.gif        save.value = add.selectSingleNode('Save').childNodes[0].xml;
42None.gif        cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
43None.gif
44None.gif        function Save() 
45ExpandedBlockStart.gifContractedBlock.gif        dot.gif{
46InBlock.gif            if(ename.value=="")
47ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
48InBlock.gif                var notNull = add.selectSingleNode('NotNull').childNodes[0].xml;
49InBlock.gif                alert(notNull);
50InBlock.gif                return;
51ExpandedSubBlockEnd.gif            }

52InBlock.gif            var em=xml.selectSingleNode("//employee[name='"+ename.value+"']");
53InBlock.gif            if(em!=null)
54ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
55InBlock.gif                var nameRepeat = add.selectSingleNode('NameRepeat').childNodes[0].xml;
56InBlock.gif                alert(nameRepeat);
57InBlock.gif                return;
58ExpandedSubBlockEnd.gif            }

59InBlock.gif            var emp=xml.createElement("employee");
60InBlock.gif            name1=xml.createElement("name");
61InBlock.gif            name1.text=ename.value;
62InBlock.gif            dept1=xml.createElement("dept");
63InBlock.gif            dept1.text=dept.value;
64InBlock.gif            memo1=xml.createElement("memo");
65InBlock.gif            memo1.text=memo.value;
66InBlock.gif            emp.appendChild(name1);
67InBlock.gif            emp.appendChild(dept1);
68InBlock.gif            emp.appendChild(memo1);
69InBlock.gif            root.appendChild(emp);
70InBlock.gif            try
71ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
72InBlock.gif                xml.save("employee.xml")
73ExpandedSubBlockEnd.gif            }
catch(E)
74ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
75InBlock.gif                alert(E.description);
76ExpandedSubBlockEnd.gif            }

77InBlock.gif            window.close();
78ExpandedBlockEnd.gif        }

79None.gif
80None.gif        function Cancel() 
81ExpandedBlockStart.gifContractedBlock.gif        dot.gif{
82InBlock.gif            window.close();
83ExpandedBlockEnd.gif        }

84None.gif    script>
85None.gifbody>
86None.gifhtml>

 

ContractedBlock.gif ExpandedBlockStart.gif edit.html
 1None.gif<html>
 2None.gif<head>
 3None.gif    <title>Untitled Pagetitle>        
 4None.gifhead>
 5None.gif<body style="text-align: center"  bgcolor="#D5ECFF">
 6None.gif   <br/>
 7None.gif   <h2 id="title" style="text-align: center" >h2> 
 8None.gif    <table>
 9None.gif        <tr>
10None.gif            <td><span id="empname">span>td>
11None.gif            <td><input id="ename" type="text" disabled="true" />td>
12None.gif        tr>
13None.gif        <tr>
14None.gif            <td><span id="empDept">span>td>
15None.gif            <td><input id="dept" type="text" />td>
16None.gif          tr>
17None.gif          <tr>
18None.gif            <td><span id="empMemo">span>td>
19None.gif            <td><input id="memo" type="text" />td>
20None.gif        tr>
21None.gif    table>
22None.gif    <br />
23None.gif    &nbsp;&nbsp;
24None.gif    <input id="save" type="button" value="" onclick="Save()" />
25None.gif    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
26None.gif    <input id="cancel" type="button" value="" onclick="Cancel()"/><br />
27None.gif    
28None.gif    
29None.gif    <script language="javascript" type="text/javascript">
30None.gif        var xml,root,lgg;
31None.gif        xml = window.dialogArguments.XML;
32None.gif        empName = window.dialogArguments.Ename;
33None.gif        ename.value = empName;
34None.gif        var oldEmp=xml.selectSingleNode("//employee[name='"+empName+"']");
35None.gif        dept.value = oldEmp.childNodes[1].childNodes[0].xml;
36None.gif        memo.value = oldEmp.childNodes[2].childNodes[0].xml;
37None.gif        
38None.gif        root=xml.documentElement;
39None.gif        lgg = window.dialogArguments.lgg;
40None.gif        var add = lgg.documentElement.selectSingleNode('add');
41None.gif        
42None.gif        title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
43None.gif        empname.innerText = add.selectSingleNode('Name').childNodes[0].xml;
44None.gif        empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
45None.gif        empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
46None.gif        save.value = add.selectSingleNode('Save').childNodes[0].xml;
47None.gif        cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
48None.gif
49None.gif        function Save() 
50ExpandedBlockStart.gifContractedBlock.gif        dot.gif{            
51InBlock.gif            var emp = xml.createElement("employee");
52InBlock.gif            name1=xml.createElement("name");
53InBlock.gif            name1.text=ename.value;
54InBlock.gif            dept1=xml.createElement("dept");
55InBlock.gif            dept1.text=dept.value;
56InBlock.gif            memo1=xml.createElement("memo");
57InBlock.gif            memo1.text=memo.value;
58InBlock.gif            emp.appendChild(name1);
59InBlock.gif            emp.appendChild(dept1);
60InBlock.gif            emp.appendChild(memo1);
61InBlock.gif            root.replaceChild(emp,oldEmp);
62InBlock.gif            try
63ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
64InBlock.gif                xml.save("employee.xml")
65ExpandedSubBlockEnd.gif            }
catch(E)
66ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{
67InBlock.gif                alert(E.description);
68ExpandedSubBlockEnd.gif            }
            
69InBlock.gif            window.close();
70ExpandedBlockEnd.gif        }

71None.gif
72None.gif        function Cancel() 
73ExpandedBlockStart.gifContractedBlock.gif        dot.gif{
74InBlock.gif            window.close();
75ExpandedBlockEnd.gif        }

76None.gif    script>
77None.gifbody>
78None.gifhtml>

源代码下载:http://files.cnblogs.com/happyhippy/XML.rar(打开list.html查看效果)
现实效果图:
添加(zh):
JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源_第1张图片
修改(en):
JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源_第2张图片
删除(zh):
JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源_第3张图片
删除(en):
JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源_第4张图片

5. 没弄过CSS,所以没有做界面美化...

 

转载于:https://www.cnblogs.com/happyhippy/archive/2007/07/26/831600.html

你可能感兴趣的:(JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源)