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

2021-09-03 03:24:55

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

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

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

<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"?>

<zh>

</zh>

<en>

<title>Employee Information</title>

<btnAdd>Add New Employee</btnAdd>

<column2>Department</column2>

<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>

</en>

</language>

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

<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"?>

<add>

<NotNull>员工姓名不能为空！</NotNull>

<NameRepeat>姓名重复，请重新输入姓名！</NameRepeat>

</add>

<del>

</del>

<edit>

</edit>

</language>

//en.xml

<?xml version="1.0" encoding="gb2312"?>

<title>Employee Information</title>

<btnAdd>Add New Employee</btnAdd>

<column2>Department</column2>

<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>

<add>

<NotNull>You must enter employee name！</NotNull>

<NameRepeat>Name is already exists，please input again！</NameRepeat>

<Cancel>Cancel</Cancel>

<Title>Employee Information</Title>

<Dept>Department</Dept>

</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操作，直接看代码吧...

数据文件

XSL文件

List.html

Add.html

edit.html

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

修改(en):

删除(zh):

删除(en):

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

本文转自Silent Void博客园博客，原文链接：http://www.cnblogs.com/happyhippy/archive/2007/07/26/831600.html，如需转载请自行联系原作者

码农公寓

相关文章