1. Python技术站首页
  2. css

BootStrap 可编辑表Table格

• css
yizhihongxing

让我们来详细讲解一下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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css自适应宽度 多种方法实现宽度自适应的水平居中

    CSS自适应宽度和水平居中是前端开发中经常使用的技巧。在不同的场景下，有多种方法可以实现这两个效果。下面，我们将以两个示例为例，讲解多种实现宽度自适应和水平居中的方法。 示例一：弹性布局实现自适应和水平居中 弹性布局是CSS3的新特性，可以轻松实现常见的布局效果。在这个示例中，我们将以一个包含两个盒子的父元素为例，来实现自适应和水平居中的效果。 HTML代码…

    css 2023年6月10日
    00

  • firefox推荐与个人理解的css书写顺序

    当我们编写CSS样式时，书写顺序很重要，它直接关系到样式的继承和优先级。为了提高CSS代码可读性，方便后期维护，我们可以采用firefox推荐的CSS书写顺序。 1. Firefox 推荐的 CSS书写顺序 根据FireFox推荐的CSS书写顺序，我们优先编写如下部分的样式代码： 布局定位属性（display、position、float、clear等） 自…

    css 2023年6月10日
    00

  • 深入理解CSS @font-face性能优化

    关于“深入理解CSS @font-face性能优化”的完整攻略，我这里详细讲解一下。攻略主要包括以下几个方面： 1. @font-face 简介 定义：@font-face 是CSS中一种用于定义字体资源的规则。 作用：提供网页上所需的任何字体，而不需要依赖用户在本地安装该字体。 浏览器支持度： IE6-8只支持EOT格式的字体文件； IE9+、Firefo…

    css 2023年6月10日
    00

  • js+css在交互上的应用

    我会尽力详细讲解“js+css在交互上的应用”的完整攻略。在本次讲解中，我将着重介绍如何使用js和css实现网站的交互特效。下面是详细的步骤和示例操作。 1. 使用CSS实现动态效果 CSS可以帮助我们实现很多简单的动态效果，例如：鼠标移动到元素上时改变元素的颜色或大小，展示隐藏的元素等。 1.1 鼠标移动到元素上改变元素的颜色 要实现这一效果，我们可以使用…

    css 2023年6月10日
    00

  • jQuery插件实现带圆点的焦点图片轮播切换

    实现带圆点的焦点图片轮播切换的关键在于利用jQuery插件来实现，以下是实现的详细攻略： 步骤一，编写HTML结构 首先，需要编写HTML结构，包括轮播图图片和对应的圆点： <div class="slider"> <ul class="slider-list"> <li><i…

    css 2023年6月11日
    00

  • css pointer-events属性实现下面元素可点击

    CSS中的pointer-events属性用于指定在何种情况下元素可以被鼠标事件所触发。该属性可以接受以下几个值： auto：默认值，元素的鼠标事件会触发并产生相应效果； none：元素不会响应鼠标事件，鼠标事件穿透元素； visiblePainted：元素是可见的，并响应鼠标事件，但此时鼠标限制在元素的画布中，穿透元素后不会触发子元素的鼠标事件； visi…

    css 2023年6月10日
    00

  • CSS样式的分类介绍(基础知识)

    下面是详细的“CSS样式的分类介绍(基础知识)”攻略。 一、CSS样式的分类 在CSS中，样式可以分为三种类型：内联样式、内部样式表和外部样式表。 1. 内联样式 内联样式即在HTML元素中添加样式属性，如下所示： <p style="color: red;">这是一段红色的文本</p> 内联样式是较为简单的CSS…

    css 2023年6月9日
    00

  • js实现单一html页面两套css切换代码

    要实现单一 HTML 页面两套 CSS 切换，可以使用 JavaScript 来动态修改 HTML 的 link 标签的 href 属性。下面是实现的详细步骤： 1. 在 HTML 文件中引入两套 CSS 文件 首先将两套 CSS 文件引入到 HTML 文件中，分别在 head 标签中加入两个 link 标签，并为它们加上类名或 ID 以便在 JavaScr…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部