頁面中angularjs展示數據
<body ng-controller="multi">
<tbody>
<tr ng-repeat="item in defaultData " >
<td class='center hidden-480'>{{item.title}}</td>
</body>
</table>
</body>
外部jquery的ajax調用更新數據
<tr ng-repeat="item in defaultData " >
]]>
bean類
package table;
import java.util.Date;
public class ExtBean {
private String common;
private String light;
private float price; // automatic date conversions
private Date availDate;
private boolean indoor;
public ExtBean() {
}
public ExtBean(String common, String light, float price, Date availDate, boolean indoor) {
this.common = common;
this.light = light;
this.price = price;
this.availDate = availDate;
this.indoor = indoor;
}
public Date getAvailDate() {
return availDate;
}
public void setAvailDate(Date availDate) {
this.availDate = availDate;
}
public String getCommon() {
return common;
}
public void setCommon(String common) {
this.common = common;
}
public boolean isIndoor() {
return indoor;
}
public void setIndoor(boolean indoor) {
this.indoor = indoor;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
public String getLight() {
return light;
}
public void setLight(String light) {
this.light = light;
}
}
dwr處理類:
package table;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import org.apache.log4j.Logger;
public class ExtBeanModel {
private static Logger logger = Logger.getLogger(ExtBeanModel.class.getName());
public ExtBeanModel() {
// TODO Auto-generated constructor stub
}
public String save(List<ExtBean> extBeans) throws Exception{
logger.debug("start");
for(Iterator<ExtBean> it = extBeans.iterator(); it.hasNext();){
ExtBean extBean = it.next();
System.out.println(extBean.getCommon() + " "
+ extBean.getLight()+" "
+ extBean.getAvailDate()+ " " + extBean.getPrice() + " "
+ extBean.isIndoor());
}
return "ok";
}
public List<ExtBean> getExtBeans(){
List<ExtBean> extList = new ArrayList<ExtBean>();
ExtBean ext1 = new ExtBean("Erythronium","測試1",9.6F,new Date(),false);
ExtBean ext2 = new ExtBean("Erythronium2","測試2",9.6F,new Date(),true);
extList.add(ext1);
extList.add(ext2);
return extList;
}
}
dwr的配置文件dwr.xml
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="extModel">
<param name="class" value="table.ExtBeanModel" />
</create>
<convert match="table.ExtBean" converter="bean"></convert>
</allow>
<signatures>
<![CDATA[
import java.util.List;
import table.ExtBean;
import table.ExtBeanModel;
ExtBeanModel.save(List<ExtBean>);
]]>
</signatures>
</dwr>
jsp頁面:
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/interface/extModel.js'> </script>
<script>
//dwr回調方法 保存數據
function save(record){
var objArray = new Array();
//把ext的Record[]數組轉換成 js對象數組
for(ix = 0 ; ix < record.length;ix++){
var tmp = record[ix];
var obj={
common:tmp.get('common'),
light:tmp.get('light'),
price:tmp.get('price'),
availDate:tmp.get('availDate'),
inddor:tmp.get('inddor')
};
objArray[ix]=obj;
}
extModel.save(objArray,addItemCb);
}
function addItemCb(data)
{
if (data != null )
{
alert("ok");
}
else
{
alert("failure");
}
}
</script>
</head>
<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "名稱",
dataIndex: 'common',
width: 100,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "明亮度",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "價格",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "使用時間",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
}
]);
// by default columns are sortable
cm.defaultSortable = true;
// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var extBean = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);
// create the Data Store
var store = new Ext.data.JsonStore({
// load using HTTP
autoLoad:false,
fields: ['common', 'light', 'price', 'avaiDate','indoor'],
sortInfo:{field:'common', direction:'ASC'}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
clicksToEdit:1,
tbar: [{
text: '增加',
handler : function(){
var p = new extBean({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
},
{
//保存數據
text: '保存',
handler : function(){
//取得datasource對象 然后返回修改行的記錄對象Record[]數組
var record = grid.getStore().getModifiedRecords();
// : Ext.data.Record[]
save(record);
}
}]
});
extModel.getExtBeans(extBeanArray);
function extBeanArray(data){
for(var ix = 0; ix < data.length;ix++){
var tmp = data[ix];
var p = new extBean({
common: tmp.common,
light: tmp.light,
price: tmp.price,
availDate: tmp.availDate,
indoor: tmp.inddor
});
store.insert(ix, p);
}
}
store.load();
});
</script>
<select name="light" id="light" style="display: none;">
<option value="Shade測試">shade測試</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>
</body>
</html>
]]>
前兩個包用來創建xml文檔,后面幾個用來轉換到輸出流. 以下簡要說明用到的方法.然后貼出一個完整實例.
創建新文檔 ??????????? DocumentBuilderFactory factory = DocumentBuilderFactory.
???????????????????????????????????????????? newInstance();
??????????? DocumentBuilder builder = factory.newDocumentBuilder();
???????????
??????????? Document doc = builder.newDocument();
創建root元素?或其它元素????????????Element root = doc.createElement("selects");
創建根元素??????????????? doc.appendChild(root);? Element的appendChild()方法用來添加子元素
創建文本結點????????? doc.createTextNode(String textNode)
在servlet中 通過以下方法轉換到輸出流??????????? Transformer t = TransformerFactory.newInstance().newTransformer();??????????? t.transform(new DOMSource(doc),
??????????????????????? new StreamResult(response.getWriter()));
web.inf 文件配置一個servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee? <display-name>WebModule1</display-name>
? <servlet>
??? <servlet-name>selectservlet</servlet-name>
??? <servlet-class>drownmenu.SelectServlet</servlet-class>
? </servlet>
? <servlet-mapping>
??? <servlet-name>selectservlet</servlet-name>
??? <url-pattern>/selectservlet</url-pattern>
? </servlet-mapping>
</web-app>
jsp頁面
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
? <head>
??? <title>Ajax 聯動下拉框</title>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
??? <SCRIPT type="text/javascript">
??????? var req;
??????? window.onload=function(){
??????? }
??????? function Change_Select()
??????? {
??????????? var zhi=document.getElementById('state').value;
??????????? var url="selectservlet?id="+escape(zhi);
??????????? if(window.XMLHttpRequest)
??????????? {
??????????????? req=new XMLHttpRequest();
??????????? }else if(window.ActiveXObject)
??????????? {
??????????????? req=new ActiveXObject("Microsoft.XMLHTTP");
??????????? }
??????????? if(req)
??????????? {
??????????????? req.open("GET",url,true);
??????????????? req.onreadystatechange=callback;
??????????????? req.send(null);
??????????? }
??????? }
??????? function callback()
??????? {
??????????? if(req.readyState == 4)
??????????? {
??????????????? if(req.status == 200)
??????????????? {
??????????????????? parseMessage();
??????????????? }else{
??????????????????? alert("Not able to retrieve description"+req.statusText);
??????????????? }
??????????? }
??????? }
??????? function parseMessage()
??????? {
??????????? var xmlDoc=req.responseXML.documentElement;
??????????? var xSel=xmlDoc.getElementsByTagName('select');
??????????? var select_root=document.getElementById('city');
??????????? select_root.options.length=0;
??????????? for(var i=0;i<xSel.length;i++)
??????????? {
??????????????? var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
??????????????? var xText=xSel[i].childNodes[1].firstChild.nodeValue;
??????????????? var option=new Option(xText,xValue);
??????????????? try{
??????????????????? select_root.add(option);
??????????????? }catch(e){
??????????????? }
??????????? }
??????? }
??? </SCRIPT>
? </head>
? <body>
??? <div align="center">
??????? <form name="form1" method="post" action="">
??????????? <TABLE width="70%" boder="0" cellspacing="0">
??????????????? <TR>
??????????????????? <TD align="center">Ajax 聯動下拉框</TD>
??????????????? </TR>
??????????????? <TR>
??????????????????? <TD>請選擇省份:
??????????????????????? <SELECT name="state" id="state" onChange="Change_Select()">
??????????????????????????? <OPTION value="0">未選擇</OPTION>
??????????????????????????? <OPTION value="1">湖南</OPTION>
??????????????????????????? <OPTION value="2">湖北</OPTION>
??????????????????????? </SELECT>
??????????????????????? 請選擇城市:
??????????????????????? <SELECT name="city" id="city">
??????????????????????????? <OPTION value="0">未選擇</OPTION>
??????????????????????? </SELECT>
??????????????????? </TD>
??????????????? </TR>
??????????????? <TR><td> </td></TR>
??????????? </TABLE>
??????? </form>
??? </div>
? </body>
</html>
SelectServlet 類
package drownmenu;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import javax.xml.transform.*;
import javax.xml.transform.stream.*;
import javax.xml.transform.dom.*;
public class SelectServlet extends HttpServlet {
??? //Initialize global variables
??? public void init() throws ServletException {
??? }
??? //Process the HTTP Get request
??? public void doGet(HttpServletRequest request, HttpServletResponse response) throws
??????????? ServletException, IOException {
??????? String targetId = request.getParameter("id").toString();
??????? response.setCharacterEncoding("UTF-8");
??????? response.setContentType("application/xml");
??????? try {
??????????? DocumentBuilderFactory factory = DocumentBuilderFactory.
???????????????????????????????????????????? newInstance();
??????????? DocumentBuilder builder = factory.newDocumentBuilder();
???????????
??????????? Document doc = builder.newDocument();
?????????
??????????? Element root = doc.createElement("selects");
??????????? doc.appendChild(root);
??????????? /*
??????????????????????? String xml_start="<selects>";
??????????????????????? String xml_end="</selects>";
??????????????????????? String xml="";*/
??????????? if (targetId.equalsIgnoreCase("0")) {
??????????????? makeElement(doc, root, new String[] {"未選擇"});
??????????????? // xml =??? "<select><value>0</value><text>Unbounded</text></select>";
??????????? }
??????????? if (targetId.equalsIgnoreCase("1")) {
??????????????? makeElement(doc, root, new String[]? {"長沙","岳陽"});
??????????????? /* xml =
???????????????? "<select><value>1</value><text>Mana Burn</text></select>";
???????????????? xml +=
???????????????? "<select><value>2</value><text>Death Coil</text></select>";
???????????????? xml +=
???????????????? "<select><value>3</value><text>Unholy Aura</text></select>";
???????????????? xml +=
???????????????? "<select><value>4</value><text>Unholy Fire</text></select>";
???????????????? */
??????????? }
??????????? if (targetId.equalsIgnoreCase("2")) {
??????????????? makeElement(doc, root, new String[] {"武漢","石堰","襄樊","孝感"});
??????????????? /*
????????????????? xml =
???????????????? "<select><value>1</value><text>Corprxplode</text></select>";
????????????????? xml +=
???????????????? "<select><value>2</value><text>Raise Dead</text></select>";
????????????????? xml +=
???????????????? "<select><value>3</value><text>Brilliance Aura</text></select>";
????????????????? xml +=
???????????????? "<select><value>4</value><text>Aim Aura</text></select>";
???????????????? */
??????????? } //else {
?????????????
??????????????? /*
?????????????????? xml =
???????????????? "<select><value>1</value><text>Rain of Chaos</text></select>";
?????????????????? xml +=
???????????????? "<select><value>2</value><text>Finger of Death</text></select>";
???????????????? xml += "<select><value>3</value><text>Bash</text></select>";
?????????????????? xml +=
???????????????? "<select><value>4</value><text>Summon Doom</text></select>";
???????????????? */
???????? //?? }
??????
??????????? Transformer t = TransformerFactory.newInstance().newTransformer();
??????????? t.transform(new DOMSource(doc),
??????????????????????? new StreamResult(response.getWriter()));
??????? } catch (Exception ex) {
??????????? throw new ServletException(ex.toString());
??????? }
??????? // String last_xml = xml_start + xml + xml_end;
??????? // response.getWriter().write(last_xml);
??? }
??? private void makeElement(Document doc, Element root, String[] name) throws
??????????? DOMException {
??????? if (name == null) {
??????????? return;
??????? }
??????? for (int i = 0; i < name.length; i++) {
??????????? Element selectElement = doc.createElement("select");
??????????? root.appendChild(selectElement);
??????????? Element valueElement = doc.createElement("value");
??????????? Element textElement = doc.createElement("text");
??????????? int t=i+1;
??????????? Text valueText = doc.createTextNode(""+t);???????????
??????????? Text textText = doc.createTextNode(name[i]);
??????????? valueElement.appendChild(valueText);
??????????? textElement.appendChild(textText);
??????????? selectElement.appendChild(valueElement);
??????????? selectElement.appendChild(textElement);
???????????
??????? }
??? }
??? //Process the HTTP Post request
??? public void doPost(HttpServletRequest request, HttpServletResponse response) throws
??????????? ServletException, IOException {
??????? doGet(request, response);
??? }
??? //Clean up resources
??? public void destroy() {
??? }
}
歡迎加入QQ群:30406099?
]]>