marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90">
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
源代码下载:
http://www.cnblogs.com/Files/happyhippy/XML.rar
(打开list.html查看效果)
现实效果图:
添加(zh):
修改(en):
删除(zh):
删除(en):
5. 没弄过CSS,所以没有做界面美化...
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" οnclick="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="" οnclick="Save()" />
<input id="cancel" type="button" value="" οnclick="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="" οnclick="Save()" />
<input id="cancel" type="button" value="" οnclick="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>
源代码下载:
http://www.cnblogs.com/Files/happyhippy/XML.rar
(打开list.html查看效果)
现实效果图:
添加(zh):
修改(en):
删除(zh):
删除(en):
5. 没弄过CSS,所以没有做界面美化...