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>