Bootstrap_table与Java整合使用

发布时间:2020-06-21 06:40:48 作者:万和IT教育
来源:网络 阅读:2893

1. 什么是Bootstrap-table?

Bootstrap_table与Java整合使用

2. Bootstrap-table两种模式

3. 加载css和js

<!-- 核心 css -->
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugin/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="plugin/bootstrap-editable/bootstrap-editable.css">

<!-- 核心 js -->
<script src="plugin/jquery.min.js"></script>
<script src="plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="plugin/bootstrap-table/src/bootstrap-table.js"></script>
<script src="plugin/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="plugin/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>

4. client模式

5. server 模式

单页版

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'table.jsp' starting page</title>
<!-- 核心 css -->
<link rel="stylesheet" href="third/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
    href="third/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet"
    href="third/bootstrap-editable/bootstrap-editable.css">

</head>

<body>
    <div class="container">
        <!-- 如果有条件,查询表单ID名必须为condition-form --> 
        <form id="condition-form">
            用户名<input name="name" value="a"> 年龄<input name="age"
                value="1"> <input type="button" value="搜索">
        </form>

        <div id="toolbar">
            <button id="remove" class="btn btn-danger">
                <i class="glyphicon glyphicon-remove"></i> Delete
            </button>
            <button id="add" class="btn btn-primary">
                <i class="glyphicon glyphicon-ok"></i> Insert
            </button>
        </div>
        <!-- 加载bootstraptable的表格,ID名称必须为bootstrap-table -->
        <table id="bootstrap-table"></table>
    </div>

    <!-- 核心 js -->
    <script src="third/jquery/jquery-3.3.1.min.js"></script>
    <script src="third/bootstrap/js/bootstrap.min.js"></script>
    <script src="third/bootstrap-table/src/bootstrap-table.js"></script>
    <script
        src="third/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
    <script
        src="third/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>

    <script type="text/javascript">

        $("input[type='button']").click(function() {
            $("#bootstrap-table").bootstrapTable("refresh")
        });

        //bootstrap-table初始化
        $("#bootstrap-table").bootstrapTable({
            url : "StudentServlet2", //请求后台的URL(*)

            // 此间是与client不一样的地方=======================开始
            contentType : "application/x-www-form-urlencoded",
            sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*)
            //修改请求参数,不设置则有默认值 ,返回值必须是一个对象
            queryParams : function(params) {
                var search = {};
                //查询条件 
                $.each($("#condition-form").serializeArray(), function(i, field) {
                    search[field.name] = field.value
                });
                search.pageSize = params.limit;
                search.pageNum = params.offset / params.limit + 1;
                search.orderByColumn = params.sort;
                search.isAsc = params.order;
                return search;
            },
            method : 'POST', //请求方式(*)
            toolbar : '#toolbar', //工具按钮用哪个容器
            search : false, //是否显示表格搜索
            showFooter : false, //显示底部,默认不显示
            sortName : 'name',
            sortOrder : "asc", //排序方式
            // 此间是与client不一样的地方=======================结束

            striped : true, //是否显示行间隔色
            cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination : true, //是否显示分页(*)
            showPaginationSwitch : true, //显示切换分页

            showFullscreen : false, //显示全屏
            showHeader : true, //显示头部,默认显示
            showExport : true, //显示导出
            showColumns : true, //是否显示所有的列(选择显示的列)
            showRefresh : true, //是否显示刷新按钮
            sortable : true, //是否启用排序
            pageNumber : 1, //初始化加载第一页,默认第一页,并记录
            pageSize : 3, //每页的记录行数(*)
            pageList : [ 3, 6, 9 ], //可供选择的每页的行数(*)

            strictSearch : true,
            minimumCountColumns : 2, //最少允许的列数
            clickToSelect : true, //是否启用点击选中行
            uniqueId : "id", //每一行的唯一标识,一般为主键列
            showToggle : true, //是否显示详细视图和列表视图的切换按钮
            cardView : false, //是否显示详细视图
            detailView : false, //是否显示父子表
            columns : [

                {
                    field : 'state',
                    checkbox : true,
                    align : 'center',
                    valign : 'middle'
                },
                {
                    title : '学号',
                    field : 'id',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },
                {
                    title : '姓名 ',
                    field : 'name',

                    sortable : true,
                    editable : false,
                    align : 'center'
                }, {
                    title : '年龄',
                    field : 'age',

                    sortable : true,
                    editable : false,
                    align : 'center'
                }, {
                    title : '性别',
                    field : 'gender',
                    sortable : true,
                    align : 'center'
                }, {
                    title : '操作',
                    field : 'operate',
                    align : 'center',
                }

            ]
        });
    </script>
</body>
</html>

封装版

推荐阅读:
  1. hive与hbase整合
  2. PHP与nginx整合

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap table java进阶

上一篇:HTML 5 标签、属性、事件及浏览器兼容性速查表

下一篇:(7.0系统设备)安卓神器XPOSED框架没Root安装指南

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》