《前端》bootstraptable行数据的获取-2021年2月1日

本文链接：https://blog.youkuaiyun.com/bellediao/article/details/113496375

本文介绍如何利用Vue.js和Bootstrap Table插件创建一个具有响应式设计的交互式表格。通过实例展示了如何设置表格的基本配置，包括列定义、数据绑定、分页和事件监听等功能，并解释了如何通过JavaScript代码实现表格数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>try</title>
    <!-- 引用 css-->
    <link rel="stylesheet" href="./lib/css/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="./lib/css/element-ui.css">
    <link rel="stylesheet" href="./lib/css/bootstrap-table.min.css">
    <!-- 引用js=================== -->
    <script src="./lib/js/jquery-3.5.1.min.js"></script>
    <script src="./lib/js/vue-2.6.12.js"></script>
    <script src="./lib/js/bootstrap-3.3.7.min.js"></script>
    <script src="./lib/js/bootstrap-table.min.js"></script>
    <script src="./lib/js/element-ui.js"></script>
</head>

<body>
    <div id='td' style="padding-left: 15px;padding-right:15px;">
        <div>
            <h2>总表</h2>
            <table id="tableDetails1" class="table table-hover table-bordered" style="color: #000000">
            </table>
        </div>

    </div>
    <script>
        var vm = new Vue({
            el: "#td",
            data: {
            },
            mounted: function () {
                var that = this;
                that.$nextTick(function () {
                    that.tableDetails1();
                    $("#tableDetails1").on("click-cell.bs.table", function ($element, field, row, value) {         //点击触发事件
                        alert("field:" + field);
                        alert("row:" + row);
                        alert("value:" + JSON.stringify(value));
                        alert("当前点击的是：工号为" + value.jobNum + "," + field + "=" + row + "的记录")
                    });
                })
            },
            methods: {
                tableDetails1() {
                    $('#tableDetails1').bootstrapTable('destroy').bootstrapTable({
                        singleSelect: true,
                        clickToSelect: true,
                        showColumns: true,
                        cache: false,
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 10,
                        pageList: [10, 25, 50, 100],
                        columns: [{ // table
                            field: 'jobNum',
                            title: '工号',
                            width: 80,
                            visible: true,
                            align: 'center',
                        }, {
                            field: 'accountUnit',
                            title: '核算单位',
                            width: 80,
                            visible: true,
                            align: 'center',
                        }, {
                            field: 'name',
                            title: '姓名',
                            width: 80,
                            visible: true,
                            align: 'center',
                        },],
                        data: [{
                            jobNum: 1,
                            accountUnit: 803,
                            name: "Bella",
                        }, {
                            jobNum: 2,
                            accountUnit: 804,
                            name: "jean",
                        }, {
                            jobNum: 3,
                            accountUnit: 805,
                            name: "ter",
                        }],
                    });
                    $("#tableDetails1").on("click-cell.bs.table", function ($element, field, row, value) {
                        alert("field:" + field);
                        alert("row:" + row);
                        alert("value:" + value.jobNum);
                        alert("当前点击的是：工号为" + value.jobNum + "," + field + "=" + row + "的记录")
                     });
                },
            },

        })
    </script>

</body>

</html>