js 通用訂單代碼

js 通用訂單代碼

 對於訂單，想必大家並不陌生吧，下為大家介紹下使用js實現的訂單，感興趣的朋友可以參考下 

代碼如下:

<%@ 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>查詢系統</title> 

<link rel="stylesheet" type="text/css" 

href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 

<link rel="stylesheet" type="text/css" 

href="http://www.jeasyui.com/easyui/themes/icon.css"> 

<link rel="stylesheet" type="text/css" 

href="http://www.jeasyui.com/easyui/demo/demo.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="預訂裝修管理" 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">連絡方式</th> 

<th field="name" width="20">連絡人</th> 

<th field="nametype" width="30">裝修名稱</th> 

<th field="orderTime" width="50">預訂時間</th> 

<th field="content" width="50">備忘內容</th> 

<th field="sex" width="20">性別</th> 

<th field="nowTime" width="50">提交時間</th> 

<!-- <th field="status" width="10">狀態</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' : '操作確認提示', 

'message' : '您確認要進行此成交操作?', 

'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('操作提示', 

'您確定要刪除此條訂單?', 

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>