bootstrap-table 实战示例

最新推荐文章于 2025-07-24 11:42:50 发布

原创

最新推荐文章于 2025-07-24 11:42:50 发布 · 634 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

这个示例展示了如何使用bootstrap-table实现CRUD操作。它包括一个创建、更新和删除表格数据的功能，以及分页、搜索和列选择。页面加载表格数据，并提供了编辑和删除行的交互操作。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Table</title>
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/bootstrap-table.min.css">
    <style>
        .mr10 { margin-right: 10px; }
        .alert {
            padding: 0 14px;
            margin-bottom: 0;
            display: inline-block;
        }
    </style>
</head>

<body>
<div class="container">
    <h1>CRUD Table</h1>
    <p class="toolbar">
        <a class="create btn btn-secondary" href="javascript:">Create Item</a>
        <span class="alert"></span>
    </p>
    <table id="table" data-pagination="true"></table>
</div>
<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" name="name" placeholder="Name">
                </div>
                <div class="form-group">
                    <label>Stars</label>
                    <input type="number" class="form-control" name="stargazers_count" placeholder="Stars">
                </div>
                <div class="form-group">
                    <label>Forks</label>
                    <input type="number" class="form-control" name="forks_count" placeholder="Forks">
                </div>
                <div class="