JSON+AJAX+STRUTS2操作页面表格示例
2010-07-10 19:48
405 查看
主要使用脚本的对html页面进行动态更新
HTML页面
struts配置
action类
HTML页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>indexl.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">-->
</head>
<mce:script type="text/javascript"><!--
function ajax(No){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","orderAjax?tsNo="+No,true)
xmlhttp.onreadystatechange=function (){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var val=xmlhttp.responseText;
var json = eval("(" + val + ")");
select(val);
}
}
}
xmlhttp.send();
}
function select(val){
var json=eval("("+val+")");
$("orderNo").value=json.tsaleform.FSaleformNo;
$("date").value=json.tsaleform.FSaleformDate.toString().substr(0,10);
$("customer").value=json.tsaleform.FCustomer;
$("emp").value=json.tsaleform.FSales;
var arr=json.tsaleform.TSaleformDetails;
var tb=$("orderDetail");
for(var i=0;i<arr.length;i++){
var row=tb.insertRow(i+1);
row.insertCell(0).innerText="";
row.insertCell(1).innerHTML="<input type='text' value='"+arr[i].FGoods+"' />";
row.insertCell(2).innerHTML="<input type='text' value='"+arr[i].FQty+"' />";
row.insertCell(3).innerHTML="<input type='text' value='"+arr[i].FPrice+"' />";
row.insertCell(4).innerText=arr[i].FMoneyAmt;
row.insertCell(5).innerHTML="<img src="Images/addrow.gif" mce_src="Images/addrow.gif" onclick='addRow(this)' /> <img src="Images/delrow.gif" mce_src="Images/delrow.gif" onclick='delRow(this)' />";
}
orderByRow();
}
function $(id){
return document.getElementById(id);
}
function addRow(obj){
var tb=$("orderDetail");
var tr=obj.parentNode.parentNode;
var row=tb.insertRow(tr.rowIndex+1);
row.insertCell(0).innerText="";
row.insertCell(1).innerHTML="<input type='text' />";
row.insertCell(2).innerHTML="<input type='text' onpropertychange='cale(this)' />";
row.insertCell(3).innerHTML="<input type='text' onpropertychange='cale(this)'/>";
row.insertCell(4).innerText="";
row.insertCell(5).innerHTML="<img src="Images/addrow.gif" mce_src="Images/addrow.gif" onclick='addRow(this)' /> <img src="Images/delrow.gif" mce_src="Images/delrow.gif" onclick='delRow(this)' />";
orderByRow();
}
function delRow(obj){
if($("orderDetail").rows.length>2){
$("orderDetail").deleteRow(obj.parentNode.parentNode.rowIndex);
orderByRow();
}else{
alert("最后一行不能删除");
}
}
function orderByRow(){
var tb=$("orderDetail");
for(var i=1;i<tb.rows.length;i++){
tb.rows[i].cells[0].innerText=i;
}
}
function update(){
var orderNo=$("orderNo").value;
var date=$("date").value;
var customer=$("customer").value;
var emp=$("emp").value;
var order=orderNo+","+date+","+customer+","+emp;
var tb=$("orderDetail");
var detail="";
for(var i=1;i<tb.rows.length;i++){
if(tb.rows[i].cells[1].childNodes[0].value!=null){
var lineNo=tb.rows[i].cells[0].innerText;
var goodsName=tb.rows[i].cells[1].childNodes[0].value;
var number=tb.rows[i].cells[2].childNodes[0].value;
var price=tb.rows[i].cells[3].childNodes[0].value;
var amt=tb.rows[i].cells[4].innerText;
detail=lineNo+","+goodsName+","+number+","+price+","+amt+"|"+detail;
}
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("post","orderUpdate!updateOrder?order="+order+"&detail="+detail.substring(0,detail.length-1),true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function (){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var val=xmlhttp.responseText;
alert("提交成功");
}
}
}
xmlhttp.send(null);
}
function cale(obj){
var tr=obj.parentNode.parentNode;
var tb=$("orderDetail");
var count=tr.cells[2].childNodes[0].value;
var price=tr.cells[3].childNodes[0].value;
tr.cells[4].innerText=count*price;
}
function start(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","orderUpdate!selectOrderNo",true);
xmlhttp.onreadystatechange=function (){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var val=xmlhttp.responseText;
$("orderNo").value=val;
}
}
}
xmlhttp.send();
}
window.onload=act;
function act(){
var local=location.href;
var str=local.substr(local.indexOf("?")+1);
var arr=str.split("&");
var par=arr[0].substring(arr[0].indexOf("=")+1);
if(par.toLowerCase()=="edit"){
var par2=arr[1].substring(arr[1].indexOf("=")+1);
ajax(par2);
}
if(par.toLowerCase()=="add"){
start();
}
}
// --></mce:script>
<mce:style type="text/css"><!--
table
{
border:1px;
border-collapse: collapse;
}
--></mce:style><style type="text/css" mce_bogus="1"> table
{
border:1px;
border-collapse: collapse;
}
</style>
<body>
<input type="button" onclick="ajax()" value="提交" />
<input type="button" onclick="act()" value="提交" />
<div style="margin-left:100px" mce_style="margin-left:100px">
<table width="800px" border="1px" id="order">
<tr>
<th colspan="4" align="center" >销售出货单</th>
</tr>
<tr>
<td>
单号：
</td>
<td>
<input type="text" id="orderNo" readonly="readonly"/>
</td>
<td>
日期：
</td>
<td>
<input type="text" id="date"/>
</td>
</tr>
<tr>
<td>
客户：
</td>
<td>
<input type="text" id="customer"/>
</td>
<td>
业务员：
</td>
<td>
<input type="text" id="emp"/>
</td>
</tr>
<tr>
<td>明细</td>
<td>备注</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="4" height="100px" align="center" >
<table border="1px" colspan="0" rowspan="0" id="orderDetail">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>金额</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" onpropertychange="cale(this)" />
</td>
<td>
<input type="text" onpropertychange="cale(this)"/>
</td>
<td>
</td>
<td>
<img src="Images/addrow.gif" mce_src="Images/addrow.gif" onclick="addRow(this)" />
<img src="Images/delrow.gif" mce_src="Images/delrow.gif" onclick="delRow(this)" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" align="right">
<input type="button" value="保存" onclick="update()"/>
<input type="button" value="关闭"/>
</td>
</tr>
</table>
</div>
</body>
</html>struts配置
<package name="order" extends="struts-default" namespace="/"> <action name="order" class="OrderAction"> <result name="success">/index.jsp</result> </action> </package> <package name="orderAjax" extends="json-default"> <action name="orderAjax" class="OrderAction"> <result type="json"></result> </action> <action name="orderUpdate" class="OrderAction"> <result></result> </action> </package>
action类
package org.qyl.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.HashSet;
import java.util.Set;
import java.util.logging.SimpleFormatter;
import org.apache.struts2.ServletActionContext;
import org.qyl.pojo.TSaleform;
import org.qyl.pojo.TSaleformDetail;
import org.qyl.pojo.TSaleformDetailId;
import org.qyl.service.IOrderService;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class OrderAction extends ActionSupport {
private IOrderService iorderService;
public void setIorderService(IOrderService iorderService) {
this.iorderService = iorderService;
}
//请求参数
private String tsNo;
public String getTsNo() {
return tsNo;
}
public void setTsNo(String tsNo) {
this.tsNo = tsNo;
}
private TSaleform tsaleform;
public TSaleform getTsaleform() {
return tsaleform;
}
public void setTsaleform(TSaleform tsaleform) {
this.tsaleform = tsaleform;
}
public String execute(){
try {
tsaleform=iorderService.selectById(tsNo);
ActionContext.getContext().getSession().put("tsaleform", tsaleform);
return SUCCESS;
} catch (Exception e) {
e.printStackTrace();
return ERROR;
}
}
//JSON串化属性
private String order;
//JSON串化属性
private String detail;
public String getOrder() {
return order;
}
public void setOrder(String order) {
this.order = order;
}
public String getDetail() {
return detail;
}
public void setDetail(String detail) {
this.detail = detail;
}
//更新方法
@SuppressWarnings("unchecked")
public String updateOrder() throws Exception{
System.out.println(detail);
String [] orders=order.split(",");
TSaleform ts=new TSaleform();
ts.setFSaleformNo(orders[0]);
SimpleDateFormat formate=new SimpleDateFormat("yyyy-MM-dd");
long time=formate.parse(orders[1]).getTime();
Timestamp date=new Timestamp(time);
ts.setFSaleformDate(date);
ts.setFCustomer(orders[2]);
ts.setFSales(orders[3]);
String [] details={detail.substring(0,detail.indexOf("|")),detail.substring(detail.indexOf("|")+1)};
Set dets=new HashSet();
for(String str : details){
String [] det=str.split(",");
TSaleformDetailId tsdid=new TSaleformDetailId();
tsdid.setFLineId(Short.parseShort(det[0]));
tsdid.setTSaleform(ts);
TSaleformDetail tsd=new TSaleformDetail();
tsd.setId(tsdid);
tsd.setFGoods(det[1]);
tsd.setFQty(Double.parseDouble(det[2]));
tsd.setFPrice(Double.parseDouble(det[3]));
tsd.setFMoneyAmt(Double.parseDouble(det[4]));
dets.add(tsd);
}
ts.setTSaleformDetails(dets);
iorderService.updateDetail(ts);
PrintWriter out=ServletActionContext.getResponse().getWriter();
out.print("提交成功");
return null;
}
public String selectOrderNo() throws Exception{
PrintWriter out=ServletActionContext.getResponse().getWriter();
out.print(iorderService.selectOrderNo());
return null;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- struts2使用ajax实现页面和action之间通过json数据交互
- Struts2引用的jar包版本为2.0.9的，该版本没有json包，如何使用ajax返回json数据到页面
- 表单和表格序列化demo struts2 json（Gson） response.getWriter.write() ajax
- 使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；
- struts2跟easyui 示例一 后台生成json数据传到前台html页面
- Struts2-jquery-操作ajax返回json数据
- Struts2 Ajax---Action传值到JSP页面 Json格式
- jquery-->ajax-->struts2-->json页面显示
- jQuery基于ajax操作json数据简单示例
- Struts2中操作JSON
- JS实现json对象数组按对象属性排序操作示例
- Play framework后台处理页面传过来的AJAX-JSON数据并给出响应
- Struts2之ajax初析--struts2返回json数据
- javaWeb页面中Ajax原始调用方法，及数据转换成Json的原始方法总结
- 用Ajax解析JSON串，页面无刷新实时监控后台数据
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理
- javascript操作表格 示例源码
- dwz框架的table，页面初始化用ajax获取并设置表格内容后，表格没有点击事件等。
- jExcelAPI(jxl)操作Excel2003表格完整示例 - 两种方案 - 效率截然不同
- ajax与struts2操作