1、bootstrap界面效果圖：
2、Teacher實體類
public class Teacher { private int id; private String name; private String phone; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } }
3、TeacherDao
public interface TeacherDao extends BaseDao<Teacher>{ }
4、TeacherDaoImpl
public class TeacherDaoImpl extends BaseDaoImpl<Teacher> implements TeacherDao{ }
5、TeacherService
public interface TeacherService extends BaseService<Teacher>{ }
6、TeacherServiceImpl
public class TeacherServiceImpl extends BaseServiceImpl<Teacher> implements TeacherService{ }
7、TeacherAction
public class TeacherAction extends BaseAction<Teacher>{ private String name; private String phone; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public void grid() { super.filter = "1=1"; if (!"".equals(name) && name != null) { super.filter += " AND name like '%" + name + "%'"; } if (!"".equals(phone) && phone != null) { super.filter += " AND phone like '%" + phone + "%'"; } super.grid(); } public void save(){ super.id=entity.getId(); super.save(); } public void getById(){ super.getById(); } public void delete(){ super.delete(); } }
8、bootstrap布局
<div class="container"> <h3>教師管理</h3> <hr> <!-- 查詢塊 --> <div class="row collapse" id="collapseFilter" aria-expanded="true"> <div class="col-md-12"> <h5>查詢條件</h5> <div class="box-body"> <form class="form-inline" > <div class="form-group"> <input id="name" type="text" class="form-control" placeholder="名字" /> </div> <div class="form-group"> <input id="phone" type="text" class="form-control" placeholder="電話" /> </div> <button id="btn_search" type="button" class="btn btn-primary btn-sm" onclick="search();"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查詢 </button> <button id="btn_clean_search" type="button" class="btn btn-danger btn-sm" onclick="clearSearch();">清空條件</button> </form> </div> </div> </div> <!-- 表格塊 --> <div class="row"> <div class="col-md-12"> <div id="toolbar"> <!-- 工具欄 --> <button type="button" class="btn btn-primary btn-sm" onclick="addData();"><span class="fa fa-plus" aria-hidden="true"></span> 新增 </button> <button type="button" class="btn btn-primary btn-sm" onclick="editData();"><span class="fa fa-pencil" aria-hidden="true"></span> 修改 </button> <button type="button" class="btn btn-primary btn-sm" onclick="deleteData();"><span class="fa fa-trash" aria-hidden="true"></span> 刪除 </button> <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="true" aria-controls="collapseFilter"> <i class="fa fa-filter"></i> 查詢 </button> </div> <!-- 表格 --> <table id="mytable" class="table table-hover"></table> </div> </div> </div> <!-- 模態框（Modal） --> <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="modalTitle" class="modal-title"></h4> </div> <div class="modal-body"> <form class="form-horizontal" id="myform" enctype="multipart/form-data"> <input type="hidden" name="entity.id" id="txt_id"/> <div class="box-body"> <div class="form-group"> <label class="col-sm-2 control-label">教師名稱</label> <div class="col-sm-9"> <input type="text" class="form-control" name="entity.name" id="txt_name" required="" placeholder="教師名稱" autocomplete="off"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">電話號碼</label> <div class="col-sm-9"> <input type="text" class="form-control" name="entity.phone" id="txt_phone" required="" placeholder="電話號碼" autocomplete="off"> </div> </div> </div> <!-- /.box-body --> <div class="box-footer text-right"> <button type="button" class="btn btn-default" data-btn-type="cancel" data-dismiss="modal"><span class="fa fa-remove" aria-hidden="true"></span> 關閉 </button> <button type="button" id="btnOK" onclick="submitData();" class="btn btn-primary"><span class="fa fa-save" aria-hidden="true"></span> 提交 </button> </div> <!-- /.box-footer --> </form> </div> </div> </div> </div> <!-- 模態框（Modal） -->
9、teacher_table.js
var $table = $('#mytable'); $(function(){ initTable(null); }); //表格初始化 function initTable(searchArgs) { $table.bootstrapTable('destroy'); $table.bootstrapTable({ url: 'http://localhost:8080/ssh/teacherGrid', method: 'post', contentType: "application/x-www-form-urlencoded", dataType: "json", striped: true,//是否顯示行間隔色 sortable: true, //是否啟用排序 sortName: "id",//排序字段 sortOrder: "desc", //排序方式 cache: false,//是否使用緩存 uniqueId: "id",//每行的唯一標識 toolbar: "#toolbar",//指定工具欄 showColumns: true,//顯示隱藏列列選擇按鈕 search: false, //是否顯示搜索框 showRefresh: false, //顯示刷新按鈕 showToggle: false,//切換顯示樣式 showFooter: false, //顯示Table腳部 pagination: true,//是否顯示分頁 showPaginationSwitch: false, //是否顯示分頁按鈕 clickToSelect: false, //是否啟用點擊選中行 minimumCountColumns: 2, //最少要顯示的列數 undefinedText: '-', //cell沒有值時顯示 sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁 pageSize: 3,//每頁的記錄行數 pageNumber: 1, //初始化加載第1頁，默認第1頁 pageList: "[5,10,20]",//可供選擇的每頁的行數 height:tableHeight(), iconsPrefix: 'glyphicon', /* queryParamsType的默認值為 'limit' ,在默認情況下 傳給服務端的參數為：offset,limit,sort 設置為 '' 在這種情況下傳給服務器的參數為：pageSize,pageNumber */ queryParamsType:'', queryParams: function queryParams(params) { var param = { pageNumber: params.pageNumber, pageSize: params.pageSize, sortName:this.sortName, sortOrder:this.sortOrder }; if(searchArgs!=null){ for(var key in searchArgs){ param[key]=searchArgs[key]; } } return param; }, editable:false,//開啟編輯模式 columns: [{ field: 'state', checkbox: true, align: 'center', valign: 'middle' }, { title: '教師名稱', field: 'name', align: 'center', valign: 'middle', sortable: true }, { title: '手機號碼', field: 'phone', align: 'center', valign: 'middle', sortable: true }], onLoadSuccess: function () { //加載成功時執行 console.log("加載成功!"); }, onLoadError: function () { //加載失敗時執行 console.log("加載失敗!"); }, formatLoadingMessage: function () { //正在加載 return "請稍等，正在加載中..."; }, formatNoMatches: function () { //沒有匹配的結果 return '無符合條件的記錄'; } }); } //獲取窗口高度 function tableHeight() { return $(window).height() - 160; } //搜索分頁查詢 function search(){ var searchArgs={ name : $("#name").val(), phone: $("#phone").val() }; initTable(searchArgs); } //清空條件按鈕點擊事件 function clearSearch(){ $('#name').val(""); $('#phone').val(""); initTable(null); }
10、teacher_crud.js
//獲取選中的id function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function (row) { return row.id }); }//打開模態框 function addData(){ $("#modalTitle").text("添加教師"); $('#formModal').modal('show'); } //關閉模態框時重置表單 $('#formModal').on('hide.bs.modal', function() { $("#txt_id").val(""); $("#txt_name").val(""); $("#txt_phone").val(""); }); //保存數據 function submitData(){ var param = $("#myform").serialize(); console.log(param); $.ajax({ type: "post", url: "http://localhost:8080/ssh/saveTeacher", data: param , dataType: 'json', contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data) { console.log("保存返回的數據:"+JSON.stringify(data)); $('#formModal').modal('hide'); if(data['msg']){ toastr.success(data['msg']); }else{ toastr.error(data['msg']); } initTable(null); } }); } //編輯數據 function editData(){ var ids = getIdSelections(); if (ids.length != 1) { toastr.info('選擇一條數據進行編輯!'); } else { var id= parseInt(ids); console.log("編輯的id："+id); $.ajax({ type: "post", url: "http://localhost:8080/ssh/getTeacher", data: {id:id}, dataType: 'json', contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data) { console.log("獲取單條數據:"+JSON.stringify(data)); $('#txt_id').val(data.id); $('#txt_name').val(data.name); $('#txt_phone').val(data.phone); $("#modalTitle").text("編輯教師"); $('#formModal').modal('show'); } }); } } //刪除數據 function deleteData(){ var ids = getIdSelections().toString(); if (ids.length > 0) { console.log("刪除的ids："+ids); if(confirm("確定要刪除選中的數據嗎？")){ $.ajax({ type: "post", url: "http://localhost:8080/ssh/deleteTeacher", data: {"ids":ids}, dataType: 'json', contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data) { console.log("刪除返回的數據:"+JSON.stringify(data)); if(data['msg']){ toastr.success(data['msg']); }else{ toastr.error(data['msg']); } initTable(null); } }); } } else { toastr.warning('選擇要刪除的數據！'); } }
這是小編的原創隨筆，請尊重原創，若是轉載請注明出處，謝謝。