Bootstrap Table 直接编辑示例 (Bootstrap V3 V5)

发表于2025年7月25日由admin

Bootstrap V3 代码：

Code: [全选] [Expand/Collapse]
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Bootstrap Table 示例 (Bootstrap 3)</title>
  8.     <!– Bootstrap 3 CSS –>
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  10.     <!– Bootstrap Table CSS –>
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css">
  12.     <!– Bootstrap Table Editable CSS –>
  13.     <link rel="stylesheet"
  14.        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap3-editable/css/bootstrap-editable.css">
  15.     <!– Bootstrap Table Export CSS –>
  16.     <style>
  17.         .toolbar {
  18.             margin-bottom: 10px;
  19.         }
  20.     </style>
  21. </head>
  22.  
  23. <body>
  24.     <div class="container-fluid">
  25.         <h2>Bootstrap Table 示例 (Bootstrap 3)</h2>
  26.  
  27.         <div class="toolbar">
  28.             <button id="addRow" class="btn btn-primary">添加行</button>
  29.             <button id="removeRow" class="btn btn-danger">删除选中行</button>
  30.         </div>
  31.  
  32.         <table id="table">
  33.         </table>
  34.     </div>
  35.  
  36.     <!– jQuery –>
  37.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  38.     <!– Bootstrap 3 JS –>
  39.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  40.     <!– Bootstrap Table JS –>
  41.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js"></script>
  42.     <!– Bootstrap Table 中文语言包 –>
  43.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  44.     <!– Bootstrap Table Editable JS –>
  45.     <script
  46.        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
  47.     <script
  48.        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
  49.     <!– Bootstrap Table Export JS –>
  50.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
  51.     <script
  52.        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
  53.  
  54.     <script>
  55.         $(document).ready(function () {
  56.             // 准备数据
  57.             var data = [
  58.                 { id: 1, name: ‘张三’, position: ‘前端工程师’, office: ‘北京’, age: 28, startDate: ‘2020-03-15’, salary: ‘12000’ },
  59.                 { id: 2, name: ‘李四’, position: ‘后端工程师’, office: ‘上海’, age: 32, startDate: ‘2019-07-01’, salary: ‘15000’ },
  60.                 { id: 3, name: ‘王五’, position: ‘全栈工程师’, office: ‘深圳’, age: 26, startDate: ‘2021-02-20’, salary: ‘18000’ },
  61.                 { id: 4, name: ‘赵六’, position: ‘产品经理’, office: ‘杭州’, age: 30, startDate: ‘2018-11-10’, salary: ‘20000’ },
  62.                 { id: 5, name: ‘钱七’, position: ‘UI设计师’, office: ‘广州’, age: 25, startDate: ‘2022-01-05’, salary: ‘10000’ },
  63.                 { id: 6, name: ‘孙八’, position: ‘前端工程师’, office: ‘成都’, age: 27, startDate: ‘2020-09-18’, salary: ‘13000’ },
  64.                 { id: 7, name: ‘周九’, position: ‘后端工程师’, office: ‘武汉’, age: 29, startDate: ‘2019-05-12’, salary: ‘16000’ },
  65.                 { id: 8, name: ‘吴十’, position: ‘测试工程师’, office: ‘南京’, age: 24, startDate: ‘2021-08-30’, salary: ‘9000’ }
  66.             ];
  67.  
  68.             // 初始化表格并加载数据
  69.             $(‘#table’).bootstrapTable({
  70.                 data: data,
  71.                 columns: [{
  72.                     checkbox: true,
  73.                     visible: true
  74.                 }, {
  75.                     field: ‘id’,
  76.                     title: ‘ID’,
  77.                     sortable: true,
  78.                     editable: true
  79.                 }, {
  80.                     field: ‘name’,
  81.                     title: ‘姓名’,
  82.                     sortable: true,
  83.                     editable: {
  84.                         type: ‘text’,
  85.                         title: ‘姓名’,
  86.                         validate: function (value) {
  87.                             if (!value) {
  88.                                 return ‘姓名不能为空’;
  89.                             }
  90.                             if (value.length > 20) {
  91.                                 return ‘姓名不能超过20个字符’;
  92.                             }
  93.                         }
  94.                     }
  95.                 }, {
  96.                     field: ‘position’,
  97.                     title: ‘职位’,
  98.                     sortable: true,
  99.                     editable: {
  100.                         type: ‘select’,
  101.                         title: ‘职位’,
  102.                         source: [
  103.                             { value: ‘前端工程师’, text: ‘前端工程师’ },
  104.                             { value: ‘后端工程师’, text: ‘后端工程师’ },
  105.                             { value: ‘全栈工程师’, text: ‘全栈工程师’ },
  106.                             { value: ‘产品经理’, text: ‘产品经理’ },
  107.                             { value: ‘UI设计师’, text: ‘UI设计师’ }
  108.                         ]
  109.                     }
  110.                 }, {
  111.                     field: ‘office’,
  112.                     title: ‘办公室’,
  113.                     sortable: true,
  114.                     editable: true
  115.                 }, {
  116.                     field: ‘age’,
  117.                     title: ‘年龄’,
  118.                     sortable: true,
  119.                     editable: {
  120.                         type: ‘number’,
  121.                         title: ‘年龄’,
  122.                         validate: function (value) {
  123.                             if (value && (value < 18 || value > 100)) {
  124.                                return ‘年龄必须在18-100之间’;
  125.                             }
  126.                         }
  127.                     }
  128.                 }, {
  129.                     field: ‘startDate’,
  130.                     title: ‘入职日期’,
  131.                     sortable: true,
  132.                     editable: {
  133.                         type: ‘date’,
  134.                         title: ‘入职日期’
  135.                     }
  136.                 }, {
  137.                     field: ‘salary’,
  138.                     title: ‘薪资’,
  139.                     sortable: true,
  140.                     editable: {
  141.                         type: ‘text’,
  142.                         title: ‘薪资’,
  143.                         validate: function (value) {
  144.                             if (value && !/^\d+(\.\d{1,2})?$/.test(value)) {
  145.                                return ‘请输入正确的薪资格式’;
  146.                             }
  147.                         }
  148.                     }
  149.                 }, {
  150.                     field: ‘operate’,
  151.                     title: ‘操作’,
  152.                     align: ‘center’,
  153.                     events: window.operateEvents,
  154.                     formatter: operateFormatter
  155.                 }],
  156.                 toolbar: ‘.toolbar’,
  157.                 search: true,
  158.                 showRefresh: true,
  159.                 showToggle: true,
  160.                 showFullscreen: true,
  161.                 showColumns: true,
  162.                 showColumnsToggleAll: true,
  163.                 showExport: true,
  164.                 clickToSelect: true,
  165.                 detailFormatter: detailFormatter,
  166.                 minimumCountColumns: 2,
  167.                 showPaginationSwitch: true,
  168.                 pagination: true,
  169.                 idField: ‘id’,
  170.                 pageList: [10, 25, 50, 100, ‘all’],
  171.                 showFooter: false,
  172.                 sidePagination: ‘client’,
  173.                 responseHandler: responseHandler,
  174.                 exportOptions: {
  175.                     fileName: ‘员工信息表’,
  176.                     ignoreColumn: [0, 8],
  177.                     pdfmake: {
  178.                         enabled: true,
  179.                         docDefinition: {
  180.                             pageOrientation: ‘landscape’
  181.                         }
  182.                     }
  183.                 }
  184.             });
  185.  
  186.             // 添加行按钮事件
  187.             $(‘#addRow’).click(function () {
  188.                 var newRow = {
  189.                     id: $(‘#table’).bootstrapTable(‘getData’).length + 1,
  190.                     name: ”,
  191.                     position: ”,
  192.                     office: ”,
  193.                     age: ”,
  194.                     startDate: ”,
  195.                     salary: ”
  196.                 };
  197.                 $(‘#table’).bootstrapTable(‘append’, newRow);
  198.             });
  199.  
  200.             // 删除行按钮事件
  201.             $(‘#removeRow’).click(function () {
  202.                 var selections = $(‘#table’).bootstrapTable(‘getSelections’);
  203.                 if (selections.length === 0) {
  204.                     alert(‘请先选择要删除的行’);
  205.                     return;
  206.                 }
  207.  
  208.                 var ids = $.map(selections, function (row) {
  209.                     return row.id;
  210.                 });
  211.  
  212.                 $(‘#table’).bootstrapTable(‘remove’, {
  213.                     field: ‘id’,
  214.                     values: ids
  215.                 });
  216.             });
  217.         });
  218.  
  219.         // 操作列格式化
  220.         function operateFormatter(value, row, index) {
  221.             return [
  222.                 ‘<a class="edit" href="javascript:void(0)" title="编辑">‘,
  223.                 ‘<i class="glyphicon glyphicon-edit">编辑</i>‘,
  224.                 ‘</a>  ‘,
  225.                 ‘<a class="remove" href="javascript:void(0)" title="删除">‘,
  226.                 ‘<i class="glyphicon glyphicon-remove">删除</i>‘,
  227.                 ‘</a>‘
  228.             ].join(”);
  229.         }
  230.  
  231.         // 操作事件
  232.         window.operateEvents = {
  233.             ‘click .edit’: function (e, value, row, index) {
  234.                 $(‘#table’).bootstrapTable(‘updateRow’, {
  235.                     index: index,
  236.                     row: row
  237.                 });
  238.             },
  239.             ‘click .remove’: function (e, value, row, index) {
  240.                 $(‘#table’).bootstrapTable(‘remove’, {
  241.                     field: ‘id’,
  242.                     values: [row.id]
  243.                 });
  244.             }
  245.         };
  246.  
  247.         // 详情格式化
  248.         function detailFormatter(index, row) {
  249.             var html = [];
  250.             $.each(row, function (key, value) {
  251.                 html.push(‘<p><b>‘ + key + ‘:</b> ‘ + value + ‘</p>‘);
  252.             });
  253.             return html.join(”);
  254.         }
  255.  
  256.         // 数据响应处理
  257.         function responseHandler(res) {
  258.             return res;
  259.         }
  260.     </script>
  261. </body>
  262.  
  263. </html>
GeSHi © Codebox Plus Extension

原文作者: BG6RSH | 查看原帖

此条目发表在学习笔记分类目录。将固定链接加入收藏夹。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。