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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

吞吞吐吐的 2017-09-15 17:23:00 浏览581
展开阅读全文


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

 

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

None.gif<xsl:param name="langg"></xsl:param>
None.gif
<xsl:variable name="languag" select="document($filename)/language/$langg"></xsl:variable>

None.gif//Language.XML
None.gif

None.gif
<?xml version="1.0" encoding="gb2312"?>
None.gif
<language>
None.gif    
<zh>
None.gif        
<title>员工信息</title>
None.gif        
<btnAdd>新建员工</btnAdd>
None.gif        
<column1>姓名</column1>
None.gif        
<column2>部门</column2>
None.gif        
<column3>备注</column3>
None.gif        
<column4>删除</column4>
None.gif        
<CurrentPage>当前页码</CurrentPage>
None.gif        
<TotelPage>总页数</TotelPage>
None.gif        
<TotelCount>总记录数</TotelCount>        
None.gif        
<FirstPage>首页</FirstPage>
None.gif        
<PrevPage>前一页</PrevPage>
None.gif        
<NextPage>后一页</NextPage>
None.gif        
<LastPage>最后一页</LastPage>
None.gif    
</zh>
None.gif    
<en>
None.gif        
<title>Employee Information</title>
None.gif        
<btnAdd>Add New Employee</btnAdd>
None.gif        
<column1>Name</column1>
None.gif        
<column2>Department</column2>
None.gif        
<column3>Memo</column3>
None.gif        
<column4>Delete</column4>
None.gif        
<CurrentPage>Current Page</CurrentPage>
None.gif        
<TotelPage>Totel Page Count</TotelPage>
None.gif        
<TotelCount>Totel Record Count</TotelCount>
None.gif        
<FirstPage>First Page</FirstPage>
None.gif        
<PrevPage>Previous Page</PrevPage>
None.gif        
<NextPage>Next Page</NextPage>
None.gif        
<LastPage>Last Page</LastPage>
None.gif    
</en>
None.gif
</language>

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

None.gif<!--langg传文件名:zh或en-->
None.gif
<xsl:param name="langg"></xsl:param>
None.gif
<xsl:variable name="filename" select="concat($langg,'.xml')"></xsl:variable>
None.gif
<xsl:variable name="languag" select="document($filename)/language"></xsl:variable>

 

None.gif//zh.xml
None.gif

None.gif
<?xml version="1.0" encoding="gb2312"?>
None.gif
<language>
None.gif        
<title>员工信息</title>
None.gif        
<btnAdd>新建员工</btnAdd>
None.gif        
<column1>姓名</column1>
None.gif        
<column2>部门</column2>
None.gif        
<column3>备注</column3>
None.gif        
<column4>删除</column4>
None.gif        
<CurrentPage>当前页码</CurrentPage>
None.gif        
<TotelPage>总页数</TotelPage>
None.gif        
<TotelCount>总记录数</TotelCount>        
None.gif        
<FirstPage>首页</FirstPage>
None.gif        
<PrevPage>前一页</PrevPage>
None.gif        
<NextPage>后一页</NextPage>
None.gif        
<LastPage>最后一页</LastPage>
None.gif        
<add>
None.gif            
<NotNull>员工姓名不能为空!</NotNull>
None.gif            
<NameRepeat>姓名重复,请重新输入姓名!</NameRepeat>
None.gif            
<Save>保存</Save>
None.gif            
<Cancel>取消</Cancel>
None.gif            
<Title>员工信息</Title>
None.gif            
<Name>姓名</Name>
None.gif            
<Dept>部门</Dept>
None.gif            
<Memo>备注</Memo>
None.gif        
</add>
None.gif        
<del>
None.gif            
<Text1>确定删除 </Text1>
None.gif            
<Text2> 记录吗?</Text2>
None.gif        
</del>
None.gif        
<edit>
None.gif        
</edit>
None.gif
</language>

 

None.gif//en.xml
None.gif

None.gif
<?xml version="1.0" encoding="gb2312"?>
None.gif
<language>
None.gif        
<title>Employee Information</title>
None.gif        
<btnAdd>Add New Employee</btnAdd>
None.gif        
<column1>Name</column1>
None.gif        
<column2>Department</column2>
None.gif        
<column3>Memo</column3>
None.gif        
<column4>Delete</column4>
None.gif        
<CurrentPage>Current Page</CurrentPage>
None.gif        
<TotelPage>Totel Page Count</TotelPage>
None.gif        
<TotelCount>Totel Record Count</TotelCount>
None.gif        
<FirstPage>First Page</FirstPage>
None.gif        
<PrevPage>Previous Page</PrevPage>
None.gif        
<NextPage>Next Page</NextPage>
None.gif        
<LastPage>Last Page</LastPage>
None.gif        
<add>
None.gif            
<NotNull>You must enter employee name!</NotNull>
None.gif            
<NameRepeat>Name is already exists,please input again!</NameRepeat>
None.gif            
<Save>Save</Save>
None.gif            
<Cancel>Cancel</Cancel>
None.gif            
<Title>Employee Information</Title>
None.gif            
<Name>Name</Name>
None.gif            
<Dept>Department</Dept>
None.gif            
<Memo>Memo</Memo>
None.gif        
</add>
None.gif        
<del>
None.gif            
<Text1>Do you confirm to delete </Text1>
None.gif            
<Text2> record?</Text2>
None.gif        
</del>
None.gif
</language>

 

2. 分页:

None.gif//JS中
None.gif
xslProcessor.addParameter("currentPage", currentPage);
None.gifxslProcessor.addParameter(
"totelPage", GetTotlePage());
None.gifxslProcessor.addParameter(
"totelEmployee", GetTotleEmplyee());
None.gifxslProcessor.addParameter(
"pageSize", pageSize);
None.gif
//定义要读取的Employee记录的范围
None.gif
xslProcessor.addParameter("startEmployee", (currentPage-1)*pageSize);
None.gifxslProcessor.addParameter(
"endEmployee", currentPage*pageSize);
None.gif
None.gif
//XSL中
None.gif
xsl中,只读取一定范围的节点(startEmployee<position()<=endEmployee):
None.gif
<xsl:for-each select="//employee[position()&gt;$startEmployee and position()&lt;=$endEmployee]">

 

3. 排序:

None.gif//JS中:
None.gif
xslProcessor.addParameter("order", order);//order是排序依据的列名
None.gif
xslProcessor.addParameter("scending", scending);//顺序还是倒序,做得很粗糙,尚待完善dot.gif.
None.gif
//XSL中
None.gif
<xsl:sort select="*[name()=$order]" order="{$scending}"/>
None.gif
//很多文章介绍说可以这样<xsl:sort select="$order" order="{$scending}"/>,但在我自己的机器上测试不行的说dot.gif

 

4. 增删查改:基本的XMLDOM操作,直接看代码吧...

ContractedBlock.gif数据文件

 

ContractedBlock.gifXSL文件

 

ContractedBlock.gifList.html

 

ContractedBlock.gifAdd.html

 

ContractedBlock.gifedit.html

源代码下载:http://files.cnblogs.com/happyhippy/XML.rar(打开list.html查看效果)
现实效果图:
添加(zh):
r_XSLT1.jpg
修改(en):
r_XSLT2.jpg
删除(zh):
r_XSLT3.jpg
删除(en):
r_XSLT4.jpg

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


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

网友评论

登录后评论
0/500
评论
吞吞吐吐的
+ 关注