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

于 2007-08-04 17:52:00 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： XML ASP.NET JavaScript 文章标签： xsl xml javascript function encoding stylesheet
ASP.NET 同时被 3 个专栏收录
224 篇文章 0 订阅
订阅专栏
JavaScript
134 篇文章 0 订阅
订阅专栏
XML
21 篇文章 0 订阅
订阅专栏
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节点，我最原始的思路： 

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

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):
单击在新窗口中打开图片，Ctrl+滚轮缩放图片

修改(en):
单击在新窗口中打开图片，Ctrl+滚轮缩放图片

删除(zh):
单击在新窗口中打开图片，Ctrl+滚轮缩放图片

删除(en):
单击在新窗口中打开图片，Ctrl+滚轮缩放图片


5. 没弄过CSS，所以没有做界面美化...  
jxufewbt
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值