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>

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

修改(en):

删除(zh):

删除(en):

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