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

数据文件

 

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，如需转载请自行联系原作者