js 通用訂單代碼

更新時(shí)間：2013年12月23日 17:31:40 作者：

對(duì)于訂單，想必大家并不陌生吧，下為大家介紹下使用js實(shí)現(xiàn)的訂單，感興趣的朋友可以參考下

 
<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme() + "://" 
+ request.getServerName() + ":" + request.getServerPort() 
+ path + "/"; 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>查詢系統(tǒng)</title> 
<link rel="stylesheet" type="text/css" 
> 
<link rel="stylesheet" type="text/css" 
> 
<link rel="stylesheet" type="text/css" 
> 
<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.6.min.js"></script> 
<script type="text/javascript" 
src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" 
src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script> 
<script src="<%=basePath %>js/jquery.confirm.js"></script> 
<link rel="stylesheet" href="<%=basePath %>css/jquery.confirm.css"> 

<style type="text/css"> 
form { 
margin: 0; 
padding: 0; 
} 

.dv-table td { 
border: 0; 
} 

.dv-table input { 
border: 1px solid #ccc; 
} 
</style> 
</head> 
<body> 
<table id="dg" title="預(yù)訂裝修管理" class="easyui-datagrid" 
style="width: 1200px; height: 590px" url="<%=basePath%>findSubsByPage.action" 
toolbar="#toolbar" pagination="true" rownumbers="true" 
fitColumns="true" singleSelect="true"> 
<thead> 
<tr> 
<th field="tel" width="40">聯(lián)系方式</th> 
<th field="name" width="20">聯(lián)系人</th> 
<th field="nametype" width="30">裝修名稱</th> 
<th field="orderTime" width="50">預(yù)訂時(shí)間</th> 
<th field="content" width="50">備注內(nèi)容</th> 
<th field="sex" width="20">性別</th> 
<th field="nowTime" width="50">提交時(shí)間</th> 
<!-- <th field="status" width="10">狀態(tài)</th> --> 

</tr> 
</thead> 
</table> 
<div id="toolbar"> 
<div id="toolbar"> 
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">刪除訂單</a> 
<a href="javascript:void(0)" class="easyui-linkbutton" id="unorder">未成交訂單</a> <a 
href="javascript:void(0)" class="easyui-linkbutton" id="order">已成交訂單</a> <a href="javascript:void(0)" 
class="easyui-linkbutton" id="ok">成交</a> 
</div> 
</div> 
<table> 
<tr> 
<td colspan="1"></td> 
</tr> 
</table> 
<script type="text/javascript"> 
$(function() { 
$("#unorder").click(function() { 
var url = "../findSubsByPage.action"; 
$.post(url, { 
status : 0 
}, function() { 
$('#dg').datagrid('reload'); 
}); 
}); 
$("#order").click(function() { 
var url = "../findSubsByPage.action"; 
$.post(url, { 
status : 1 
}, function() { 
$('#dg').datagrid('reload'); 
}); 
}); 
$("#ok").click(function() { 
var url = "../updateSub.action"; 
var row = $('#dg').datagrid('getSelected'); 
var elem = $(this).closest('.item'); 
if (row != null) { 
$.confirm({ 
'title' : '操作確認(rèn)提示', 
'message' : '您確認(rèn)要進(jìn)行此成交操作?', 
'buttons' : { 
'Yes' : { 
'class' : 'blue', 
'action' : function() { 
elem.slideUp(); 
$.post(url, { 
id : row.id 
}, function() { 
$('#dg').datagrid('reload'); 
}); 
} 
}, 
'No' : { 
'class' : 'gray', 
'action' : function() { 

} 
} 
} 
}); 
} else { 
alert("您未選中任何信息!"); 
} 
}); 
setInterval(function() { 
$('#dg').datagrid('reload'); 
}, 60000); 
}); 
function destroyUser() { 
var row = $('#dg').datagrid('getSelected'); 
if (row) { 
$.messager.confirm('操作提示', 
'您確定要?jiǎng)h除此條訂單?', 
function(r) { 
if (r) { 
$.post('../deleteSub.action', { 
id : row.id 
}, function(result) { 
if (result.success) { 
$('#dg').datagrid('reload'); // reload the user data 
} else { 
$.messager.show({ // show error message 
title : 'Error', 
msg : result.errorMsg 
}); 
} 
}, 'json'); 
} 
}); 
} 
} 
</script> 
<script language="JavaScript"> 
function myrefresh() 
{ 
window.location.reload(); 
} 
setTimeout('myrefresh()',3000000); //指定5秒刷新一次 
</script> 
<style type="text/css"> 
#fm { 
margin: 0; 
padding: 10px 30px; 
} 

.ftitle { 
font-size: 14px; 
font-weight: bold; 
padding: 5px 0; 
margin-bottom: 10px; 
border-bottom: 1px solid #ccc; 
} 

.fitem { 
margin-bottom: 5px; 
} 

.fitem label { 
display: inline-block; 
width: 80px; 
} 
</style> 
</body> 
</html> 