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()>$startEmployee and position()<=$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()>$startEmployee and position()<=$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
25
<input id="save" type="button" value="" onclick="Save()" />
26
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
24
<input id="save" type="button" value="" onclick="Save()" />
25
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,所以没有做界面美化...