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

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

 

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

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

// Language.XML

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

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

<!-- langg传文件名：zh或en -->
< xsl:param name = " langg " ></ xsl:param >
< xsl:variable name = " filename "  select = " concat($langg,'.xml') " ></ xsl:variable >
< xsl:variable name = " languag "  select = " document($filename)/language " ></ xsl:variable >

 

// zh.xml

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

 

// en.xml

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

 

2. 分页：

// JS中
xslProcessor.addParameter( " currentPage " , currentPage);
xslProcessor.addParameter( " totelPage " , GetTotlePage());
xslProcessor.addParameter( " totelEmployee " , GetTotleEmplyee());
xslProcessor.addParameter( " pageSize " , pageSize);
// 定义要读取的Employee记录的范围
xslProcessor.addParameter( " startEmployee " , (currentPage - 1 ) * pageSize);
xslProcessor.addParameter( " endEmployee " , currentPage * pageSize);

// XSL中
xsl中，只读取一定范围的节点(startEmployee < position() <= endEmployee)：
< xsl: for - each select = " //employee[position()&gt;$startEmployee and position()&lt;=$endEmployee] " >

 

3. 排序：

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

 

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

数据文件
 1//employee.xml
 2
 3<?xml version="1.0" encoding="gb2312"?>
 4<employees>
 5  <employee>
 6    <name>a</name>
 7    <dept>dept1</dept>
 8    <memo>1</memo>
 9  </employee>
10  <employee>
11    <name>b</name>
12    <dept>dept2</dept>
13    <memo>2</memo>
14  </employee>
15  <employee>
16    <name>c</name>
17    <dept>dept3</dept>
18    <memo>3</memo>
19  </employee>
20  <employee>
21    <name>d</name>
22    <dept>dept4</dept>
23    <memo>4</memo>
24  </employee>
25  <employee>
26    <name>e</name>
27    <dept>dept5</dept>
28    <memo>5</memo>
29  </employee>
30  <employee>
31    <name>f</name>
32    <dept>dept6</dept>
33    <memo>6</memo>
34  </employee>
35  <employee>
36    <name>g</name>
37    <dept>dept7</dept>
38    <memo>7</memo>
39  </employee>
40  <employee>
41    <name>h</name>
42    <dept>dept8</dept>
43    <memo>8</memo>
44  </employee>
45</employees>

 

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

 

List.html
  1<html>
  2    <head>
  3        <title>Employee Information</title>
  4    </head>
  5    
  6    <body>
  7        <div>
  8            <button align="middle" id="btnAdd" onclick="addEmployee()">新建员工</button>
  9            <div align="right">
 10                <a href="javascript:languageChange('zh')">中文版</a>|<a href="javascript:languageChange('en')">English Version</a>
 11            </div>
 12        </div>
 13        <div id="divContent" align="center">
 14        </div>
 15        
 16        <script language="javascript" type="text/javascript">
 17            var lngg = new ActiveXObject("MSXML2.DOMDocument");
 18            var langg = "zh";
 19            var scending = "ascending";
 20            lngg.load("language.xml");
 21            function languageChange(str)
 22            {                
 23                lnggRoot = lngg.selectSingleNode("//" + str);
 24                btnAdd.value = lnggRoot.selectSingleNode("btnAdd").childNodes[0].xml;
 25                langg=str;
 26                showTable();
 27            }
 28            //全局变量
 29            var currentPage = 1;
 30            var pageSize = 5;
 31            var order = "name";
 32            
 33            //初始化
 34            var xml = new ActiveXObject("MSXML2.DOMDocument");
 35          xml.load("employee.xml");
 36            var root=xml.documentElement;            
 37          var xsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
 38          xsl.load("employee.xsl");            
 39          var xslTemplate = new ActiveXObject("MSXML2.XSLTemplate");
 40          xslTemplate.stylesheet = xsl;
 41          var xslProcessor = xslTemplate.createProcessor();   
 42          xslProcessor.input = xml;
 43            
 44            //总记录数
 45            function GetTotleEmplyee()
 46            {
 47                return xml.documentElement.childNodes.length;
 48            }
 49            
 50            //总页数
 51            function GetTotlePage()
 52            {
 53                return Math.ceil(GetTotleEmplyee()/pageSize);
 54            }
 55            
 56            //增
 57            function addEmployee()
 58            {
 59                var tmpObj = new Object();
 60                tmpObj.XML = xml;
 61                var lgg = new ActiveXObject("MSXML2.DOMDocument");
 62                lgg.load(langg+".xml");                
 63                tmpObj.language = lgg;    
 64                window.showModalDialog("add.html",tmpObj,
 65                    "dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
 66                showTable();    
 67            }
 68            
 69            //删
 70            function delEmployee(str)
 71            {                
 72                var node=xml.selectSingleNode("//employee[name='"+str+"']");
 73                var lgg = new ActiveXObject("MSXML2.DOMDocument");
 74                lgg.load(langg+".xml");    
 75                var del = lgg.documentElement.selectSingleNode('del');
 76                if(!confirm(del.selectSingleNode('Text1').childNodes[0].xml 
 77                    + str + del.selectSingleNode('Text2').childNodes[0].xml))
 78                {
 79                    return;
 80                }
 81                root.removeChild(node);
 82                try
 83                {
 84                    xml.save("employee.xml")
 85                }catch(E)
 86                {
 87                    alert(E.description);
 88                }
 89                showTable();
 90            }
 91            
 92            function sort(str)
 93            {
 94                order = str;
 95                if(scending == "ascending")
 96                {
 97                    scending = "descending";
 98                }
 99                else
100                {
101                    scending = "ascending";
102                }
103                showTable();
104            }
105            
106            function showTable()
107            {
108            xslProcessor.addParameter("currentPage", currentPage);
109            xslProcessor.addParameter("totelPage", GetTotlePage());
110            xslProcessor.addParameter("totelEmployee", GetTotleEmplyee());
111            xslProcessor.addParameter("pageSize", pageSize);
112            //定义要读取的Employee记录的范围
113            xslProcessor.addParameter("startEmployee", (currentPage-1)*pageSize);
114            xslProcessor.addParameter("endEmployee", currentPage*pageSize);
115            //排序
116            xslProcessor.addParameter("order", order);
117            xslProcessor.addParameter("scending", scending);
118            //语言切换
119            xslProcessor.addParameter("langg", langg);
120            xslProcessor.transform();
121            divContent.innerHTML = xslProcessor.output;    
122            }
123            showTable();
124            
125            function Edit(str)
126            {
127                var tmpObj = new Object();
128                tmpObj.XML = xml;
129                tmpObj.Ename = str;                
130                var lgg = new ActiveXObject("MSXML2.DOMDocument");
131                lgg.load(langg+".xml");
132                tmpObj.lgg = lgg;    
133                window.showModalDialog("edit.html",tmpObj,
134                    "dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
135                showTable();
136            }
137            
138            function firstPage()
139            {
140                currentPage = 1;
141                showTable();
142            }
143            
144            function nextPage()
145            {
146                currentPage=currentPage+1;
147                showTable();
148            }
149            
150            function prevPage()
151            {
152                currentPage=currentPage-1;
153                showTable();
154            }
155            
156            function lastPage()
157            {
158                currentPage=GetTotlePage();
159                showTable();
160            }
161        </script>
162    </body>
163</html>

 

Add.html
 1<html>
 2<head>
 3    <title>Untitled Page</title>        
 4</head>
 5<body style="text-align: center"  bgcolor="#D5ECFF">
 6   <br/>
 7   <h2 id="title" style="text-align: center" ><br/></h2> 
 8    <br />
 9    <table>
10        <tr>
11            <td><span id="empName"></span>：</td>
12            <td><input id="ename" type="text" /></td>
13        </tr>
14        <tr>
15            <td><span id="empDept"></span>：</td>
16            <td><input id="dept" type="text" /></td>
17          </tr>
18          <tr>
19            <td><span id="empMemo"></span>：</td>
20            <td><input id="memo" type="text" /></td>
21        </tr>
22    </table>
23    <br />
24    &nbsp;&nbsp;
25    <input id="save" type="button" value="" onclick="Save()" />
26    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
27    <input id="cancel" type="button" value="" onclick="Cancel()"/><br />
28    
29    
30    <script language="javascript" type="text/javascript">
31        var xml,root,lgg;        
32        xml = window.dialogArguments.XML;
33        root=xml.documentElement;
34        lgg = window.dialogArguments.language;
35        var add = lgg.documentElement.selectSingleNode('add');
36        
37        title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
38        empName.innerText = add.selectSingleNode('Name').childNodes[0].xml;
39        empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
40        empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
41        save.value = add.selectSingleNode('Save').childNodes[0].xml;
42        cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
43
44        function Save() 
45        {
46            if(ename.value=="")
47            {
48                var notNull = add.selectSingleNode('NotNull').childNodes[0].xml;
49                alert(notNull);
50                return;
51            }
52            var em=xml.selectSingleNode("//employee[name='"+ename.value+"']");
53            if(em!=null)
54            {
55                var nameRepeat = add.selectSingleNode('NameRepeat').childNodes[0].xml;
56                alert(nameRepeat);
57                return;
58            }
59            var emp=xml.createElement("employee");
60            name1=xml.createElement("name");
61            name1.text=ename.value;
62            dept1=xml.createElement("dept");
63            dept1.text=dept.value;
64            memo1=xml.createElement("memo");
65            memo1.text=memo.value;
66            emp.appendChild(name1);
67            emp.appendChild(dept1);
68            emp.appendChild(memo1);
69            root.appendChild(emp);
70            try
71            {
72                xml.save("employee.xml")
73            }catch(E)
74            {
75                alert(E.description);
76            }
77            window.close();
78        }
79
80        function Cancel() 
81        {
82            window.close();
83        }
84    </script>
85</body>
86</html>

 

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

源代码下载：http://files.cnblogs.com/happyhippy/XML.rar(打开list.html查看效果)
现实效果图：
添加(zh):

修改(en):

删除(zh):

删除(en):

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