easyui-页面上的增删改功能
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../jquery/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/themes/icon.css">
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../jquery/validateForm.js"></script>
<script type="text/javascript">
$(function(){
//查询
$("#btn-serch").click(function(){
$("#dg").datagrid('load',{
bNum:$("#bNum").val(),
bName:$("#bName").val()
})
})
//图书信息刷新
$("#btn-refresh").click(function(){
$("#btn-serch").form('clear');
$("#dg").datagrid('load',{
bNum:$("#bNum").val(),
bName:$("#bName").val()
});
})
//图书信息修改
$("#btn-upt").click(function(){
if($("#dg").datagrid('getSelections').length==0){
$.messager.alert('提示消息','请选中一行','warning');
}else if($("#dg").datagrid('getSelections').length>1){
$.messager.alert('提示消息','每次只能选中一行','info');
$("#dg").datagrid('reload');
}else{
$("#btn-upt-form").form('load','../getBookInfo?bId='+$("#dg").datagrid('getSelected').bId);
$("#bt-upt").dialog({
closed:false,
buttons:[{
text:'保存',
iconCls:'icon-save',
handler:function(){
$('#btn-upt-form').form('submit', {
url:'../uptdateBook',
onSubmit: function(){
return $('#btn-upt-form').form('validate');
},
success:function(data){
if(data==1){
$("#bt-upt").dialog({closed:true});
$('#btn-upt-form').form('clear');
$("#dg").datagrid('load');
$.messager.show({
title:'消息提示',
msg:'修改成功',
showType:'show',
});
}else{
$.messager.alert('消息提示','修改失败','error');
}
}
});
}
},{
text:'关闭',
handler:function(){
$("#bt-upt").dialog({closed:true});
$("#dg").datagrid('load');
}
}]
})
}
})
//图书信息添加
$("#btn-save").click(function(){
$("#bt-save").dialog({
closed:false,
buttons:[{
text:'保存',
handler:function(){
$('#btn-save-form').form('submit', {
url:'../saveBook',
onSubmit: function(){
return $('#btn-save-form').form('validate');
},
success:function(data){
if(data==1){
$("#dg").datagrid('reload');
$("#bt-save").dialog({closed:true});
$('#btn-save-form').form('clear');
$.messager.show({
title:'消息提示',
msg:'添加成功',
showType:'show',
});
}else{
alert("添加失败");
}
}
});
}
},{
text:'关闭',
handler:function(){
$("#bt-save").dialog({closed:true});
}
}]
})
})
//图书信息删除
$("#btn-del").click(function(){
if($("#dg").datagrid('getSelections').length==0){
$.messager.alert('提示消息','最少选中一行','info');
}else{
var bIds=[];
var array = $("#dg").datagrid('getSelections');
for(var i in array){
var a = bIds.push(array[i].bId);
}
$.post('../delBook',{'BookId[]':bIds},function(data){
if(data==1){
$("#dg").datagrid('reload');
$('#btn-save-form').form('clear');
$.messager.show({
title:'消息提示',
msg:'删除成功',
showType:'show',
});
}else{
alert('删除失败');
}
})
}
})
$("#dg").datagrid({
url:'../findBookPageWith',
fit:true,
fitColumns:true,
toolbar:"#btn",
pagination:true,
pagePosition:'top',
columns:[[{
field:'bId',
title:'图书ID',
width:100,
checkbox:true
},{
field:'bNum',
title:'图书编号',
width:100
},{
field:'bName',
title:'图书名称',
width:100
},{
field:'bPrice',
title:'图书单价',
width:100
},{
field:'publish',
title:'出版社',
width:100
},{
field:'publishDate',
title:'出版时间',
width:100
},{
field:'author',
title:'作者',
width:100
},{
field:'instroduction',
title:'简介',
width:100
},{
field:'quantity',
title:'数量',
width:100
},{
field:'categoryName',
title:'类型',
width:100
}]]
})
})
</script>
</head>
<body>
<div id="btn">
<form id="btn-serch">
<table>
<tr>
<td>根据编号查：</td><td><input id="bNum" class="easyui-textbox" style="width:150px"></td>
<td>根据书名查：</td><td><input id="bName" class="easyui-textbox" style="width:150px">
<a id="btn-serch" href="#" class="easyui-linkbutton" data-options="plain:true">图书查询</a>
<a id="btn-refresh" href="#" class="easyui-linkbutton" data-options="plain:true">图书信息刷新</a>
</td>
</tr>
</table>
</form>
<a id="btn-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">图书信息添加</a>
<a id="btn-upt" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">图书信息修改</a>
<a id="btn-del" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">图书信息删除</a>
</div>
<div id="bt-save" class="easyui-dialog" title="图书信息添加" data-options="closed:true,closable:false" style="width: 300px;height: 350px;">
<form id="btn-save-form" method="post">
<table>
<tr>
<td>图书编号</td>
<td><input name="bNum" class="easyui-textbox" style="width:200px" data-options="readonlu:true,validType:'numbers'"></td>
</tr>
<tr>
<td>图书名称</td>
<td><input name="bName" class="easyui-textbox" style="width:200px" data-options="readonlu:true,validType:'ch'"></td>
</tr>
<tr>
<td>图书单价</td>
<td><input name="bPrice" class="easyui-textbox" style="width:200px" data-options="readonlu:true,validType:'numbers'"></td>
</tr>
<tr>
<td>出版社</td>
<td><input name="publish" class="easyui-textbox" style="width:200px" data-options="readonlu:true"></td>
</tr>
<tr>
<td>出版日期</td>
<td><input name="publishDate" type= "text" class= "easyui-datebox" data-options="readonlu:true,validType:'date'"></input></td>
</tr>
<tr>
<td>作者</td>
<td><input name="author" class="easyui-textbox" style="width:200px" data-options="readonlu:true"></td>
</tr>
<tr>
<td>简介</td>
<td><input name="instroduction" class="easyui-textbox" style="width:200px" data-options="readonlu:true"></td>
</tr>
<tr>
<td>数量</td>
<td><input name="quantity" class="easyui-textbox" style="width:200px" data-options="readonlu:true,validType:'numbers'"></td>
</tr>
<tr>
<td>类型ID</td>
<td><select class="easyui-combogrid" name="categoryId" style="width:80px;"
data-options="
panelWidth:450,
idField:'categoryId',
editable:false,
fit:true,
fitColumns:true,
pagination:true,
textField:'categoryName',
url:'../findCategoryWithPage',
columns:[[
{field:'categoryId',title:'图书类型ID',width:60},
{field:'categoryName',title:'图书类型名称',width:100}
]]"></select></td>
</tr>
</table>
</form>
</div>
<div id="bt-upt" class="easyui-dialog" title="图书信息修改" data-options="closed:true,closable:false" style="width: 300px;height: 350px;">
<form method="get" id="btn-upt-form">
<table>
<tr>
<td>图书编号</td>
<td><input name="bNum" class="easyui-validatebox" data-options="required:true" style="width:200px"/>
<input name="bId" type="hidden">
</td>
</tr>
<tr>
<td>图书名称</td>
<td><input name="bName" class="easyui-validatebox" data-options="required:true" style="width:200px"></td>
</tr>
<tr>
<td>图书单价</td>
<td><input name="bPrice" class="easyui-validatebox" data-options="required:true" style="width:200px"></td>
</tr>
<tr>
<td>出版社</td>
<td><input name="publish" class="easyui-validatebox" data-options="required:true" style="width:200px"></td>
</tr>
<tr>
<td>出版日期</td>
<td><input name="publishDate" type= "text" class= "easyui-datebox" data-options="required:true" > </input></td>
</tr>
<tr>
<td>作者</td>
<td><input name="author" class="easyui-validatebox" data-options="required:true" style="width:200px"></td>
</tr>
<tr>
<td>简介</td>
<td><input name="instroduction" class="easyui-validatebox" data-options="required:true" style="width:200px"></td>
</tr>
<tr>
<td>数量</td>
<td><input name="quantity" class="easyui-validatebox" data-options="required:true" style="width:200px"></td>
</tr>
<tr>
<td>类型ID</td>
<td><select class="easyui-combogrid" name="categoryId" style="width:80px;"
data-options="
panelWidth:450,
idField:'categoryId',
editable:false,
fit:true,
fitColumns:true,
pagination:true,
textField:'categoryName',
url:'../findCategoryWithPage',
columns:[[
{field:'categoryId',title:'图书类型ID',width:60},
{field:'categoryName',title:'图书类型名称',width:100}
]]"></select></td>
</tr>
</table>
</form>
</div>
<div id="dg"></div>
</body>
</html>
