[catalog]
1. 了解 Bootstrap Table
2. Bootstrap Table下载及安装
3. 项目中引入 Bootstrap Table 相关文件
4. 通过 数据属性 以表格形式显示数据
5. 通过 JavaScript 以表格形式显示数据
6. 修改数据源使表格显示数据
7.【每日一面】如何通过JSONP实现跨域
1. 了解 Bootstrap Table
Bootstrap Table(引导表)是一款非常有名的开源表格插件,提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、移动列位置等一些特殊的功能,插件可以用基于HTML5的 data-* 属性标识设置,也可以使用 Javascript 方式进行设置,非常方便。
2. Bootstrap Table下载及安装
点击进入Bootstrap Table官网下载
直接下载源码
下载完成后解压
3. 项目中引入 Bootstrap Table 相关文件
引入CSS 和 JavaScript(jquery 必须首先引入,然后是 bootstrap.js,最后引入bootstrap-table.js)
<script type="text/javascript"
src="../static/plugin/jquery-3.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrap-3.3.7.dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrapTable-1.18.0/js/bootstrap-table.min.js"></script>
<!-- 引入中文包 -->
<script type="text/javascript"
src="../static/plugin/bootstrapTable-1.18.0/locales/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" type="text/css"
href="../static/css/common/default.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../static/plugin/bootstrap-3.3.7.dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../src/main/webapp/static/plugin/bootstrapTable-1.18.0/css/bootstrap-table.min.css" />
</head>
4. 通过 数据属性 以表格形式显示数据
这种方式可以直接在table标签里面定义“data-…”等相关属性,不用再js里面注册,用法虽然简单,但不太灵活,后面主要讲在js里面初始化的方式来使用table组件。
<table
data-toggle="table"
data-url="data1.json"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th data-sortable="true" data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
5. 通过 JavaScript 以表格形式显示数据
<!-- HTML/JSP中定义一个空的table -->
<table id="table"></table>
<!-- 内置JavaScript -->
<script>
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
</script>
运行效果如图,因为数据源指定的"data1.json"是一个不存在的数据,所以暂时没有数据。
6. 修改数据源使表格显示数据
- 编写 kekanGroup.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>ITGodRoad</title>
<script type="text/javascript"
src="../static/plugin/jquery-3.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrap-3.3.7.dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrap-datepicker/locales/bootstrap-datetimepicker.ja.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrapTable-1.18.0/js/bootstrap-table.min.js"></script>
<script type="text/javascript"
src="../static/plugin/bootstrapTable-1.18.0/locales/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript"
src="../static/javaScript/kekanGroup/kekanGroup.js"></script>
<script type="text/javascript" src="../static/javaScript/common/util.js"></script>
<link rel="stylesheet" type="text/css"
href="../static/css/common/default.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../static/plugin/bootstrap-3.3.7.dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../static/plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../static/plugin/bootstrapTable-1.18.0/css/bootstrap-table.min.css" />
</head>
<body>
<form id="keKanGroupForm" class="form-inline">
<div class="row">
<div class="form-group">
<label for="groupId">順 番</label>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-long"
id="groupId" name="groupId">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">名 前</label>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-long" id="name"
name="name">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="sex">性 別</label>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-long" id="sex"
name="sex">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="dateFrom">出生年月日</label>
<div class="form-group">
<div class="input-group date form_date col-md-5" data-date=""
data-date-format="dd MM yyyy" data-link-field="dateFrom"
data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value=""
readonly> <span class="input-group-addon"><span
class="glyphicon glyphicon-remove"></span></span> <span
class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dateFrom" value="" /><br />
</div>
</div>
<div class="form-group">
<label for="dateTo" class="date-to-label">~</label>
<div class="form-group">
<div class="input-group date form_date col-md-5" data-date=""
data-date-format="dd MM yyyy" data-link-field="dateTo"
data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value=""
readonly> <span class="input-group-addon"> <span
class="glyphicon glyphicon-remove"></span>
</span> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input type="hidden" id="dateTo" value="" /><br />
</div>
</div>
<button type="button" class="btn btn-primary" id="btnSearch">検索</button>
</div>
</form>
<hr>
<table id="table"></table>
<script type="text/javascript">
$('.form_date').datetimepicker({
language : 'ja',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView : 2,
format : 'yyyy-mm-dd',
forceParse : 0
});
</script>
</body>
</html>
- 编写 kekanGroup.js
$(document).ready(function() {
initLayout();
});
// 画面スタイルの初期化
function initLayout() {
var params = {
columns: [{
field: 'id',
title: '順番',
}, {
field: 'name',
title: '名前'
}, {
field: 'name_kana',
title: '平仮名',
}, {
field: 'sex',
title: '性別',
}, {
field: 'birthday',
title: '出生年月日',
}],
url: Util.initRestfulUrl("getAllKeKanGroup"),
idField: "id"
};
Util.table.init('table', params);
}
- 编写 util.js
(function() {
// 共通関数の定義
var Util = window.Util = {
initRestfulUrl : function(action) {
return "/DigIntoSpringMVC/main/" + action + ".do";
},
table : {
init : function(id, params) {
var defaultParams = {
//queryParams : "setSearchParams",
cache : false,
pagination : true,
sidePagination : "client",
pageSize : 10,
pageList : [ 1, 5, 10 ],
showToggle : false,
striped : true,
silentSort : false
};
if (params) {
$.extend(defaultParams, params);
}
$('#' + id).bootstrapTable(defaultParams);
},
clean : function(tableId) {
$('#' + tableId).bootstrapTable('removeAll');
},
search : function(tableId) {
$('#' + tableId).bootstrapTable('getOptions').pageNumber = 1;
$('#' + tableId).bootstrapTable('refresh');
}
},
};
})();
- 编写 kekanGroupController.java
package com.ITGodRoad.controller;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ITGodRoad.entity.KeKanGroup;
import com.alibaba.fastjson.JSONArray;
@Controller
@RequestMapping(value = "/main")
public class KeKanGroupController {
//主页面展示
@RequestMapping(value = "/show.do")
public String showKeKanGroup() {
return "keKanGroup";
}
//生成json格式的数据
@RequestMapping(value = "/getAllKeKanGroup.do", method = RequestMethod.GET)
@ResponseBody
public String getAllKeKanGroup(KeKanGroup params) throws IOException, ServletException {
String resource = "MyBatisConfig.xml";
InputStream is = Resources.getResourceAsStream(resource);
SqlSessionFactory sessionFactory = new SqlSessionFactoryBuilder().build(is);
SqlSession sqlsession = sessionFactory.openSession();
String statement = "com.ITGodRoad.mapping.KeKanGroup.getAllKeKanGroup";
List<KeKanGroup> list = sqlsession.selectList(statement);
//控制台显示数据
for (KeKanGroup keKanGroup : list) {
System.out.println(keKanGroup.getId() + "\t" + keKanGroup.getName() + "\t" + keKanGroup.getName_kana()
+ "\t" + keKanGroup.getSex());
}
String json = JSONArray.toJSONString(list);
System.out.println(json);
return json;
}
}
- 运行,输入网址 “http://localhost:8080/DigIntoSpringMVC/main/show.do” 发现日期显示格式有问题。
- 改写 kekanGroup.js
$(document).ready(function() {
initLayout();
});
// 画面スタイルの初期化
function initLayout() {
var params = {
columns: [{
field: 'id',
title: '順番',
}, {
field: 'name',
title: '名前'
}, {
field: 'name_kana',
title: '平仮名',
}, {
field: 'sex',
title: '性別',
}, {
field: 'birthday',
title: '出生年月日',
//加入格式化函数
formatter: 'dateTimeToString'
}],
url: Util.initRestfulUrl("getAllKeKanGroup"),
idField: "id"
};
Util.table.init('table', params);
}
//实现日期格式化
function dateTimeToString(value) {
if (value != null) {
var date = new Date(value);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var datetime = year + '-' + month + '-' + day;
return datetime;
}
return "-";
}
- 运行,输入网址 “http://localhost:8080/DigIntoSpringMVC/main/show.do” 开心的像朵花~
【每日一面】
如何通过JSONP实现跨域
JSONP(JSON with Padding):由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用 html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
原理: Script 标签本身的功能是异步加载js并且会以js的方式解析执行。一旦在script的标签里加入src的属性,浏览器执行到这个标签时就回去请求指定的地址,如果服务器返回的是js格式的代码,甚至可以是js的函数,只要是能被js解析的,都可以被执行。
Attention: jsonp方式不支持POST方式跨域请求,就算指定成POST方式,也会自动转为GET方式;如果后端设置成POST方式,那就请求不了了。跨域请求需要服务端配合,设置callback,才能完成跨域请求。
方法一:创建script,指定src等属性,插入到head执行。
//onload、onreadystatechange 写在src赋值之前,防止载入js太快而没有给onload、onreadystatechange 赋值
var JSONP = document.createElement("script") ;
//FF:onload IE:onreadystatechange
JSONP.onload = JSONP.onreadystatechange = function(){
//onreadystatechange,仅IE
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
alert($("#demo").html());
JSONP.onload = JSONP.onreadystatechange = null//清内存,防止IE memory leaks
}
}
JSONP.type = "text/javascript";
JSONP.src = "http://www.nowamagic.net/js/jquery.js";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);
***********************************************************************************************
方法二:使用"jquery"指定返回数据类型为"jsonp",用回调函数来执行。
<script>
$(document).ready(function () {
$("#btn").click(function) {
$.ajax({
url: "http://localhost:8888/ITGodRoad",
type: "GET",
//指定服务器返回的数据类型
dataType: "jsonp",
success: function(data) {
//json对象转成字符串
var result = JSON.stringify(data);
$("#text").val(result);
}
});
});
});
</script>