JS+XMLDOM+XSL：实现中英文界面切换、排序、分页显示、增删改查XML文件数据源
0. 有关JS、XMLDOM、XSLT的基础知识，可以参考我前面的三篇学习笔记：
《JS学习笔记》
http://www.cnblogs.com/happyhippy/archive/2007/07/24/829007.html
《XML DOM学习笔记(JS) 》
http://www.cnblogs.com/happyhippy/archive/2007/07/24/829001.html
《XSLT学习笔记 》
http://www.cnblogs.com/happyhippy/archive/2007/07/25/831576.html
1. 中英文切换：
原本打算是用一个XML文件(Language.xml)作为语言的配置文件，然后在HTML/JS中传入所选择得语言种类，来加载不同的XML节点，我最原始的思路：
复制 
保存
Language.XML
复制 保存
但在实践过程中，发现XSL中document函数后的Xpath不能带参数变量，只好改成两个文件(zh.xml和en.xml)，通过HTML/JS传入所选择的语言的种类，来加载不同的语言所对应的配置文件：
复制 保存
zh.xml
复制 保存
en.xml
复制 保存
2. 分页：
JS中
复制 保存
xsl中，只读取一定范围的节点(startEmployee<position()<=endEmployee)：
复制 保存
3. 排序：
JS中：
复制 保存
XSL中
复制 保存
//很多文章介绍说可以这样<xsl:sort select="$order" order="{$scending}"/>，但在我自己的机器上测试不行的说
4. 增删查改：基本的XMLDOM操作，直接看代码吧...
employee.xml
复制 保存
employee.xsl
复制 保存
list.html
阅读 
编辑 
运行 复制 保存
add.html
阅读 编辑 运行 复制 保存
edit.html
阅读 编辑 运行 复制 保存
源代码下载：
https://files.cnblogs.com/happyhippy/XML.rar
(打开list.html查看效果)
现实效果图：
添加(zh):
修改(en):
删除(zh):
删除(en):
《JS学习笔记》
http://www.cnblogs.com/happyhippy/archive/2007/07/24/829007.html
《XML DOM学习笔记(JS) 》
http://www.cnblogs.com/happyhippy/archive/2007/07/24/829001.html
《XSLT学习笔记 》
http://www.cnblogs.com/happyhippy/archive/2007/07/25/831576.html
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中，只读取一定范围的节点(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操作，直接看代码吧...
employee.xml
复制 保存<?xml version="1.0" encoding="gb2312"?> <employees> <employee> <name>a</name> <dept>dept1</dept> <memo>1</memo> </employee> <employee> <name>b</name> <dept>dept2</dept> <memo>2</memo> </employee> <employee> <name>c</name> <dept>dept3</dept> <memo>3</memo> </employee> <employee> <name>d</name> <dept>dept4</dept> <memo>4</memo> </employee> <employee> <name>e</name> <dept>dept5</dept> <memo>5</memo> </employee> <employee> <name>f</name> <dept>dept6</dept> <memo>6</memo> </employee> <employee> <name>g</name> <dept>dept7</dept> <memo>7</memo> </employee> <employee> <name>h</name> <dept>dept8</dept> <memo>8</memo> </employee> </employees>
employee.xsl
复制 保存<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
version="1.0">
<xsl:param name="currentPage"></xsl:param>
<xsl:param name="totelPage"></xsl:param>
<xsl:param name="totelEmployee"></xsl:param>
<xsl:param name="pageSize"></xsl:param>
<xsl:param name="startEmployee"></xsl:param>
<xsl:param name="endEmployee"></xsl:param>
<xsl:param name="order"></xsl:param>
<xsl:param name="scending"></xsl:param>
<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>
<xsl:template match="/">
<table border="1" cellspacing="0" style="font-size:14pt">
<tbody>
<tr align="center" bgcolor="#33CCCC">
<th><a href="javascript:sort('name')"><xsl:value-of select="$languag/column1"/></a></th>
<th><a href="javascript:sort('dept')"><xsl:value-of select="$languag/column2"/></a></th>
<th><a href="javascript:sort('memo')"><xsl:value-of select="$languag/column3"/></a></th>
<th> </th>
</tr>
<xsl:for-each select="//employee[position()>$startEmployee and position()<=$endEmployee]">
<xsl:sort select="*[name()=$order]" order="{$scending}"/>
<tr align="center">
<xsl:variable name="name" select="name"></xsl:variable>
<td><a href="javascript:Edit('{$name}')"><xsl:value-of select="name"/></a></td>
<td><xsl:value-of select="dept"/></td>
<td><xsl:value-of select="memo"/></td>
<td><a href="javascript:delEmployee('{$name}')"><xsl:value-of select="$languag/column4"/></a></td>
</tr>
</xsl:for-each>
</tbody>
</table>
<br/>
<xsl:value-of select="$languag/CurrentPage"/>：<xsl:value-of select="$currentPage"></xsl:value-of> <xsl:value-of select="' '"></xsl:value-of>
<xsl:value-of select="$languag/TotelPage"/>：<xsl:value-of select="$totelPage"></xsl:value-of><xsl:value-of select="' '"></xsl:value-of>
<xsl:value-of select="$languag/TotelCount"/>：<xsl:value-of select="$totelEmployee"></xsl:value-of><xsl:value-of select="' '"></xsl:value-of>
<xsl:choose>
<xsl:when test="$currentPage=1">
<xsl:value-of select="$languag/FirstPage"/> | <xsl:value-of select="$languag/PrevPage"/> |
</xsl:when>
<xsl:otherwise>
<a href="javascript:firstPage()"><xsl:value-of select="$languag/FirstPage"/></a> | <a href="javascript:prevPage()"><xsl:value-of select="$languag/PrevPage"/></a> |
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="$currentPage=$totelPage">
<xsl:value-of select="$languag/NextPage"/> | <xsl:value-of select="$languag/LastPage"/>
</xsl:when>
<xsl:otherwise>
<a href="javascript:nextPage()"><xsl:value-of select="$languag/NextPage"/></a> | <a href="javascript:lastPage()"><xsl:value-of select="$languag/LastPage"/></a>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
list.html
阅读 编辑 运行 复制 保存<html>
<head>
<title>Employee Information</title>
</head>
<body>
<div>
<button align="middle" id="btnAdd" onclick="addEmployee()">新建员工</button>
<div align="right">
<a href="javascript:languageChange('zh')">中文版</a>|<a href="javascript:languageChange('en')">English Version</a>
</div>
</div>
<div id="divContent" align="center">
</div>
<script language="javascript" type="text/javascript">
var lngg = new ActiveXObject("MSXML2.DOMDocument");
var langg = "zh";
var scending = "ascending";
lngg.load("language.xml");
function languageChange(str)
{
lnggRoot = lngg.selectSingleNode("//" + str);
btnAdd.value = lnggRoot.selectSingleNode("btnAdd").childNodes[0].xml;
langg=str;
showTable();
}
//全局变量
var currentPage = 1;
var pageSize = 5;
var order = "name";
//初始化
var xml = new ActiveXObject("MSXML2.DOMDocument");
xml.load("employee.xml");
var root=xml.documentElement;
var xsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
xsl.load("employee.xsl");
var xslTemplate = new ActiveXObject("MSXML2.XSLTemplate");
xslTemplate.stylesheet = xsl;
var xslProcessor = xslTemplate.createProcessor();
xslProcessor.input = xml;
//总记录数
function GetTotleEmplyee()
{
return xml.documentElement.childNodes.length;
}
//总页数
function GetTotlePage()
{
return Math.ceil(GetTotleEmplyee()/pageSize);
}
//增
function addEmployee()
{
var tmpObj = new Object();
tmpObj.XML = xml;
var lgg = new ActiveXObject("MSXML2.DOMDocument");
lgg.load(langg+".xml");
tmpObj.language = lgg;
window.showModalDialog("add.html",tmpObj,
"dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
showTable();
}
//删
function delEmployee(str)
{
var node=xml.selectSingleNode("//employee[name='"+str+"']");
var lgg = new ActiveXObject("MSXML2.DOMDocument");
lgg.load(langg+".xml");
var del = lgg.documentElement.selectSingleNode('del');
if(!confirm(del.selectSingleNode('Text1').childNodes[0].xml
+ str + del.selectSingleNode('Text2').childNodes[0].xml))
{
return;
}
root.removeChild(node);
try
{
xml.save("employee.xml")
}catch(E)
{
alert(E.description);
}
showTable();
}
function sort(str)
{
order = str;
if(scending == "ascending")
{
scending = "descending";
}
else
{
scending = "ascending";
}
showTable();
}
function showTable()
{
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);
//排序
xslProcessor.addParameter("order", order);
xslProcessor.addParameter("scending", scending);
//语言切换
xslProcessor.addParameter("langg", langg);
xslProcessor.transform();
divContent.innerHTML = xslProcessor.output;
}
showTable();
function Edit(str)
{
var tmpObj = new Object();
tmpObj.XML = xml;
tmpObj.Ename = str;
var lgg = new ActiveXObject("MSXML2.DOMDocument");
lgg.load(langg+".xml");
tmpObj.lgg = lgg;
window.showModalDialog("edit.html",tmpObj,
"dialogHeight: 300px; dialogWidth:300px;center:resizable: No; status:No");
showTable();
}
function firstPage()
{
currentPage = 1;
showTable();
}
function nextPage()
{
currentPage=currentPage+1;
showTable();
}
function prevPage()
{
currentPage=currentPage-1;
showTable();
}
function lastPage()
{
currentPage=GetTotlePage();
showTable();
}
</script>
</body>
</html>
add.html
阅读 编辑 运行 复制 保存<html>
<head>
<title>Untitled Page</title>
</head>
<body style="text-align: center" bgcolor="#D5ECFF">
<br/>
<h2 id="title" style="text-align: center" ><br/></h2>
<br />
<table>
<tr>
<td><span id="empName"></span>：</td>
<td><input id="ename" type="text" /></td>
</tr>
<tr>
<td><span id="empDept"></span>：</td>
<td><input id="dept" type="text" /></td>
</tr>
<tr>
<td><span id="empMemo"></span>：</td>
<td><input id="memo" type="text" /></td>
</tr>
</table>
<br />
<input id="save" type="button" value="" onclick="Save()" />
<input id="cancel" type="button" value="" onclick="Cancel()"/><br />
<script language="javascript" type="text/javascript">
var xml,root,lgg;
xml = window.dialogArguments.XML;
root=xml.documentElement;
lgg = window.dialogArguments.language;
var add = lgg.documentElement.selectSingleNode('add');
title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
empName.innerText = add.selectSingleNode('Name').childNodes[0].xml;
empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
save.value = add.selectSingleNode('Save').childNodes[0].xml;
cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
function Save()
{
if(ename.value=="")
{
var notNull = add.selectSingleNode('NotNull').childNodes[0].xml;
alert(notNull);
return;
}
var em=xml.selectSingleNode("//employee[name='"+ename.value+"']");
if(em!=null)
{
var nameRepeat = add.selectSingleNode('NameRepeat').childNodes[0].xml;
alert(nameRepeat);
return;
}
var emp=xml.createElement("employee");
name1=xml.createElement("name");
name1.text=ename.value;
dept1=xml.createElement("dept");
dept1.text=dept.value;
memo1=xml.createElement("memo");
memo1.text=memo.value;
emp.appendChild(name1);
emp.appendChild(dept1);
emp.appendChild(memo1);
root.appendChild(emp);
try
{
xml.save("employee.xml")
}catch(E)
{
alert(E.description);
}
window.close();
}
function Cancel()
{
window.close();
}
</script>
</body>
</html>
edit.html
阅读 编辑 运行 复制 保存<html>
<head>
<title>Untitled Page</title>
</head>
<body style="text-align: center" bgcolor="#D5ECFF">
<br/>
<h2 id="title" style="text-align: center" ></h2>
<table>
<tr>
<td><span id="empname"></span>：</td>
<td><input id="ename" type="text" disabled="true" /></td>
</tr>
<tr>
<td><span id="empDept"></span>：</td>
<td><input id="dept" type="text" /></td>
</tr>
<tr>
<td><span id="empMemo"></span>：</td>
<td><input id="memo" type="text" /></td>
</tr>
</table>
<br />
<input id="save" type="button" value="" onclick="Save()" />
<input id="cancel" type="button" value="" onclick="Cancel()"/><br />
<script language="javascript" type="text/javascript">
var xml,root,lgg;
xml = window.dialogArguments.XML;
empName = window.dialogArguments.Ename;
ename.value = empName;
var oldEmp=xml.selectSingleNode("//employee[name='"+empName+"']");
dept.value = oldEmp.childNodes[1].childNodes[0].xml;
memo.value = oldEmp.childNodes[2].childNodes[0].xml;
root=xml.documentElement;
lgg = window.dialogArguments.lgg;
var add = lgg.documentElement.selectSingleNode('add');
title.innerText = add.selectSingleNode('Title').childNodes[0].xml;
empname.innerText = add.selectSingleNode('Name').childNodes[0].xml;
empDept.innerText = add.selectSingleNode('Dept').childNodes[0].xml;
empMemo.innerText = add.selectSingleNode('Memo').childNodes[0].xml;
save.value = add.selectSingleNode('Save').childNodes[0].xml;
cancel.value = add.selectSingleNode('Cancel').childNodes[0].xml;
function Save()
{
var emp = xml.createElement("employee");
name1=xml.createElement("name");
name1.text=ename.value;
dept1=xml.createElement("dept");
dept1.text=dept.value;
memo1=xml.createElement("memo");
memo1.text=memo.value;
emp.appendChild(name1);
emp.appendChild(dept1);
emp.appendChild(memo1);
root.replaceChild(emp,oldEmp);
try
{
xml.save("employee.xml")
}catch(E)
{
alert(E.description);
}
window.close();
}
function Cancel()
{
window.close();
}
</script>
</body>
</html>
源代码下载：
https://files.cnblogs.com/happyhippy/XML.rar
(打开list.html查看效果)
现实效果图：
添加(zh):
修改(en):
删除(zh):
删除(en):
欢迎各位的到来，如有更多的疑问可以进入我们的BBS：http://www.supfar.com/
浙公网安备 33010602011771号