Ace控件-图书管理系统
Ace控件-图书管理系统
增删改查
效果：
代码：
bookInfo.html
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-header">
<h4 class="widget-title">搜索</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div style="padding-top: 10px" class="row">
<div class="col-xs-3">
<label class="col-xs-3 control-label no-padding-right" for="bookId">编号</label>
<input type="text" name="bookId" class="col-xs-8" id="bookId"/>
</div>
<div class="col-xs-3">
<label class="col-xs-3 control-label no-padding-right" for="bookName">名称</label>
<input type="text" name="bookName" class="col-xs-8" id="bookName"/>
</div>
<div class="col-xs-3">
<label class="col-xs-3 control-label no-padding-right" for="bookClass">类别</label>
<input type="text" name="bookClass" class="col-xs-8" id="bookClass"/>
</div>
<div class="col-xs-3">
<label class="col-xs-3 control-label no-padding-right" for="bookAuthor">作者</label>
<input type="text" name="bookAuthor" class="col-xs-8" id="bookAuthor"/>
</div>
</div>
<div style="padding-top: 10px" class="row">
<div class="col-xs-3">
<label class="col-xs-3 control-label no-padding-right" for="bookPublisher">出版社</label>
<input type="text" name="bookPublisher" class="col-xs-8" id="bookPublisher"/>
</div>
<div class="col-xs-3">
<label class="col-xs-4 control-label no-padding-right" for="bookDate">入库日期</label>
<input type="text" name="bookDate" class="col-xs-8 date-picker" id="bookDate" />
</div>
<div class="col-xs-6" style="padding-left: 50px">
<button class="btn btn-info btn-sm" id="search" type="button">
<i class="ace-icon fa fa-check bigger-110"></i>
查询
</button>
<button class="btn btn-sm" id="search_all" type="reset">
<i class="ace-icon fa fa-undo bigger-110"></i>
重置
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="padding-top: 20px" class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<table id="grid-table"></table>
<div id="grid-pager"></div>
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div>
jQuery(grid_selector).jqGrid({
url: "book/list",
datatype: "json",
mtype: "post",
height: 250,
colNames: [' ', '编号', '名称', '类别', '作者', '出版社', '状态', '定价', '入库日期', '介绍'],
colModel: [
{
name: 'myac', index: '', align: 'center', width: 80, fixed: true, sortable: false, resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delbutton: false,//disable delete button
editOptions: {recreateForm: true, beforeShowForm: beforeEditCallback}
//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
}
},
{name: 'bookId', index: '编号', width: 60, sorttype: "int", editable: true},
{name: 'bookName', index: '名称', width: 90, editable: true, editoptions: {size: "20"}},
{name: 'bookClass', index: '类别', width: 60, editable: true, editoptions: {size: "20"}},
{name: 'bookAuthor', index: '作者', width: 70, editable: true, editoptions: {size: "20"}},
{name: 'bookPublisher', index: '出版社', width: 150, editable: true, editoptions: {size: "20"}},
{name: 'bookStatus', index: '状态', width: 60, sortable: true, editable: true},
{name: 'bookPrice', index: '定价', width: 80, sortable: true, editable: true},
{
name: 'bookDate',
index: '入库日期',
width: 150,
sortable: true,
editable: true,
sorttype: "date",
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == null || cellvalue == "") {
return ""
}
var time = new Date(cellvalue);
return time.getFullYear() + "-"
+ (time.getMonth() < 9 ? ("0" + (time.getMonth() + 1)) : (time.getMonth() + 1)) + "-"
+ (time.getDate() < 10 ? ("0" + time.getDate()) : (time.getDate()));
},
unformat: pickDate
},
{
name: 'bookNote',
index: '介绍',
width: 150,
sortable: false,
editable: true,
edittype: "textarea",
editoptions: {rows: "2", cols: "10"}
}
],
pgtext: "第 {0} 页 {1}",
viewrecords: true,
recordtext: "当前 {0} - {1} 共 {2}",
jsonReader: {//分页的关键
id: "id",
root: "rows",
total: "total",
page: "page",
records: "records",
repeatitems: false
},
postData:{
'code':0
},
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
//toppager: true,
multiselect: true,
//multikey: "ctrlKey",
multiboxonly: true,
loadonce: false,
loadComplete: function () {
var table = this;
setTimeout(function () {
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl: "book/editAndDel",//nothing is saved
// editData:[],
editData:{
bookId:1
},
/*serializeGridData:function(id){
var rowData = $(grid_selector).jqGrid('getRowData', id);
return JSON.stringify(rowData);
},*/
caption: "图书信息管理"
});
jQuery(grid_selector).jqGrid('navGrid', pager_selector,
{ //navbar options
edit: true,
editicon: 'ace-icon fa fa-pencil blue',
add: true,
addicon: 'ace-icon fa fa-plus-circle purple',
del: true,
delicon: 'ace-icon fa fa-trash-o red',
delfunc: function (id) {
//获取选中ID（可多选）
// var ids=$(grid_selector).jqGrid('getGridParam','selarrrow');
// var idsArr= ids.toString().split(',');
/*for (var i=0;i<idsArr.length;i++){
var rowData = $(grid_selector).jqGrid('getRowData',idsArr[i]);
alert(rowData.bookId);
}*/
var rowData = $(grid_selector).jqGrid('getRowData', id);
var msg = "您真的确定要删除吗?";
if (confirm(msg)==true){
_delete(rowData.bookId);
$(this).dialog("close");
return true;
}else{
$(this).dialog("close");
return false;
}
},
search: false,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
refreshicon: 'ace-icon fa fa-refresh green',
view: true,
viewicon: 'ace-icon fa fa-search-plus grey',
},
{
//edit record form
//closeAfterEdit: true,
//width: 700,
url: 'book/edit',
ajaxEditOptions: {contentType: "application/json", type: "POST"},
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
},
serializeEditData: function (postdata) {
// console.log(postdata);
return JSON.stringify(postdata);
},
afterComplete: function (response) {
// layer.msg(response.responseText, {time: 2000});
alert("修改成功");
}
},
{
//new record form
//width: 700,
url: 'book/add',
ajaxEditOptions: {contentType: "application/json", type: "POST"},
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
},
serializeEditData: function (postdata) {
// console.log(postdata);
return JSON.stringify(postdata);
},
afterComplete: function (response) {
// layer.msg(response.responseText, {time: 2000});
alert("添加成功");
}
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
}
}
)
//保存删除
function _delete(id) {
jQuery.ajax({
type: 'POST',
url: 'book/del',
dataType: 'json',
data: {
bookId: id
},
success: function (data) {
if (data) {
if (data.code != 1) {
alert("删除失败");
} else {
//刷新jqgrid
$(grid_selector).jqGrid().trigger("reloadGrid");
}
}
},
error: function (data) {
}
});
}
$("#search").click(function (e) {
//获取查询条件
var bookId = $("#bookId").val();
var bookName = $("#bookName").val();
var bookClass = $("#bookClass").val();
var bookAuthor = $("#bookAuthor").val();
var bookPublisher = $("#bookPublisher").val();
var bookDate = $("#bookDate").val();
// alert(bookId);
//刷新jqgrid
$(grid_selector).jqGrid("setGridParam",{
// url:"book/limit",
// url: 'book/limit',
// ajaxEditOptions: {contentType: "application/json", type: "POST"},
page:1,
// datatype: "json",
// contentType:"",
// rows:10,
//传递查询参数
postData:{
'bookId':bookId,
'bookName':bookName,
'bookClass':bookClass,
'bookAuthor':bookAuthor,
'bookPublisher':bookPublisher,
'bookDate':bookDate,
'code':1
},
serializeEditData: function (postdata) {
console.log(postdata);
return JSON.stringify(postdata);
},
}).trigger("reloadGrid");
});
后端：
@ResponseBody
@RequestMapping("list")
public JSONObject getlibraryList(BookVo bookVo) throws ParseException {
JSONObject jsonData = new JSONObject();
if (bookVo.getCode() == 0){
List<Book> books = bookService.selectList();
// 当前页
int pageStr = Integer.parseInt(bookVo.getPage());
// 页大小
int rowsStr = Integer.parseInt(bookVo.getRows());
// 记录总数
int records = books.size();
// 总页数
int total = (records%rowsStr==0) ? records/rowsStr : records/rowsStr+1;
// 返回内容
int start = (pageStr-1)*rowsStr;
int end = start + rowsStr;
JSONArray jsonArray = new JSONArray();
for(int i=start;i<=end && i<records;i++){
jsonArray.add(books.get(i));
}
// JSONArray array= JSONArray.parseArray(JSON.toJSONString(books));
jsonData.put("total", total);
jsonData.put("page", pageStr);
jsonData.put("records", records);
jsonData.put("rows", jsonArray);
// return jsonData;
}else {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Book book = new Book();
book.setBookId(bookVo.getBookId());
book.setBookName(bookVo.getBookName());
book.setBookAuthor(bookVo.getBookAuthor());
book.setBookClass(bookVo.getBookClass());
if (bookVo.getBookDate() == ""){
book.setBookDate(null);
}else {
Date date = sdf.parse(bookVo.getBookDate());
book.setBookDate(date);
}
// book.setBookNote(bookVo.getBookNote());
// book.setBookPrice(new BigDecimal(bookVo.getBookPrice()));
book.setBookPublisher(bookVo.getBookPublisher());
// book.setBookTotal(bookVo.getBookTotal());
List<Book> books = bookService.selectByLimit(book);
// JSONArray jsonArray = new JSONArray();
// jsonArray.add(books);
// 当前页
int pageStr = Integer.parseInt(bookVo.getPage());
// 页大小
int rowsStr = Integer.parseInt(bookVo.getRows());
// 记录总数
int records = books.size();
// 总页数
int total = (records%rowsStr==0) ? records/rowsStr : records/rowsStr+1;
// 返回内容
int start = (pageStr-1)*rowsStr;
int end = start + rowsStr;
JSONArray jsonArray = new JSONArray();
for(int i=start;i<=end && i<records;i++){
jsonArray.add(books.get(i));
}
// JSONArray array= JSONArray.parseArray(JSON.toJSONString(books));
//JSONObject jsonData = new JSONObject();
jsonData.put("total", total);
jsonData.put("page", pageStr);
jsonData.put("records", records);
jsonData.put("rows", jsonArray);
/*jsonData.put("total", 1);
jsonData.put("page", 1);
jsonData.put("records", 1);
jsonData.put("rows", jsonArray);*/
}
return jsonData;
}
@RequestMapping("add")
@ResponseBody
public int addBook(@RequestBody Book book){
int i = bookService.insertSelective(book);
if (i>0){
return 1;
}
return 0;
}
@RequestMapping("edit")
@ResponseBody
public int editBook(@RequestBody Book book){
int i = bookService.updateByPrimaryKeySelective(book);
if (i>0){
return 1;
}
return 0;
}
@RequestMapping("del")
@ResponseBody
public JSONObject delBook(@RequestParam("bookId") String bookId){
int i = bookService.deleteByPrimaryKey(Integer.parseInt(bookId));
JSONObject jsonData = new JSONObject();
if (i>0){
jsonData.put("code",1);
return jsonData;
}
jsonData.put("code",0);
return jsonData;
}
@RequestMapping("editAndDel")
@ResponseBody
public int editAndDelBook(BookEditOrDel bookEditOrDel) throws ParseException {
if (bookEditOrDel.getOper().equals("edit")){
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Book book = new Book();
book.setBookId(bookEditOrDel.getBookId());
book.setBookName(bookEditOrDel.getBookName());
book.setBookAuthor(bookEditOrDel.getBookAuthor());
book.setBookClass(bookEditOrDel.getBookClass());
Date date = sdf.parse(bookEditOrDel.getBookDate());
book.setBookDate(date);
book.setBookNote(bookEditOrDel.getBookNote());
book.setBookPrice(new BigDecimal(bookEditOrDel.getBookPrice()));
book.setBookPublisher(bookEditOrDel.getBookPublisher());
book.setBookStatus(bookEditOrDel.getBookStatus());
int i = bookService.updateByPrimaryKeySelective(book);
if (i>0){
return 1;
}
}else if (bookEditOrDel.getOper().equals("del")){
/*int i = bookService.deleteByPrimaryKey(bookEditOrDel.getId());
if (i>0){
return 1;
}*/
}
return 0;
}