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

在页面上选择多个用户ID用 XML+javascript 简单实现

首先生成用户信息的XML文件,生成代码如下:

java 代码

import org.w3c.dom.*;
import javax.xml.parsers.*;
import javax.xml.transform.*;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;
public class Test {
private Document document;
private String filename;
public Test(String name) throws ParserConfigurationException{
filename=name;
DocumentBuilderFactory factory=DocumentBuilderFactory.newInstance();
DocumentBuilder builder=factory.newDocumentBuilder();
document=builder.newDocument();
}
public void toWrite(Element root,String textuserName,String textcnName,String userId){
Element User=document.createElement("User");
root.appendChild(User);
Element userid=document.createElement("userid");
userid.appendChild(document.createTextNode(userId));
User.appendChild(userid);
Element userName=document.createElement("userName");
userName.appendChild(document.createTextNode(textuserName));
User.appendChild(userName);
Element cnName=document.createElement("cnName");
cnName.appendChild(document.createTextNode(textcnName));
User.appendChild(cnName);
}
public void toSave(){
try{
TransformerFactory tf=TransformerFactory.newInstance();
Transformer transformer=tf.newTransformer();
DOMSource source=new DOMSource(document);
transformer.setOutputProperty(OutputKeys.ENCODING,"GB2312");
transformer.setOutputProperty(OutputKeys.INDENT,"yes");
PrintWriter pw=new PrintWriter(new FileOutputStream(filename));
StreamResult result=new StreamResult(pw);
transformer.transform(source,result);
}
catch(TransformerException mye){
mye.printStackTrace();
}
catch(IOException exp){
exp.printStackTrace();
}
}
public static void main(String args[]){
try{
/** 在WEB中得到绝对路径
String FilePath=this.getClass().getClassLoader().getResource("").getPath();
FilePath=FilePath.substring(1,FilePath.length()-17)+"/webpage/keepWatch/";//获取根目录绝对路径
FilePath=FilePath.replaceAll("%20", " ")+"users.xml";
CreateUserXML myxml=new CreateUserXML(FilePath);
*/
Test myxml=new Test("E:\\users.xml");
Element root=myxml.document.createElement("Users");
myxml.document.appendChild(root);
myxml.toWrite(root,"admin","管理员","001");
myxml.toWrite(root,"yjh","叶先生","002");
myxml.toWrite(root,"yjw","杨先生","003");
myxml.toSave();
System.out.print("Your writing is successful.");
}
catch(ParserConfigurationException exp){
exp.printStackTrace();
System.out.print("Your writing is failed.");
}
}
}

HTML中引用的xml 代码

<?xml version="1.0" encoding="GB2312"?>
<Users>
<User>
<userid>647</userid>
<userName>小李</userName>
<cnName>小李</cnName>
</User>
<User>
<userid>1</userid>
<userName>admin</userName>
<cnName>管理员</cnName>
</User>
<User>
<userid>2</userid>
<userName>qq</userName>
<cnName>QQ</cnName>
</User>
<User>
<userid>4</userid>
<userName>sun</userName>
<cnName>SUN</cnName>
</User>
<User>
<userid>6</userid>
<userName>small</userName>
<cnName>SMALL</cnName>
</User>
<User>
<userid>1745</userid>
<userName>王处长</userName>
<cnName>王天龙</cnName>
</User>
<User>
<userid>648</userid>
<userName>小王</userName>
<cnName>小王</cnName>
</User>
</Users>

选择多用户的HTML页代码：

HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择XML数据</title>
</head>
<script language="JavaScript1.2">
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
var objElement;
function init() {
if (n) poptext = document.poptextDiv
if (ie) poptext = poptextDiv.style
}
//Hide-Show Layer
function hidepoptext(e) {
objElement=e;
var ttop = objElement.offsetTop; //TT控件的定位点高
var thei = objElement.clientHeight; //TT控件本身的高
var tleft = objElement.offsetLeft; //TT控件的定位点宽
hidepopcolse();
var obj = document.getElementById("poptextDiv");
obj.style.left =tleft;
obj.style.top=ttop+thei+6;
if (n) {
poptext.visibility = "show";
}
if (ie) {
poptext.visibility = "visible";
}
var selectUser=document.getElementsByName("selectUser");
for (var i = 0; i < selectUser.length; i++)
{
if(selectUser[i].checked)selectUser[i].checked=false;
}
}
function hidepopcolse(){
if (n) {
poptext.visibility = "hide";
return;
}
if (ie) {
poptext.visibility = "hidden";
return;
}
}
function selectUsers(element){
var selectUser=document.getElementsByName("selectUser");
var userId=document.getElementsByName("userId");
var userName=document.getElementsByName("userName");
var cnName=document.getElementsByName("cnName");
var values="";
if(objElement.value=="")objElement.value==",";
for (var i = 0; i < selectUser.length; i++)
{
if(selectUser[i].checked)values+=userName[i].value+",";
}objElementobjElement.value=objElement.value+values;
hidepopcolse();
}
</script>
<body onLoad="init()">
<xml id= "island" src= "users.xml" ></xml>
<input type="text" id="userId1" name="userId1" onClick="hidepoptext(this)">
<input type="text" id="userId2" name="userId2" onClick="hidepoptext(this)">
<input type="text" id="userId3" name="userId3" onClick="hidepoptext(this)">
<div id="poptextDiv" align= "center" style="visibility:hidden;position:absolute;border:1px solid #000000;z-index:1;background:#eeeeee">
<table width="200" border="0">
<tr>
<td><table id="userTable" DATAPAGESIZE="10" width= "264" height="67" align="center" datasrc= "#island" >
<thead>
<tr>
<th width="52" bordercolor="#CCCCCC" bgcolor="#CCCCCC"> 选择 </th>
<th width="68" bordercolor="#CCCCCC" bgcolor="#CCCCCC"> ID </th>
<th width="68" bordercolor="#CCCCCC" bgcolor="#CCCCCC"> 姓名 </th>
</tr>
</thead>
<tbody>
<tr>
<td align= "center" bordercolor="#FFFFCC" >
<input type="checkbox" id="selectUser" name="selectUser" >
<input type="hidden" id="userId" name="userId" datafld= "userid" >
<input type="hidden" id="userName"name="userName" datafld= "userName" >
<input type="hidden" id="cnName"name="cnName" datafld= "cnName" >
</td>
<td align= "center" bordercolor="#FFFFCC" ><span datafld= "userName" ></span></td>
<td align= "center" bordercolor="#FFFFCC" ><span datafld= "cnName" ></span></td>
</tr>
</tbody>
</table>
<table align= "center">
<tr>
<th align= "center"><a onClick="document.all.userTable.previousPage()">上一页</a>
<a onClick="document.all.userTable.nextPage()">下一页</a> </th>
</tr>
</table></td>
</tr>
<tr>
<th align= "center"><input type="button" value="确定" onClick="selectUsers()" ><input type="button" value="关闭" onClick="hidepopcolse()" ></th>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>