【零基础小白的华丽蜕变】项目中引入表格神器 BootstrapTable

最新推荐文章于 2023-03-24 07:00:00 发布

おうせき碩

最新推荐文章于 2023-03-24 07:00:00 发布

阅读量381

点赞数 4

分类专栏：零基础小白的华丽蜕变文章标签： bootstrap jquery html javascript

本文链接：https://blog.csdn.net/weixin_44598507/article/details/110433986

版权

零基础小白的华丽蜕变专栏收录该内容

14 篇文章 2 订阅

订阅专栏

[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">順&nbsp;&nbsp;番</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">名&nbsp;&nbsp;前</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">性&nbsp;&nbsp;別</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>

おうせき碩

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
【零基础小白的华丽蜕变】项目中引入表格神器 BootstrapTable

 [catalog]  1. 了解 Bootstrap Table 2. Bootstrap Table下载及安装 3. 项目中引入 Bootstrap Table 相关文件 4. 通过数据属性以表格形式显示数据 5. 通过 JavaScript 以表格形式显示数据 6. 修改数据源使表格显示数据 7.【每日一面】如何通过JSONP实现跨域  1. 了解 Bootstrap TableBootstrap Table（引导表
复制链接

扫一扫