easyui增删改查
2015-11-20 15:29
627 查看
1.html页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="novatar" uri="/novatar-tags"%><%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<novatar:head title="workDate.name"></novatar:head>
<novatar:easyui />
<link href="${styles}/workDate.css?v=${version}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${scripts}/workDate.js?v=${version}"></script>
<script type="text/javascript">
window.contextPath = "${contextPath}";
</script>
</head>
<body class="easyui-layout">
<div id="conditionDiv" class="easyui-panel"
data-options="region:'north',split: false, collapsible:false, minHeight:48">
<div id="searchCondition">
<form id="datequeryForm" method="post" action="${contextPath}/sample/findPageByWorkDate.pvt">
<div>
<span >日期</span>
<input class="easyui-datebox" name="startTime" >
<span >至</span>
<input class="easyui-datebox" name="endTime" >
<span>状态</span>
<select class="easyui-combobox" style="width:100px;"
name="workState" data-options="panelHeight:'auto'">
<option value="">--请选择--</option>
<option value="Y">工作日</option>
<option value="N">非工作日</option>
</select>
<a href="javascript:void(0)" auth="${queryUrl}" class="easyui-linkbutton"
iconCls="icon-search" plain="true" onClick="onSearchWorkDate()">
<span i18n="search">查询</span>
</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-revert"
plain="true" onClick="$('#datequeryForm').form('reset')">
<span i18n="reset">重置</span>
</a>
</div>
</form>
</div>
</div>
<div data-options="region:'center'">
<table id="workDateGrid" style="width: 100%;height: 100%;"></table>
</div>
<div id="dialog-toolbar" style="text-align: center;">
<a href="javascript:void(0)" class="easyui-linkbutton" onClick="doSaveWorkDate()"
data-options="iconCls:'icon-save',plain:true">
<span i18n="save">保存</span>
</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onClick="onResetWorkDate()"
data-options="iconCls:'icon-revert',plain:true">
<span i18n="reset">重置</span>
</a>
</div>
<div id="addWorkDateDialog" class="easyui-dialog"
style="text-align: center; width: 420px; height: auto" modal="true"
maximizable="false" data-options="buttons: '#dialog-toolbar',closed:true">
<form id="workDateForm" method="post">
<input type="hidden" id="ids" name="ids">
<table style="width:100%;margin-top:5px;">
<tr>
<td><span>日期</span></td>
<td align="left">
<input type="text" name="date" class="easyui-datebox" style="width: 250px">
</td>
</tr>
<tr>
<td><span>状态</span></td>
<td align="left" >
<select class="easyui-combobox" style="width:250px;"
name="state" data-options="panelHeight:'auto'">
<option value="Y">工作日</option>
<option value="N">非工作日</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div class="hidden">
<div id="dategrid-toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true," onClick="addWorkDate()">
<span>添加</span>
</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-save',plain:true," onClick="updateWorkDate('Y')">
<span>工作日</span>
</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-save',plain:true," onClick="updateWorkDate('N')">
<span>非工作日</span>
</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-remove',plain:true," onClick="delWorkDate()">
<span>删除</span>
</a>
</div>
</div>
</body>
</html>
2.js
$(function() {
loadWorkDateGrid();
})
function loadWorkDateGrid(){
$('#workDateGrid').datagrid({
url : contextPath + '/storageDistributionPlan/queryPageWorkDate.pvt',
toolbar : '#dategrid-toolbar',
pagination : true,
pageSize : 10,
rownumbers : true,
striped : true,
singleSelect : false,
idField : 'id',
fitColumns : true,
nowrap : false,
pagePosition : 'bottom',
totalProperty : "total",
rowsProperty : "workDates",
frozenColumns : [[{
field : 'id',
checkbox : true
}]],
columns : [[{
field : 'date',
title : "日期",
width : 100,
sortable : true,
formatter : formatStringDate
}, {
field : 'state',
align : 'center',
width : 100,
title : "状态",
formatter : function(value, row, index) {
if (value == 'N') {
return '<span style="color:blue">非工作日</span>';
}else {
return '<span style="color:black">工作日</span>';
}
}
}, {
field : 'userName',
align : 'center',
width : 80,
title : "操作人"
}, {
field : 'createTime',
align : 'center',
width : 200,
title : "创建时间",
formatter : formatStringDateTime
}, {
field : 'updateTime',
align : 'center',
width : 200,
title : "更新时间",
formatter : formatStringDateTime
}]],
onBeforeLoad : function(param) {
if (!$("#datequeryForm").form('validate')) {
return false;
}
$.extend(param, $('#datequeryForm').serializeJson());
return true;
}
});
}
function onSearchWorkDate(){
$('#workDateGrid').datagrid('clearSelections').datagrid('load', {})
}
function onResetWorkDate(){
$('#workDateForm').form('reset');
}
function addWorkDate(){
$("#addWorkDateDialog").dialog({
title : "添加日期"
}).dialog('open');
}
function onLoadWorkDateGrid(){
$('#workDateGrid').datagrid('clearSelections').datagrid('load', {})
}
function doSaveWorkDate() {
if ($("#workDateForm").form("validate")) {
var workDate = $("#workDateForm").serializeJson();
doSave({
workDate : workDate
});
return false;
}
return false;
}
function doSave(paramData) {
$.messager.progress({
title : $.i18n.get('prompt'),
msg : $.i18n.get('waitingMessage')
});
$.ajax({
type : 'post',
url : contextPath + "/storageDistributionPlan/addDate.pvt",
data : JSON.stringify(paramData),
contentType : 'application/json; charset=UTF-8',
processData : false,
dataType : 'json',
success : function(resp, status, xhr) {
$.messager.progress('close');
if (resp.success) {
$("#addWorkDateDialog").dialog('close');
$.messager.alert($.i18n.get('prompt'), $.i18n.get('saveSuccess'), 'info', function(){
onLoadWorkDateGrid();
});
} else {
$.messager.alert($.i18n.get('error'), resp.msg || $.i18n.get("prompt.exception"), 'error');
}
},
error : function(xhr, status, error) {
$.messager.progress('close');
$.messager.alert($.i18n.get('error'), error || $.i18n.get("prompt.connection.exception"), 'error');
}
});
}
function updateWorkDate(state){
var selectedRow = getSelectedRow('#workDateGrid', true);
if (selectedRow) {
$.messager.confirm($.i18n.get('prompt'), "确定操作所选择的数据？", function(result) {
if (result) {
var ids = [];
$(selectedRow).each(function() {
ids.push(this.id);
});
$.messager.progress({
title : $.i18n.get('prompt'),
msg : $.i18n.get('waitingMessage')
});
$.ajax({
url : contextPath + '/storageDistributionPlan/updateWorkDate.pvt',
data : {
ids : ids.join(","),
"flag": state
},
type : "post",
success : function(resp) {
$.messager.progress('close');
if (resp.success == true) {
onLoadWorkDateGrid();
} else {
$.messager.alert($.i18n.get('error'), resp.msg, 'error');
}
},
error : function(xhr, status, error) {
$.messager.progress('close');
$.messager.alert($.i18n.get('error'), error || $.i18n.get("prompt.connection.exception"), 'error');
}
});
}
});
}
}
function delWorkDate(){
var selectedRow = getSelectedRow('#workDateGrid', true);
if (selectedRow) {
$.messager.confirm($.i18n.get('prompt'), $.i18n.get('confirmDeleteData'), function(result) {
if (result) {
var ids = [];
$(selectedRow).each(function() {
ids.push(this.id);
});
$.messager.progress({
title : $.i18n.get('prompt'),
msg : $.i18n.get('waitingMessage')
});
$.ajax({
url : contextPath + '/storageDistributionPlan/deleteWorkDate.pvt',
data : {
ids : ids.join(",")
},
type : "post",
success : function(resp) {
$.messager.progress('close');
if (resp.success == true) {
onLoadWorkDateGrid();
} else {
$.messager.alert($.i18n.get('error'), resp.msg, 'error');
}
},
error : function(xhr, status, error) {
$.messager.progress('close');
$.messager.alert($.i18n.get('error'), error || $.i18n.get("prompt.connection.exception"), 'error');
}
});
}
});
}
}
//选择行数
function getSelectedRow(selector, multiple) {
var selectedRows = $(selector).datagrid('getSelections');
if (selectedRows.length == 0) {
showPromptMsg($.i18n.get('selectMinOneRecord'));
return false;
} else if (!multiple && selectedRows.length > 1) {
showPromptMsg($.i18n.get('selectOneRecord'));
return false;
} else {
return multiple ? selectedRows : selectedRows[0];
}
}
//显示提示信息
function showPromptMsg(msg) {
$.messager.alert($.i18n.get('prompt'), msg, 'warning');
}
//格式化日期 yyyy-MM-dd hh:mm:ss
function formatStringDateTime(value) {
if(value==""||value==null||value=="undefined"){
return "";
}else{
return value.substr(0, 10)+" "+value.substr(11, 8);
}
}
//格式化日期 yyyy-MM-dd
function formatStringDate(value) {
if(value==""||value==null||value=="undefined"){
return "";
}else{
return value.substr(0, 10);
}
}
3.css
.panel-body-noheader {
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
}
#conditionDiv {
height: auto !important;
}
#conditionDiv div {
display: block;
height: auto !important;
}
#searchCondition, #query-toolbar, #datagrid-toolbar {
padding: 5px 5px 5px 10px;
}
#queryForm div {
padding-left: 10px;
padding-bottom:6px;
}
#queryForm div, #queryForm span {
display: inline-block;
}
.lable_algin{
text-align: right;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- a particle filter (sequential Monte Carlo) and a Kalman filter
- BlockingQueue一些特性
- uibutton 圆形
- IOS控件学习：UILabel常用属性与用法
- 【转】Jmeter之GUI运行原理
- iOS之reveal调试UI
- 自定义UIAlertView模态框
- 第Ⅰ部分 Squish用户指南
- 【五】注入框架RoboGuice使用:(Your First POJO Injection)
- Kibana User Guide [4.2] » Visualize » Data Table
- [LeetCode]Range Sum Query - Mutable
- [LeetCode]Range Sum Query - Mutable
- UITabBarController
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 初探UiAutomator（二）
- Fluent NHibernate之旅
- builder-设计模式
- UIKit: UIApearance
- （转）Android属性设置android:noHistory="true"
- UIImange的简单使用（一）