深圳博客技术论坛 » 【编程讨论学习】 » 『Javascript/Ajax技术』 » JS+XMLDOM+XSL：实现中英文界面切换、排序、分页显示、增删改查XML文件数据源

1/1页1 跳转到页查看:2845

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

本主题由管理员 winson 于 2008-2-23 21:49:53 执行主题分类操作

winson

winson

组别:管理员
性别:
积分:968
帖子:762

2007-12-11 13:22 | 只看楼主 树型| 收藏| 小中大 1^#

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

【转自happyhippy】

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节点，我最原始的思路：

<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中，只读取一定范围的节点(startEmployee<position()<=endEmployee)：

<xsl

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

</employee>

</employee>

</employee>

</employee>

</employee>

</employee>

</employee>

</employee>

</employees>

employee.xsl

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

<xsl:stylesheet xmlns

sl="http://www.w3.org/1999/XSL/Transform";

xmlns:msxsl="urn:schemas-microsoft-com

slt"

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="/">

<tbody>

</tr>

<xsl

or-each select="//employee[position()>$startEmployee and position()<=$endEmployee]">

<xsl:sort select="*[name()=$order]" order="{$scending}"/>

<xsl:variable name="name" select="name"></xsl:variable>

<td><a href="javascript

elEmployee('{$name}')"><xsl:value-of select="$languag/column4"/></a></td>

</tr>

</xsl

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

therwise>

<a href="javascript

irstPage()"><xsl:value-of select="$languag/FirstPage"/></a> | <a href="javascript:prevPage()"><xsl:value-of select="$languag/PrevPage"/></a> |

</xsl

therwise>

</xsl:choose>

<xsl:choose>

<xsl:when test="$currentPage=$totelPage">

<xsl:value-of select="$languag/NextPage"/> | <xsl:value-of select="$languag/LastPage"/>

</xsl:when>

<xsl

therwise>

</xsl

therwise>

</xsl:choose>

</xsl:template>

</xsl:stylesheet>

list.html

<html>

<head>

<title>Employee Information</title>

</head>

<body>

<div>

<a href="javascript:languageChange('zh')">中文版</a>|<a href="javascript:languageChange('en')">English Version</a>

</div>

</div>

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