一个Bootstrap Table的基本实例

最新推荐文章于 2024-05-23 11:57:15 发布
最新推荐文章于 2024-05-23 11:57:15 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luxinghong199106/article/details/89289125
版权

基于Bootstrap4 和 FontAwesome5.8
代码：

<!doctype html>
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table-locale-all.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>

    <style>
        .select,
        #locale {
            width: 100%;
        }

        .like {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="select">
        <select class="form-control" id="locale">
            <option value="af-ZA">af-ZA</option>
            <option value="ar-SA">ar-SA</option>
            <option value="ca-ES">ca-ES</option>
            <option value="cs-CZ">cs-CZ</option>
            <option value="da-DK">da-DK</option>
            <option value="de-DE">de-DE</option>
            <option value="el-GR">el-GR</option>
            <option value="en-US" selected>en-US</option>
            <option value="es-AR">es-AR</option>
            <option value="es-CL">es-CL</option>
            <option value="es-CR">es-CR</option>
            <option value="es-ES">es-ES</option>
            <option value="es-MX">es-MX</option>
            <option value="es-NI">es-NI</option>
            <option value="es-SP">es-SP</option>
            <option value="et-EE">et-EE</option>
            <option value="eu-EU">eu-EU</option>
            <option value="fa-IR">fa-IR</option>
            <option value="fi-FI">fi-FI</option>
            <option value="fr-BE">fr-BE</option>
            <option value="fr-FR">fr-FR</option>
            <option value="he-IL">he-IL</option>
            <option value="hr-HR">hr-HR</option>
            <option value="hu-HU">hu-HU</option>
            <option value="id-ID">id-ID</option>
            <option value="it-IT">it-IT</option>
            <option value="ja-JP">ja-JP</option>
            <option value="ka-GE">ka-GE</option>
            <option value="ko-KR">ko-KR</option>
            <option value="ms-MY">ms-MY</option>
            <option value="nb-NO">nb-NO</option>
            <option value="nl-NL">nl-NL</option>
            <option value="pl-PL">pl-PL</option>
            <option value="pt-BR">pt-BR</option>
            <option value="pt-PT">pt-PT</option>
            <option value="ro-RO">ro-RO</option>
            <option value="ru-RU">ru-RU</option>
            <option value="sk-SK">sk-SK</option>
            <option value="sv-SE">sv-SE</option>
            <option value="th-TH">th-TH</option>
            <option value="tr-TR">tr-TR</option>
            <option value="uk-UA">uk-UA</option>
            <option value="ur-PK">ur-PK</option>
            <option value="uz-Latn-UZ">uz-Latn-UZ</option>
            <option value="vi-VN">vi-VN</option>
            <option value="zh-CN">zh-CN</option>
            <option value="zh-TW">zh-TW</option>
        </select>
    </div>

    <div id="toolbar">
        <button id="remove" class="btn btn-danger" disabled>
            <i class="glyphicon glyphicon-remove"></i> Delete
        </button>
    </div>
    <table
            id="table"
            data-toolbar="#toolbar"
            data-search="true"
            data-show-refresh="true"
            data-show-toggle="true"
            data-show-fullscreen="true"
            data-show-columns="true"
            data-detail-view="true"
            data-show-export="true"
            data-detail-formatter="detailFormatter"
            data-minimum-count-columns="2"
            data-show-pagination-switch="true"
            data-pagination="true"
            data-id-field="id"
            data-page-list="[10, 25, 50, 100, ALL]"
            data-show-footer="true"
            data-side-pagination="server"
            data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
            data-response-handler="responseHandler">
    </table>

    <script>
        var $table = $('#table')
        var $remove = $('#remove')
        var selections = []

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        function responseHandler(res) {
            $.each(res.rows, function (i, row) {
                row.state = $.inArray(row.id, selections) !== -1
            })
            return res
        }

        function detailFormatter(index, row) {
            var html = []
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>')
            })
            return html.join('')
        }

        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                '<i class="fa fa-heart"></i>',
                '</a>  ',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="fa fa-trash"></i>',
                '</a>'
            ].join('')
        }

        window.operateEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like action, row: ' + JSON.stringify(row))
            },
            'click .remove': function (e, value, row, index) {
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                })
            }
        }

        function totalTextFormatter(data) {
            return 'Total'
        }

        function totalNameFormatter(data) {
            return data.length
        }

        function totalPriceFormatter(data) {
            var field = this.field
            return '$' + data.map(function (row) {
                return +row[field].substring(1)
            }).reduce(function (sum, i) {
                return sum + i
            }, 0)
        }

        function initTable() {
            $table.bootstrapTable('destroy').bootstrapTable({
                height: 550,
                locale: $('#locale').val(),
                columns: [
                    [{
                        field: 'state',
                        checkbox: true,
                        rowspan: 2,
                        align: 'center',
                        valign: 'middle'
                    }, {
                        title: 'Item ID',
                        field: 'id',
                        rowspan: 2,
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        footerFormatter: totalTextFormatter
                    }, {
                        title: 'Item Detail',
                        colspan: 3,
                        align: 'center'
                    }],
                    [{
                        field: 'name',
                        title: 'Item Name',
                        sortable: true,
                        footerFormatter: totalNameFormatter,
                        align: 'center'
                    }, {
                        field: 'price',
                        title: 'Item Price',
                        sortable: true,
                        align: 'center',
                        footerFormatter: totalPriceFormatter
                    }, {
                        field: 'operate',
                        title: 'Item Operate',
                        align: 'center',
                        events: window.operateEvents,
                        formatter: operateFormatter
                    }]
                ]
            });
            $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table',
                function () {
                    $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

                    // save your data, here just save the current page
                    selections = getIdSelections()
                    // push or splice the selections if you want to save all data selections
                })
            $table.on('expand-row.bs.table', function (e, index, row, $detail) {
                if (index % 2 === 1) {
                    $detail.html('Loading from ajax request...')
                    $.get('LICENSE', function (res) {
                        $detail.html(res.replace(/\n/g, '<br>'))
                    })
                }
            })
            $table.on('all.bs.table', function (e, name, args) {
                console.log(name, args)
            })
            $remove.click(function () {
                var ids = getIdSelections()
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                })
                $remove.prop('disabled', true)
            })
        }

        $(function () {
            initTable()

            $('#locale').change(initTable)
        })
    </script>
</body>

效果如下：
在这里插入图片描述

head_Me
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap table实例
fengcai0123的专栏
03-21 2046
一、bootstrap table 最简单实例 二、bootstrap table 获取点击行数据+弹窗显示编辑 &lt;script type="text/javascript"&gt; $(function () { $('#table1').bootstrapTable({ url: '/sell/managerSellJson?pageNum=1', cache:f...
Bootstrap Table实例
qq_38822390的博客
05-27 2999
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 代码： <!DOCTYPE html> <html lang="en"> <head> <me...
Bootstrap Table案例 | Bootstrap Table Demo
Vin Cente
08-10 807
项目场景： 首先，我写的是.Net的项目，创建项目的时候自带了一些Jquery和Bootstrap的引用，从此我就走上了错误路。 项目引用的JQuery版本为：3.6.0 项目引用的Bootstrap版本为：3.4.1 下载的Bootstrap-Table版本为：1.8.1 下载的Bootstrap-Table-zh-CN版本为：1.8.1 下载的Bootstrap-Table-Edit版本为：1.0 下载的Bootstrap-Select版本为：1.0 下载的Bootstrap-DateT
Bootstrap Table数据表格的使用指南
最新发布
2301_82243979的博客
05-23 982
数据源得到了，就可以看到渲染表格的效果了，如图。单表的基本数据显示是没有问题了，但关联表的数据怎么显示呢。下面来看一下关联表数据的显示。在渲染表格的JS中的columns属性值中添加如下代码。title: ‘班级’,formatter属性值对应的是一个方法名，此方法返回需要显示关联表中的数据。其中参数value表示field对应实体类中的值，row为当前行的数据，index为当前行的索引。因为tbClass为实体类中关联的班级表，索引直接通过value.name就可以得出班级名称。
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
bootstrapTable使用示例.rar
04-14
bootstrapTable组件的使用示例，里面包含父子表、treegrid以及结合knockoutjs的使用示例。博客园博主本人资源，有问题可以联系。
BootStrap-table.js 官网下载
11-16
bootstarp-table.js
bootstrap table ajax 示例
10-16
使用 maven 创建的 基于 bootstrap table 的示例代码 使用 ajax 后台分页获取查询数据
基于Springboot+Bootstrap的文件管理全套解决方案（文件列表、上传、预览、下载、删除、打包下载等）
hanxiaozhang的博客
05-01 8266
前言： 最近，不知道是不是最后一搏，事业群上层领导要求7天内完成ABS项目中保理系统的一期开发。需求评审会后，我发现各个功能模块都有大量的文件材料展示与上传，为了提高开发效率，我与组长商量，我先开发文件模块，为其他同事提供公共方法，减少重复工作。 使用的前端技术栈：Bootstrap、Bootstrap-table、layer.js、layui.js、jquery.media.js 设计思路...
bootstrap table实例详解
08-31
在本文中，我们将深入探讨 Bootstrap Table 的实例，理解其基本用法和核心功能，以及如何通过 JavaScript 代码进行自定义配置。 首先，我们看到在示例代码中，`buildColumnsStyle` 函数用于获取表格的列信息。它...
JS组件Bootstrap Table使用实例分享
10-22
然后，我们可以创建一个基本的表格结构，通过 `id` 属性来初始化 Bootstrap Table。 ```html <table id="table" data-pagination="true"> 标题 时间 </table> ``` 接下来，我们用 JavaScript 来初始化这...
值得分享的bootstrap table实例
09-01
本实例将展示如何使用 Bootstrap Table 来创建一个具备基本功能的数据表格。 首先，在 HTML 结构中，我们看到一个 `#toolbar` 的 div 元素，它是用于添加操作按钮的容器，比如这里的 "添加记录" 按钮。点击这个按钮...
BootstrapTable refresh 方法使用实例简单介绍
02-06
在 BootstrapTable 中，`refresh` 方法接受一个可选的参数对象，这个对象可以包含多个配置选项以定制刷新行为。在提供的示例中，我们看到了以下关键配置： 1. **url**: 这是用于获取新数据的服务器端 API 的 URL。...
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 1万+
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
bootstrap-table表格详解实例
快乐分享
06-17 1万+
废话不多说,下面实例开始(可以直接拷) 1.引入资源部分 &lt;!-- jq --&gt; &lt;script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt; &lt;!-- 样式 --&gt; &lt;link rel="stylesheet" href="//cdnjs.clo
bootstrap table使用实例
scscdslt的博客
12-07 1940
bootstrap table使用实例
BootstrapTable简单的例子
WangCode
11-13 480
BootstrapTable简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Demo</title> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <link rel="stylesheet" href=
Bootstrap框架----DataTables列表示例
热门推荐
直到世界的尽头
01-30 1万+
简介 DataTables是一款比较好用的可以在bootstrap中使用的jquery表格插件。 它是一个高度灵活的工具，可以为任何HTML表格添加高级的交互功能。 DataTables特点 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Founda...
Bootstrap Table API中文详解及完整翻译(实例与参数)
在HTML代码中，通过JavaScript调用`bootstrapTable`函数来初始化一个表格，如示例中的`$('#table').bootstrapTable({ ... })`。开发者可以通过这个函数传递配置对象，设置表格的行为，如搜索功能（`search: true`）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值