BootStrap 可编辑表Table格

让我们来详细讲解一下Bootstrap可编辑表格！

Bootstrap可编辑表格

Bootstrap可编辑表格是一种常用的前端组件，它可以让用户在网页上直接进行表格的编辑操作，而无需通过后端来实现。

通过使用Bootstrap可编辑表格，我们可以方便地实现数据的展示和编辑，从而增强网站的用户交互性和数据处理能力。

以下是实现Bootstrap可编辑表格的完整攻略。

第一步：引入Bootstrap库

要使用Bootstrap可编辑表格，我们首先需要引入Bootstrap库。可以通过CDN引入，也可以下载本地文件引入。

常规引入方式的代码如下所示：

<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

<!-- 引入Bootstrap的JavaScript库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

第二步：创建表格

我们可以通过直接在HTML代码中创建表格，也可以通过JavaScript代码动态创建表格。在这里，我们以直接在HTML代码中创建表格为例进行说明。

Bootstrap可编辑表格的基本格式如下所示：

<table class="table">
    <thead>
        <tr>
            <th>列名1</th>
            <th>列名2</th>
            ...
            <th>列名N</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>行1列1</td>
            <td>行1列2</td>
            ...
            <td>行1列N</td>
        </tr>
        <tr>
            <td>行2列1</td>
            <td>行2列2</td>
            ...
            <td>行2列N</td>
        </tr>
        ...
        <tr>
            <td>行M列1</td>
            <td>行M列2</td>
            ...
            <td>行M列N</td>
        </tr>
    </tbody>
</table>

其中，class="table"是表示这是一个Bootstrap表格的标志。

第三步：引入Bootstrap Editable库

Bootstrap Editable是Bootstrap可编辑表格的核心库，它提供了一系列的API，用于实现表格的编辑功能。

我们可以通过CDN引入Bootstrap Editable库，也可以下载本地文件进行引入。

常规引入方式的代码如下所示：

<!-- 引入Bootstrap Editable样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap3-editable/1.5.1/css/bootstrap-editable.css">

<!-- 引入Bootstrap Editable的JavaScript库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap3-editable/1.5.1/js/bootstrap-editable.min.js"></script>

第四步：使用Bootstrap Editable编辑表格

在引入了Bootstrap库和Bootstrap Editable库之后，我们就可以愉快地开始使用Bootstrap可编辑表格了。

Bootstrap Editable提供了一系列的API，用于实现表格的编辑操作。我们可以通过对表格和表格中的元素进行不同的设置，来实现表格的编辑操作。

4.1 表格整体的可编辑设置

要实现整张表格的可编辑操作，我们可以通过以下代码进行设置：

<!-- 表格中的内容可以被编辑 -->
<table class="table">
    <thead>
        <!-- 表头不可编辑 -->
        ...
    </thead>
    <!-- 整张表格可编辑 -->
    <tbody data-role="table" data-url="save.php" data-type="text" data-pk="1">
        ...
    </tbody>
</table>

其中，data-role="table"表示整张表格是可编辑的；data-url="save.php"表示表格中的内容修改后将会发起一个POST请求到save.php页面进行保存；data-type="text"表示表格中元素的类型是文本；data-pk="1"表示表格中元素的主键为1。

4.2 表格单元格的可编辑设置

要实现表格单元格的可编辑操作，我们可以通过以下代码进行设置：

<!-- 表格中的内容可以被编辑 -->
<table class="table">
    <thead>
        <!-- 表头不可编辑 -->
        ...
    </thead>
    <tbody>
        <tr>
            <!-- 单元格可编辑 -->
            <td data-role="td" data-name="username" data-type="text" data-pk="1">Tom</td>
            ...
        </tr>
    </tbody>
</table>

其中，data-role="td"表示该单元格是可编辑的；data-name="username"表示名称为username；data-type="text"表示单元格中元素的类型是文本；data-pk="1"表示单元格中元素的主键为1。

4.3 表格列的可编辑设置

要实现表格列的可编辑操作，我们可以通过以下代码进行设置：

<!-- 表格中的内容可以被编辑 -->
<table class="table">
    <thead>
        <tr>
            <!-- 列名1 不可编辑 -->
            <th>列名1</th>
            <!-- 列名2 可编辑 -->
            <th data-role="column" data-name="email" data-type="text" data-pk="1">列名2</th>
            <!-- 列名3 可编辑 -->
            <th data-role="column" data-name="address" data-type="text" data-pk="2">列名3</th>
            ...
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

其中，data-role="column"表示该列是可编辑的；data-name="email"表示该列的名称是email；data-type="text"表示该列中元素的类型是文本；data-pk="1"表示该列中元素的主键为1。

示例1

以下是一个实现基本可编辑表格的示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap可编辑表格</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap3-editable/1.5.1/css/bootstrap-editable.css">
</head>
<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>联系方式</th>
                </tr>
            </thead>
            <tbody data-role="table" data-url="save.php" data-type="text" data-pk="1">
                <tr>
                    <td data-role="td" data-name="name" data-type="text" data-pk="1">张三</td>
                    <td data-role="td" data-name="age" data-type="text" data-pk="2">24</td>
                    <td data-role="td" data-name="gender" data-type="select" data-pk="3" data-source="[{'value':'男','text':'男'}, {'value':'女','text':'女'}]">男</td>
                    <td data-role="td" data-name="phone" data-type="text" data-pk="4">12345678910</td>
                </tr>
                <tr>
                    <td data-role="td" data-name="name" data-type="text" data-pk="5">李四</td>
                    <td data-role="td" data-name="age" data-type="text" data-pk="6">27</td>
                    <td data-role="td" data-name="gender" data-type="select" data-pk="7" data-source="[{'value':'男','text':'男'}, {'value':'女','text':'女'}]">男</td>
                    <td data-role="td" data-name="phone" data-type="text" data-pk="8">13123456789</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap3-editable/1.5.1/js/bootstrap-editable.min.js"></script>
    <script>
        $(function () {
            $('select').editable();
            $('td[data-role="td"]').editable({
                success: function (response, newValue) {
                    $(this).html(newValue);
                }
            });
            $('th[data-role="column"]').editable({
                success: function (response, newValue) {
                    var index = $(this).index();
                    $('table tr').each(function () {
                        $(this).find('td:eq(' + index + ')').html(newValue);
                    });
                    $(this).html(newValue);
                }
            });
        });
    </script>
</body>
</html>

示例2

以下是一个实现实时提交和动态增加行的可编辑表格的示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap可编辑表格</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap3-editable/1.5.1/css/bootstrap-editable.css">
</head>
<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>联系方式</th>
                </tr>
            </thead>
            <tbody data-role="table" data-url="save.php" data-type="text" data-pk="1">
                <tr>
                    <td data-role="td" data-name="name" data-type="text" data-pk="1">张三</td>
                    <td data-role="td" data-name="age" data-type="text" data-pk="2">24</td>
                    <td data-role="td" data-name="gender" data-type="select" data-pk="3" data-source="[{'value':'男','text':'男'}, {'value':'女','text':'女'}]">男</td>
                    <td data-role="td" data-name="phone" data-type="text" data-pk="4">12345678910</td>
                </tr>
                <tr>
                    <td data-role="td" data-name="name" data-type="text" data-pk="5">李四</td>
                    <td data-role="td" data-name="age" data-type="text" data-pk="6">27</td>
                    <td data-role="td" data-name="gender" data-type="select" data-pk="7" data-source="[{'value':'男','text':'男'}, {'value':'女','text':'女'}]">男</td>
                    <td data-role="td" data-name="phone" data-type="text" data-pk="8">13123456789</td>
                </tr>
            </tbody>
        </table>
        <button id="add-row" class="btn btn-primary">添加一行</button>
        <button id="submit" class="btn btn-primary">提交修改</button>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap3-editable/1.5.1/js/bootstrap-editable.min.js"></script>
    <script>
        $(function () {
            $('select').editable();
            $('td[data-role="td"]').editable({
                success: function (response, newValue) {
                    $(this).html(newValue);
                }
            });
            $('th[data-role="column"]').editable({
                success: function (response, newValue) {
                    var index = $(this).index();
                    $('table tr').each(function () {
                        $(this).find('td:eq(' + index + ')').html(newValue);
                    });
                    $(this).html(newValue);
                }
            });

            // 添加一行
            $('#add-row').click(function () {
                var len = $('table tbody tr').length;
                var html = '<tr><td data-role="td" data-name="name" data-type="text" data-pk="' + (len + 1) + '">新的姓名</td><td data-role="td" data-name="age" data-type="text" data-pk="' + (len + 2) + '">0</td><td data-role="td" data-name="gender" data-type="select" data-pk="' + (len + 3) + '" data-source="[{' + "'value':'男','text':'男'" + '}, {' + "'value':'女','text':'女'" + '}]">男</td><td data-role="td" data-name="phone" data-type="text" data-pk="' + (len + 4) + '">0</td></tr>';
                $('table tbody').append(html);
                $('td[data-role="td"]').editable({
                    success: function (response, newValue) {
                        $(this).html(newValue);
                    }
                });
                $('select').editable();
            });

            // 提交修改
            $('#submit').click(function () {
                $('tbody[data-role="table"]').editable('submit', {
                    url: 'save.php',
                    ajaxOptions: {
                        type: 'POST',
                        dataType: 'json'
                    },
                    success: function (response, newValue) {
                        console.log(response);
                        console.log(newValue);
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

这就是Bootstrap可编辑表格的完整攻略，希望对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootStrap 可编辑表Table格 - Python技术站