美高梅网址:通用订单代码
分类:关于美高梅

复制代码 代码如下:

Application(basic)----Easyui,basic----easyui

一,效果图。

美高梅网址 1

美高梅网址 2

美高梅网址 3

 

二,源代码。

 

<!DOCTYPE html>
<html>
<head>
美高梅网址,<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href=";
<link rel="stylesheet" type="text/css" href=";
<link rel="stylesheet" type="text/css" href=";
<link rel="stylesheet" type="text/css" href=";
<script type="text/javascript" src=";
<script type="text/javascript" src=";
</head>
<body>
<h2>Basic CRUD Application</h2>
<p>Click the buttons on datagrid toolbar to do crud actions.</p>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url=""
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone" class="easyui-textbox">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-textbox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = '';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = ';
alert(row.id);
}
}
function saveUser(){
alert('1');
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){

alert(result);

var result = eval('('+result+')');

if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
},
error:function(index){
alert(index);
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</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;
}
.fitem input{
width:160px;
}
</style>
</body>
</html>

一,效果图。 二,源代码。 !DOCTYPE html html head meta charset="UTF-8" titleBasic CRUD Application - jQuery EasyUI CR...

<%@ 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" ";
    <html>
    <head>
    <title>查询系统</title>
    <link rel="stylesheet" type="text/css"
    href=";
    <link rel="stylesheet" type="text/css"
    href=";
    <link rel="stylesheet" type="text/css"
    href=";
    <script type="text/javascript"
    src=";
    <script type="text/javascript"
    src=";
    <script type="text/javascript"
    src=";
    <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>

您可能感兴趣的文章:

  • JavaScript订单操作小程序完整版

本文由美高梅网址发布于关于美高梅,转载请注明出处:美高梅网址:通用订单代码

上一篇:JS动态添加与删除select中的Option对象 下一篇:没有了
猜你喜欢
热门排行
精彩图文