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

<iframe marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90"></iframe>
1.中英文切换：

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

复制XML代码保存代码

<!--langg传文件名：zh或en-->
<xsl:param name="langg"></xsl:param>
<xsl:variable name="languag" select="document($filename)/language/$langg"></xsl:variable>

<!--langg传文件名：zh或en--> <xsl:param name="langg"></xsl:param> <xsl:variable name="languag" select="document($filename)/language/$langg"></xsl:variable>

Language.XML

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

<?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传入所选择的语言的种类，来加载不同的语言所对应的配置文件：

复制XML代码保存代码

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

<!--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代码保存代码

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

<?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代码保存代码

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

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

复制JavaScript代码保存代码

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

复制XML代码保存代码

<xsl:for-each select="//employee[position()&gt;$startEmployee and position()&lt;=$endEmployee]">

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

3.排序：
JS中：

复制JavaScript代码保存代码

xslProcessor.addParameter("order", order);//order是排序依据的列名
xslProcessor.addParameter("scending", scending);//顺序还是倒序，做得很粗糙，尚待完善

XSL中

复制XML代码保存代码

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

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

//很多文章介绍说可以这样<xsl:sortselect="$order"order="{$scending}"/>，但在我自己的机器上测试不行的说


4.增删查改：基本的XMLDOM操作，直接看代码吧...
employee.xml

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

<?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代码保存代码

<?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()&gt;$startEmployee and position()&lt;=$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>

<?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代码保存代码

<html>
    <head>
        <title>Employee Information</title>
    </head>
    <body>
        <div>
            <button align="middle" id="btnAdd" onclick="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>

<html> <head> <title>Employee Information</title> </head> <body> <div> <button align="middle" id="btnAdd" onclick="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代码保存代码

<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="" onclick="Save()" />
        
    <input id="cancel" type="button" value="" onclick="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>

<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="" onclick="Save()" /> <input id="cancel" type="button" value="" onclick="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代码保存代码

<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="" onclick="Save()" />
        
    <input id="cancel" type="button" value="" onclick="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>

<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="" onclick="Save()" /> <input id="cancel" type="button" value="" onclick="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，所以没有做界面美化...