BootstrapTableSpringMVC基本功能实现

首先是版本介绍<前端>bootstrap.min.CSS3.2.0,bootstrap.min.js 3.2.0,jquery 1.11.3，modal.js 3.2.0,bootstrap-table.js1.3.0;

<后台>SPRing MVC 4.1.5

这里是前端代码bootstrap-table.jsp

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<%@ page contentType="text/html;charset=utf-8" language="java" %>3<%@page isELIgnored="false" %>4<html lang="zh-CN">5<head>611<title>data list</title>12<meta name="viewport" content="width=device-width, initial-scale=1.0">13<link href="/ghgh/mycss/bootstrap.min.css" rel="stylesheet" media="screen">14<link href="/ghgh/mycss/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">15<link href="/ghgh/mycss/bootstrapValidator.min.css" rel="stylesheet" media="screen">16<link href="/ghgh/mycss/bootstrap-table.min.css" rel="stylesheet" media="screen">1718<script type="text/Javascript" src="/ghgh/myjs/modal.js"></script>19</head>20<style type="text/css">21.ml10 {22margin-left: 10px;23}24</style>25<body>26<script type="text/javascript">27</script>28<divclass="container">29<divclass="alert alert-success" role="alert">30<a href="#"class="alert-link">${logStr}</a>31</div>3233<div id="toolbar"class="btn-group">34<button type="button"class="btn btn-default" id="save">35<iclass="glyphicon glyphicon-plus"></i>36</button>37<button type="button"class="btn btn-default">38<iclass="glyphicon glyphicon-trash"></i>39</button>40</div>4142<table id="table"43data-toggle="table"44data-height="550"45data-url="/ghgh/workSync/getJson.action"46data-search="true"47data-pagination="true"48data-show-refresh="true"49data-show-toggle="true"50data-show-columns="true"51data-striped="true"52data-toolbar="#toolbar">53<thead>54<tr>55<th data-field="N_ID">ID</th>56<th data-field="VC_NAME">NAME</th>57<th data-field="VC_LIKE">LIKE</th>58<th data-field="VC_NOTE">NOTE</th>59<th data-field="N_ID" data-events="actionEvents" data-formatter="actionFormatter">ACTION</th>60</tr>61</thead>62</table>63646566<div id="myModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">67<divclass="modal-dialog" role="document">68<divclass="modal-content" id="content">69<divclass="modal-header">70<button type="button"class="close" data-dismiss="modal" aria-label="Close"><span71aria-hidden="true">×</span></button>72<h4class="modal-title" id="exampleModalLabel">Edit Data</h4>73</div>74<divclass="modal-body" id="editBody">75</div>76</div>77</div>78</div>798081<div id="saveModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">82<divclass="modal-dialog" role="document">83<divclass="modal-content" id="content1">84<divclass="modal-header">85<button type="button"class="close" data-dismiss="modal" aria-label="Close"><span86aria-hidden="true">×</span></button>87<h4class="modal-title" id="exampleModalLabel1">Edit Data</h4>88</div>89<divclass="modal-body" id="editBody1">90</div>91</div>92</div>93</div>9495</div>96<script type="text/javascript" src="/ghgh/myjs/jquery-1.11.3.min.js" charset="UTF-8"></script>97<script type="text/javascript" src="/ghgh/myjs/bootstrap.min.js"></script>98<script type="text/javascript" src="/ghgh/myjs/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>99<script type="text/javascript" src="/ghgh/myjs/bootstrapValidator.min.js" charset="UTF-8"></script>100<script type="text/javascript" src="/ghgh/myjs/locales/bootstrap-datetimepicker.zh-CN.js"101charset="UTF-8"></script>102103<script type="text/javascript" src="/ghgh/myjs/bootstrap-table.js"></script>104<script type="text/javascript" src="/ghgh/myjs/bootstrap-table-export.js"></script>105<script type="text/javascript" src="/ghgh/myjs/tableExport.js"></script>106<script type="text/javascript" src="/ghgh/myjs/jquery.base64.js"></script>107<script type="text/javascript">108$(document).ready(function () {109$("#save").on('click', function () {110$("#editBody1").load("/ghgh/workSync/edit.action?id=null", function (response, status, xhr) {111$("#saveModal").modal('show');112});113});114});115</script>116<script>117function actionFormatter(value, row, index) {118return[119'<a class="edit ml10" href="javascript:void(0)" title="Edit">',120'<i class="glyphicon glyphicon-edit"></i>',121'</a>',122'<a class="remove ml10" href="javascript:void(0)" title="Remove">',123'<i class="glyphicon glyphicon-remove"></i>',124'</a>'125].join('');126}127128window.actionEvents ={129'click .edit': function (e, value, row, index) {130//edit131var id =value;132$("#editBody").load('/ghgh/workSync/edit.action?id=' +id, function (response, status, xhr) {133$('#myModal').modal('show');134});135},136'click .remove': function (e, value, row, index) {137//remove138if(confirm("You sure remove it?")) {139$.Ajax({140type: "POST",141url: "/ghgh/workSync/remove.action",142data: {id: value}143}).done(function (msg) {144if(msg == 1) {145alert("Data Removed Success");146$('#table').bootstrapTable('refresh');147}else{148alert("Data Removed Error");149}150});151}152},153};154</script>155</body>156</html>

View Code

edit.jsp

1<%@ page contentType="text/html;charset=utf-8" language="java" %>2<%@page isELIgnored="false" %>3<formclass="form-horizontal" role="form" action="/ghgh/workSync/edited.action" method="post">4<divclass="form-group hide">5<labelfor="id"class="col-sm-2 control-label">ID</label>67<divclass="col-sm-10">8<input type="text"class="form-control" id="id" name="id" value="${map.N_ID}"/>9</div>10</div>11<divclass="form-group">12<labelfor="name"class="col-sm-2 control-label">NAME</label>1314<divclass="col-sm-10">15<input type="text"class="form-control" id="name" name="name" value="${map.VC_NAME}"/>16</div>17</div>18<divclass="form-group">19<labelfor="like"class="col-sm-2 control-label">LIKE</label>2021<divclass="col-sm-10">22<input type="text"class="form-control" id="like" name="like" value="${map.VC_LIKE}"/>23</div>24</div>25<divclass="form-group">26<labelfor="note"class="col-sm-2 control-label">NOTE</label>2728<divclass="col-sm-10">29<input type="text"class="form-control" id="note" name="note" value="${map.VC_NOTE}"/>30</div>31</div>32<divclass="form-group">33<divclass="col-sm-offset-2 col-sm-10">34<button type="submit"class="btn btn-primary">Save</button>35<button type="button" id="cancel"class="btn btn-default">Cancel</button>36</div>37</div>38</form>39<script type="text/javascript">40$(document).ready(function () {41$("#cancel").on('click', function () {42$("#myModal").modal('hide');4344});45});46</script>

这里是后代代码后台代码是Spring MVC做的，为了方便，就用一个Controller实现了，下面是代码片段

1//这里是拉取数据列表2@RequestMapping(value = "/getJson")3@ResponseBody4publicObject test() {5String sqlStr = "select * from boot t";6List<Map<String, Object>> list =jdbcTemplate.queryForList(sqlStr);7JSONArray jsonArray =JSONArray.fromObject(list);8System.out.println(jsonArray.toString());910returnlist;11}12//这里是实现单条数据删除功能13@RequestMapping(value = "/remove")14@ResponseBody15publicObject remove(@RequestParam String id) {16String sqlStr = "delete from boot t where t.N_ID = ?";17intlog1 = 0;18try{19log1 =jdbcTemplate.update(sqlStr, id);20System.out.println("log - " +log);21}catch(Exception ex) {22ex.printStackTrace();23}24returnlog1;25}2627//这里是拉取编辑需要的显示数据28@RequestMapping(value = "/edit")29@ResponseBody30publicObject edit(@RequestParam String id) {31ModelAndView mv =newModelAndView("/system/workSync/edit.jsp");32String sqlStr = "select * from boot t where t.N_ID = ?";33Map<String, Object> list =null;34try{35if(null==id) {36}else{37list =jdbcTemplate.queryForMap(sqlStr, id);38mv.addObject("map", list);39}40}catch(Exception ex) {41ex.printStackTrace();42}43returnmv;44}45//提交编辑的数据以及提交录入的数据46@RequestMapping(value = "/edited")47@ResponseBody48publicObject edited(finalInfo info, HttpServletRequest request) {//Request Object use @RequestBody, not @RequestParam49info.toString();5051String id =info.getId();52String sqlStr = "update boot t set t.VC_NAME=?,VC_LIKE=?,VC_NOTE=? where t.N_ID = ?";53if(null== id || id.equals("")) {54id =String.valueOf(System.currentTimeMillis());55sqlStr = "INSERT INTO BOOT(VC_NAME,VC_LIKE,VC_NOTE,N_ID) VALUES (?,?,?,?)";56}57finalString vcId =id;58ModelAndView mv =newModelAndView("/system/workSync/bootstrap-table.jsp");59intlogStr = 0;60String logString = "";61try{62logStr = jdbcTemplate.update(sqlStr,newPreparedStatementSetter() {63@Override64publicvoidsetValues(PreparedStatement ps)throwsSQLException {65ps.setString(1, info.getName());66ps.setString(2, info.getLike());67ps.setString(3, info.getNote());68ps.setString(4, vcId);69}70});71if(logStr != 0)72logString = "Edit Success.";73else74logString = "Edit Error.";7576mv.addObject("logStr", logString);77}catch(Exception ex) {78ex.printStackTrace();79}80returnmv;81}

View Code

大概的总结一下该文章主要是围绕这bootstrap table进行简单的操作，因为本人对bootstrap也是属于新手，其中的很多功能实现可能脱离了bootstrap的实现本质，比如有些功能依赖于Jquery才能实现等等，主要参考网站有，

http://bootstrap-table.wenzhixin.net.cn/examples/

http://v3.bootcss.com/css/

下面是效果图