论坛首页 → Web前端技术论坛 →

XML数据岛应用--选择多个用户ID简单实现

浏览 2621 次
锁定老帖子 主题：XML数据岛应用--选择多个用户ID简单实现
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • ye_jinghua
  • 等级: 初级会员
  • 性别:
  • 文章: 14
  • 积分: 50
  • 来自: 北京
   发表时间：2007-08-11  
在页面上选择多个用户ID用 XML+javascript 简单实现
首先生成用户信息的XML文件,生成代码如下:
java 代码
  1.   
  2. import org.w3c.dom.*;   
  3. import javax.xml.parsers.*;   
  4. import javax.xml.transform.*;   
  5. import javax.xml.transform.dom.DOMSource;   
  6. import javax.xml.transform.stream.StreamResult;   
  7. import java.io.*;   
  8. public class Test {   
  9. private Document document;   
  10. private String filename;   
  11.   
  12. public Test(String name) throws ParserConfigurationException{   
  13. filename=name;   
  14. DocumentBuilderFactory factory=DocumentBuilderFactory.newInstance();   
  15. DocumentBuilder builder=factory.newDocumentBuilder();   
  16. document=builder.newDocument();   
  17. }   
  18. public void toWrite(Element root,String textuserName,String textcnName,String userId){   
  19. Element User=document.createElement("User");   
  20. root.appendChild(User);   
  21. Element userid=document.createElement("userid");   
  22. userid.appendChild(document.createTextNode(userId));   
  23. User.appendChild(userid);   
  24. Element userName=document.createElement("userName");   
  25. userName.appendChild(document.createTextNode(textuserName));   
  26. User.appendChild(userName);   
  27. Element cnName=document.createElement("cnName");   
  28. cnName.appendChild(document.createTextNode(textcnName));   
  29. User.appendChild(cnName);   
  30. }   
  31. public void toSave(){   
  32. try{   
  33. TransformerFactory tf=TransformerFactory.newInstance();   
  34. Transformer transformer=tf.newTransformer();   
  35. DOMSource source=new DOMSource(document);   
  36. transformer.setOutputProperty(OutputKeys.ENCODING,"GB2312");   
  37. transformer.setOutputProperty(OutputKeys.INDENT,"yes");   
  38. PrintWriter pw=new PrintWriter(new FileOutputStream(filename));   
  39. StreamResult result=new StreamResult(pw);   
  40. transformer.transform(source,result);   
  41. }   
  42. catch(TransformerException mye){   
  43. mye.printStackTrace();   
  44. }   
  45. catch(IOException exp){   
  46. exp.printStackTrace();   
  47. }   
  48. }   
  49. public static void main(String args[]){   
  50. try{   
  51. /**  在WEB中得到绝对路径
  52. String FilePath=this.getClass().getClassLoader().getResource("").getPath();  
  53.                            FilePath=FilePath.substring(1,FilePath.length()-17)+"/webpage/keepWatch/";//获取根目录绝对路径  
  54.                            FilePath=FilePath.replaceAll("%20", " ")+"users.xml";  
  55.                         CreateUserXML myxml=new CreateUserXML(FilePath);  
  56. */  
  57. Test myxml=new Test("E:\\users.xml");   
  58. Element root=myxml.document.createElement("Users");   
  59. myxml.document.appendChild(root);   
  60. myxml.toWrite(root,"admin","管理员","001");   
  61. myxml.toWrite(root,"yjh","叶先生","002");   
  62. myxml.toWrite(root,"yjw","杨先生","003");   
  63. myxml.toSave();   
  64. System.out.print("Your writing is successful.");   
  65. }   
  66. catch(ParserConfigurationException exp){   
  67. exp.printStackTrace();   
  68. System.out.print("Your writing is failed.");   
  69. }    
  70. }   
  71. }  
HTML中引用的xml 代码

 

  1. <?xml version="1.0" encoding="GB2312"?>  
  2. <Users>  
  3.     <User>  
  4.         <userid>647</userid>  
  5.         <userName>小李</userName>  
  6.         <cnName>小李</cnName>  
  7.     </User>  
  8.     <User>  
  9.         <userid>1</userid>  
  10.         <userName>admin</userName>  
  11.         <cnName>管理员</cnName>  
  12.     </User>  
  13.     <User>  
  14.         <userid>2</userid>  
  15.         <userName>qq</userName>  
  16.         <cnName>QQ</cnName>  
  17.     </User>  
  18.     <User>  
  19.         <userid>4</userid>  
  20.         <userName>sun</userName>  
  21.         <cnName>SUN</cnName>  
  22.     </User>  
  23.     <User>  
  24.         <userid>6</userid>  
  25.         <userName>small</userName>  
  26.         <cnName>SMALL</cnName>  
  27.     </User>  
  28.     <User>  
  29.         <userid>1745</userid>  
  30.         <userName>王处长</userName>  
  31.         <cnName>王天龙</cnName>  
  32.     </User>  
  33.     <User>  
  34.         <userid>648</userid>  
  35.         <userName>小王</userName>  
  36.         <cnName>小王</cnName>  
  37.     </User>  
  38. </Users>  

选择多用户的HTML页代码：

HTML代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>选择XML数据</title>  
  5. </head>  
  6. <script language="JavaScript1.2">  
  7.        
  8.     if (document.layers) {n=1;ie=0}   
  9.     if (document.all) {n=0;ie=1}   
  10.     var objElement;   
  11.     function init() {   
  12.        
  13.             if (n) poptext = document.poptextDiv   
  14.             if (ie) poptext = poptextDiv.style   
  15.                
  16.     }   
  17.     //Hide-Show Layer   
  18.     function hidepoptext(e) {   
  19.         objElement=e;   
  20.         var ttop = objElement.offsetTop;    //TT控件的定位点高   
  21.         var thei = objElement.clientHeight; //TT控件本身的高   
  22.         var tleft = objElement.offsetLeft;  //TT控件的定位点宽   
  23.         hidepopcolse();   
  24.         var obj = document.getElementById("poptextDiv");   
  25.         obj.style.left  =tleft;   
  26.         obj.style.top=ttop+thei+6;   
  27.         if (n) {   
  28.             poptext.visibility = "show";   
  29.                }   
  30.         if (ie) {   
  31.             poptext.visibility = "visible";   
  32.             }            
  33.     var selectUser=document.getElementsByName("selectUser");       
  34.                 for (var i = 0; i < selectUser.length; i++)    
  35.                 {    
  36.                         if(selectUser[i].checked)selectUser[i].checked=false;   
  37.                 }   
  38.     }   
  39.     function hidepopcolse(){   
  40.                 if (n) {   
  41.                     poptext.visibility = "hide";   
  42.                     return;   
  43.                 }              
  44.                 if (ie) {   
  45.                     poptext.visibility = "hidden";   
  46.                     return;   
  47.                }   
  48.         }   
  49.     function selectUsers(element){    
  50.                 var selectUser=document.getElementsByName("selectUser");   
  51.                 var userId=document.getElementsByName("userId");   
  52.                 var userName=document.getElementsByName("userName");   
  53.                 var cnName=document.getElementsByName("cnName");   
  54.                 var values="";   
  55.                 if(objElement.value=="")objElement.value==",";   
  56.                     for (var i = 0; i < selectUser.length; i++)    
  57.                     {    
  58.                             if(selectUser[i].checked)values+=userName[i].value+",";   
  59.                     }objElementobjElement.value=objElement.value+values;   
  60.                     hidepopcolse();   
  61.         }    
  62.   
  63. </script>  
  64. <body onLoad="init()">  
  65. <xml id= "island" src= "users.xml" ></xml>  
  66. <input type="text" id="userId1" name="userId1" onClick="hidepoptext(this)">  
  67. <input type="text" id="userId2" name="userId2" onClick="hidepoptext(this)">  
  68. <input type="text" id="userId3" name="userId3" onClick="hidepoptext(this)">  
  69.   
  70.       <div id="poptextDiv"  align= "center" style="visibility:hidden;position:absolute;border:1px solid #000000;z-index:1;background:#eeeeee">  
  71.       <table width="200" border="0">  
  72.         <tr>  
  73.           <td><table id="userTable" DATAPAGESIZE="10" width= "264" height="67" align="center" datasrc= "#island"  >  
  74.     <thead>  
  75.       <tr>  
  76.         <th width="52" bordercolor="#CCCCCC" bgcolor="#CCCCCC"> 选择 </th>  
  77.         <th width="68" bordercolor="#CCCCCC" bgcolor="#CCCCCC"> ID </th>  
  78.         <th width="68" bordercolor="#CCCCCC" bgcolor="#CCCCCC"> 姓名 </th>  
  79.       </tr>  
  80.     </thead>  
  81.     <tbody>  
  82.       <tr>  
  83.         <td align= "center" bordercolor="#FFFFCC" >  
  84.         <input type="checkbox" id="selectUser" name="selectUser" >  
  85.           <input type="hidden" id="userId" name="userId" datafld= "userid" >  
  86.           <input type="hidden" id="userName"name="userName" datafld= "userName" >  
  87.           <input type="hidden" id="cnName"name="cnName" datafld= "cnName" >  
  88.         </td>  
  89.         <td align= "center" bordercolor="#FFFFCC" ><span datafld= "userName" ></span></td>  
  90.         <td align= "center" bordercolor="#FFFFCC" ><span datafld= "cnName" ></span></td>  
  91.       </tr>  
  92.     </tbody>  
  93.   
  94. </table>  
  95. <table align= "center">  
  96.  <tr>  
  97.         <th align= "center"><a onClick="document.all.userTable.previousPage()">上一页</a>  
  98. <a onClick="document.all.userTable.nextPage()">下一页</a> </th>  
  99.   </tr>  
  100. </table></td>  
  101.         </tr>  
  102.      <tr>  
  103.         <th align= "center"><input type="button" value="确定" onClick="selectUsers()" ><input type="button" value="关闭" onClick="hidepopcolse()" ></th>  
  104.   </tr>  
  105. </table></td>  
  106.         </tr>  
  107.       </table>  
  108. </div>     
  109. </body>  
  110. </html>  
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics