私有云论坛

-- 家庭宽带、NAS、群晖、Python、Delphi、qt c++学习讨论
http://bbs.atoo.top:8081/

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

http://bbs.atoo.top:8081/viewtopic.php?t=106

分页： 1 / 1

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

发表于 : 周五 7月 25, 2025 4:01 pm
由 BG6RSH
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/bootstrap@3.4.1/dist/css/bootstrap.min.css">
  10.     <!-- Bootstrap Table CSS -->
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
  12.     <!-- Bootstrap Table Editable CSS -->
  13.     <link rel="stylesheet"
  14.        href="https://cdn.jsdelivr.net/npm/x-editable@1.5.1/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/jquery@3.6.0/dist/jquery.min.js"></script>
  38.     <!-- Bootstrap 3 JS -->
  39.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
  40.     <!-- Bootstrap Table JS -->
  41.     <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
  42.     <!-- Bootstrap Table 中文语言包 -->
  43.     <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  44.     <!-- Bootstrap Table Editable JS -->
  45.     <script
  46.        src="https://cdn.jsdelivr.net/npm/x-editable@1.5.1/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
  47.     <script
  48.        src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
  49.     <!-- Bootstrap Table Export JS -->
  50.     <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.28.0/tableExport.min.js"></script>
  51.     <script
  52.        src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/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

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

发表于 : 周五 7月 25, 2025 4:02 pm
由 BG6RSH
Bootstrap V5代码：
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 5)</title>
  8.     <!-- Bootstrap 5 CSS -->
  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  10.     <!-- Bootstrap Icons -->
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  12.     <!-- Bootstrap Table CSS -->
  13.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/bootstrap-table.min.css">
  14.     <!-- Bootstrap Table Fixed Columns CSS -->
  15.     <link rel="stylesheet"
  16.        href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css">
  17.     <!-- Bootstrap Table Export CSS -->
  18.     <style>
  19.         .toolbar {
  20.             margin-bottom: 10px;
  21.         }
  22.  
  23.         .editable-input {
  24.             width: 100%;
  25.             padding: 0.375rem 0.75rem;
  26.             font-size: 1rem;
  27.             border: 1px solid #ced4da;
  28.             border-radius: 0.375rem;
  29.         }
  30.  
  31.         .editable-input:focus {
  32.             border-color: #86b7fe;
  33.             outline: 0;
  34.             box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  35.         }
  36.  
  37.         .edit-actions {
  38.             display: flex;
  39.             gap: 5px;
  40.         }
  41.  
  42.         .edit-btn {
  43.             padding: 0.1rem 0.3rem;
  44.             font-size: 0.8rem;
  45.         }
  46.  
  47.         .editing-row .editable {
  48.             display: none;
  49.         }
  50.  
  51.         /* 添加编辑状态下的样式 */
  52.         .is-editing .edit-btn.edit {
  53.             background-color: #198754;
  54.             border-color: #198754;
  55.             color: white;
  56.         }
  57.  
  58.         /* 设置表格容器高度 */
  59.         .fixed-table-container {
  60.             height: 500px !important;
  61.         }
  62.     </style>
  63. </head>
  64.  
  65. <body>
  66.     <div class="container-fluid mt-3">
  67.         <h2>Bootstrap Table 示例 (Bootstrap 5)</h2>
  68.  
  69.         <div class="toolbar">
  70.             <button id="addRow" class="btn btn-primary">添加行</button>
  71.             <button id="removeRow" class="btn btn-danger">删除选中行</button>
  72.         </div>
  73.  
  74.         <table id="table">
  75.         </table>
  76.     </div>
  77.  
  78.     <!-- jQuery -->
  79.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  80.     <!-- Bootstrap 5 JS -->
  81.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  82.     <!-- Bootstrap Table JS -->
  83.     <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/bootstrap-table.min.js"></script>
  84.     <!-- Bootstrap Table 中文语言包 -->
  85.     <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  86.     <!-- Bootstrap Table Fixed Columns JS -->
  87.     <script
  88.        src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
  89.     <!-- Bootstrap Table Export JS -->
  90.     <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.28.0/tableExport.min.js"></script>
  91.     <script
  92.        src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
  93.  
  94.     <script>
  95.         $(document).ready(function () {
  96.             // 准备数据
  97.             var data = [
  98.                 { id: 1, name: '张三', position: '前端工程师', office: '北京', age: 28, startDate: '2020-03-15', salary: '12000' },
  99.                 { id: 2, name: '李四', position: '后端工程师', office: '上海', age: 32, startDate: '2019-07-01', salary: '15000' },
  100.                 { id: 3, name: '王五', position: '全栈工程师', office: '深圳', age: 26, startDate: '2021-02-20', salary: '18000' },
  101.                 { id: 4, name: '赵六', position: '产品经理', office: '杭州', age: 30, startDate: '2018-11-10', salary: '20000' },
  102.                 { id: 5, name: '钱七', position: 'UI设计师', office: '广州', age: 25, startDate: '2022-01-05', salary: '10000' },
  103.                 { id: 6, name: '孙八', position: '前端工程师', office: '成都', age: 27, startDate: '2020-09-18', salary: '13000' },
  104.                 { id: 7, name: '周九', position: '后端工程师', office: '武汉', age: 29, startDate: '2019-05-12', salary: '16000' },
  105.                 { id: 8, name: '吴十', position: '测试工程师', office: '南京', age: 24, startDate: '2021-08-30', salary: '9000' },
  106.                 { id: 9, name: '王五', position: '全栈工程师', office: '深圳', age: 26, startDate: '2021-02-20', salary: '18000' },
  107.                 { id: 10, name: '周九', position: '后端工程师', office: '武汉', age: 29, startDate: '2019-05-12', salary: '16000' },
  108.                 { id: 11, name: '张三', position: '前端工程师', office: '北京', age: 28, startDate: '2020-03-15', salary: '12000' },
  109.                 { id: 12, name: '李四', position: '后端工程师', office: '上海', age: 32, startDate: '2019-07-01', salary: '15000' },
  110.                 { id: 13, name: '王五', position: '全栈工程师', office: '深圳', age: 26, startDate: '2021-02-20', salary: '18000' },
  111.                 { id: 14, name: '赵六', position: '产品经理', office: '杭州', age: 30, startDate: '2018-11-10', salary: '20000' },
  112.                 { id: 15, name: '钱七', position: 'UI设计师', office: '广州', age: 25, startDate: '2022-01-05', salary: '10000' },
  113.                 { id: 16, name: '孙八', position: '前端工程师', office: '成都', age: 27, startDate: '2020-09-18', salary: '13000' },
  114.                 { id: 17, name: '周九', position: '后端工程师', office: '武汉', age: 29, startDate: '2019-05-12', salary: '16000' },
  115.                 { id: 18, name: '吴十', position: '测试工程师', office: '南京', age: 24, startDate: '2021-08-30', salary: '9000' },
  116.                 { id: 19, name: '钱七', position: 'UI设计师', office: '广州', age: 25, startDate: '2022-01-05', salary: '10000' },
  117.                 { id: 20, name: '孙八', position: '前端工程师', office: '成都', age: 27, startDate: '2020-09-18', salary: '13000' },
  118.                 { id: 21, name: '张三', position: '前端工程师', office: '北京', age: 28, startDate: '2020-03-15', salary: '12000' },
  119.                 { id: 22, name: '李四', position: '后端工程师', office: '上海', age: 32, startDate: '2019-07-01', salary: '15000' },
  120.                 { id: 23, name: '王五', position: '全栈工程师', office: '深圳', age: 26, startDate: '2021-02-20', salary: '18000' },
  121.                 { id: 24, name: '赵六', position: '产品经理', office: '杭州', age: 30, startDate: '2018-11-10', salary: '20000' },
  122.                 { id: 25, name: '钱七', position: 'UI设计师', office: '广州', age: 25, startDate: '2022-01-05', salary: '10000' },
  123.                 { id: 26, name: '孙八', position: '前端工程师', office: '成都', age: 27, startDate: '2020-09-18', salary: '13000' },
  124.                 { id: 27, name: '周九', position: '后端工程师', office: '武汉', age: 29, startDate: '2019-05-12', salary: '16000' },
  125.                 { id: 28, name: '吴十', position: '测试工程师', office: '南京', age: 24, startDate: '2021-08-30', salary: '9000' }
  126.             ];
  127.  
  128.             // 初始化表格并加载数据
  129.             $('#table').bootstrapTable({
  130.                 data: data,
  131.                 columns: [{
  132.                     checkbox: true, // 是否显示复选框列
  133.                     visible: true   // 是否可见
  134.                 }, {
  135.                     field: 'id',
  136.                     title: 'ID',
  137.                     sortable: true, // 是否可排序
  138.                     fixed: 'left'   // 固定第一列
  139.                 }, {
  140.                     field: 'name',
  141.                     title: '姓名',
  142.                     sortable: true,
  143.                     formatter: editFormatter,   // 单元格格式化函数，用于自定义显示内容
  144.                     fixed: 'left'  // 固定第二列
  145.                 }, {
  146.                     field: 'position',
  147.                     title: '职位',
  148.                     sortable: true,
  149.                     formatter: editFormatter
  150.                 }, {
  151.                     field: 'office',
  152.                     title: '办公室',
  153.                     sortable: true,
  154.                     formatter: editFormatter
  155.                 }, {
  156.                     field: 'age',
  157.                     title: '年龄',
  158.                     sortable: true,
  159.                     formatter: editFormatter
  160.                 }, {
  161.                     field: 'startDate',
  162.                     title: '入职日期',
  163.                     sortable: true,
  164.                     formatter: editFormatter
  165.                 }, {
  166.                     field: 'salary',
  167.                     title: '薪资',
  168.                     sortable: true,
  169.                     formatter: editFormatter
  170.                 }, {
  171.                     field: 'operate',
  172.                     title: '操作',
  173.                     align: 'center',
  174.                     events: window.operateEvents,   // 列内元素的事件处理对象,绑定操作事件
  175.                     formatter: operateFormatter,
  176.                     fixed: 'right'  // 列固定位置，可选 'left'(左固定) 或 'right'(右固定)
  177.                 }],
  178.                 toolbar: '.toolbar',
  179.                 search: true,
  180.                 showRefresh: true,
  181.                 showToggle: true,
  182.                 showFullscreen: true,
  183.                 showColumns: true,
  184.                 showColumnsToggleAll: true,
  185.                 showExport: true,
  186.                 clickToSelect: true,                    // 是否启用点击行选择功能
  187.                 detailFormatter: detailFormatter,       // 详情行格式化函数
  188.                 minimumCountColumns: 2,                 // 最少显示的列数
  189.                 showPaginationSwitch: true,             // 是否显示分页切换按钮
  190.                 pagination: true,                       // 是否启用分页
  191.                 idField: 'id',                          // 主键字段名
  192.                 pageList: [10, 25, 50, 100, 'all'],
  193.                 showFooter: false,                      // 是否显示表脚
  194.                 sidePagination: 'client',               // 分页方式，'client'(客户端) 或 'server'(服务器端)
  195.                 responseHandler: responseHandler,       // 服务器响应数据处理函数
  196.                 fixedColumns: true,        // 启用固定列功能
  197.                 fixedNumber: 2,            // 固定前2列
  198.                 fixedRightNumber: 1,       // 固定右侧1列
  199.                 height: 500,               // 设置表格高度以启用固定表头
  200.                 exportOptions: {           // 用于配置数据导出功能的相关参数
  201.                     fileName: '员工信息表',
  202.                     ignoreColumn: [0, 8],   // 导出时需要忽略的列索引数组,忽略第0列和第8列的数据导出
  203.                     pdfmake: {              // PDF生成配置选项
  204.                         enabled: true,
  205.                         docDefinition: {
  206.                             pageOrientation: 'landscape'
  207.                         }
  208.                     }
  209.                 }
  210.             });
  211.  
  212.             // 添加行按钮事件
  213.             $('#addRow').click(function () {
  214.                 var newRow = {
  215.                     id: $('#table').bootstrapTable('getData').length + 1,
  216.                     name: '',
  217.                     position: '',
  218.                     office: '',
  219.                     age: '',
  220.                     startDate: '',
  221.                     salary: ''
  222.                 };
  223.                 $('#table').bootstrapTable('append', newRow);
  224.  
  225.                 // 延迟执行以确保数据已添加
  226.                 setTimeout(function () {
  227.                     // 获取总页数并跳转到最后一页
  228.                     var options = $('#table').bootstrapTable('getOptions');
  229.                     var totalRows = options.totalRows;
  230.                     var pageSize = options.pageSize;
  231.                     var lastPage = Math.ceil(totalRows / pageSize);
  232.  
  233.                     $('#table').bootstrapTable('selectPage', lastPage);
  234.                 }, 100);
  235.             });
  236.  
  237.             // 删除行按钮事件
  238.             $('#removeRow').click(function () {
  239.                 var selections = $('#table').bootstrapTable('getSelections');
  240.                 if (selections.length === 0) {
  241.                     alert('请先选择要删除的行');
  242.                     return;
  243.                 }
  244.  
  245.                 var ids = $.map(selections, function (row) {
  246.                     return row.id;
  247.                 });
  248.  
  249.                 $('#table').bootstrapTable('remove', {
  250.                     field: 'id',
  251.                     values: ids
  252.                 });
  253.             });
  254.         });
  255.  
  256.         // 编辑格式化器
  257.         function editFormatter(value, row, index, field) {
  258.             return [
  259.                 '<span class="editable" data-field="' + field + '" data-index="' + index + '">' + (value || '') + '</span>'
  260.             ].join('');
  261.         }
  262.  
  263.         // 操作列格式化
  264.         function operateFormatter(value, row, index) {
  265.             // 检查当前行是否处于编辑状态
  266.             if (row.isEditing) {
  267.                 return [
  268.                     '<a class="save btn btn-sm btn-success edit-btn" href="javascript:void(0)" title="保存">',
  269.                     '保存',
  270.                     '</a> ',
  271.                     '<a class="cancel btn btn-sm btn-secondary edit-btn" href="javascript:void(0)" title="取消">',
  272.                     '取消',
  273.                     '</a>'
  274.                 ].join('');
  275.             } else {
  276.                 return [
  277.                     '<a class="edit btn btn-sm btn-outline-primary edit-btn" href="javascript:void(0)" title="编辑">',
  278.                     '编辑',
  279.                     '</a> ',
  280.                     '<a class="remove btn btn-sm btn-outline-danger edit-btn" href="javascript:void(0)" title="删除">',
  281.                     '删除',
  282.                     '</a>'
  283.                 ].join('');
  284.             }
  285.         }
  286.  
  287.         // 操作事件
  288.         window.operateEvents = {
  289.             'click .edit': function (e, value, row, index) {
  290.                 startEdit(row, index);
  291.                 console.log('编辑', index, row);
  292.             },
  293.             'click .save': function (e, value, row, index) {
  294.                 saveEdit(row, index);
  295.                 console.log('保存', index, row);
  296.             },
  297.             'click .cancel': function (e, value, row, index) {
  298.                 cancelEdit(row, index);
  299.                 console.log('取消', index, row);
  300.             },
  301.             'click .remove': function (e, value, row, index) {
  302.                 $('#table').bootstrapTable('remove', {
  303.                     field: 'id',
  304.                     values: [row.id]
  305.                 });
  306.                 console.log('删除', index, row);
  307.             }
  308.         };
  309.  
  310.         // 开始编辑
  311.         function startEdit(row, index) {
  312.             // 获取表格当前数据
  313.             var data = $('#table').bootstrapTable('getData');
  314.             // 创建一个干净的原始数据副本
  315.             var originalData = $.extend(true, {}, data[index]);
  316.             // 确保移除所有与编辑状态相关的属性
  317.             delete originalData.isEditing;
  318.             delete originalData.originalData;
  319.  
  320.             // 保存原始数据副本
  321.             data[index].originalData = originalData;
  322.             // 标记行为编辑状态
  323.             data[index].isEditing = true;
  324.  
  325.             // 更新行以显示编辑控件
  326.             $('#table').bootstrapTable('updateRow', {
  327.                 index: index,
  328.                 row: createEditRow(data[index], index)
  329.             });
  330.         }
  331.  
  332.         // 保存编辑
  333.         function saveEdit(row, index) {
  334.             var rowData = $('#table').bootstrapTable('getData')[index];
  335.  
  336.             // 获取编辑后的值
  337.             var $tr = $('#table').find('tbody tr[data-index="' + index + '"]');
  338.             $tr.find('input, select').each(function () {
  339.                 var field = $(this).data('field');
  340.                 if (field) {
  341.                     rowData[field] = $(this).val();
  342.                 }
  343.             });
  344.  
  345.             // 移除编辑状态标记和原始数据
  346.             delete rowData.isEditing;
  347.             delete rowData.originalData;
  348.  
  349.             // 更新行
  350.             $('#table').bootstrapTable('updateRow', {
  351.                 index: index,
  352.                 row: rowData
  353.             });
  354.         }
  355.  
  356.         // 取消编辑
  357.         function cancelEdit(row, index) {
  358.  
  359.             // 获取表格当前数据
  360.             var data = $('#table').bootstrapTable('getData');
  361.             // 获取原始数据
  362.             var originalRow = data[index].originalData;
  363.  
  364.             // 确保移除编辑状态标记
  365.             originalRow.isEditing = false;
  366.             delete originalRow.originalData;
  367.  
  368.             // 恢复原始数据
  369.             $('#table').bootstrapTable('updateRow', {
  370.                 index: index,
  371.                 row: originalRow
  372.             });
  373.             console.log('取消', index, originalRow);
  374.         }
  375.  
  376.         // 创建编辑行
  377.         function createEditRow(row, index) {
  378.             var editRow = $.extend(true, {}, row);
  379.             editRow.name = '<input type="text" class="editable-input" data-field="name" value="' + (row.name || '') + '">';
  380.             editRow.position = '<select class="editable-input" data-field="position">' +
  381.                 '<option value="前端工程师" ' + (row.position === '前端工程师' ? 'selected' : '') + '>前端工程师</option>' +
  382.                 '<option value="后端工程师" ' + (row.position === '后端工程师' ? 'selected' : '') + '>后端工程师</option>' +
  383.                 '<option value="全栈工程师" ' + (row.position === '全栈工程师' ? 'selected' : '') + '>全栈工程师</option>' +
  384.                 '<option value="产品经理" ' + (row.position === '产品经理' ? 'selected' : '') + '>产品经理</option>' +
  385.                 '<option value="UI设计师" ' + (row.position === 'UI设计师' ? 'selected' : '') + '>UI设计师</option>' +
  386.                 '<option value="测试工程师" ' + (row.position === '测试工程师' ? 'selected' : '') + '>测试工程师</option>' +
  387.                 '</select>';
  388.             editRow.office = '<input type="text" class="editable-input" data-field="office" value="' + (row.office || '') + '">';
  389.             editRow.age = '<input type="number" class="editable-input" data-field="age" value="' + (row.age || '') + '">';
  390.             editRow.startDate = '<input type="date" class="editable-input" data-field="startDate" value="' + (row.startDate || '') + '">';
  391.             editRow.salary = '<input type="text" class="editable-input" data-field="salary" value="' + (row.salary || '') + '">';
  392.             return editRow;
  393.         }
  394.  
  395.         // 详情格式化
  396.         function detailFormatter(index, row) {
  397.             var html = [];
  398.             $.each(row, function (key, value) {
  399.                 html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  400.             });
  401.             return html.join('');
  402.         }
  403.  
  404.         // 数据响应处理
  405.         function responseHandler(res) {
  406.             return res;
  407.         }
  408.     </script>
  409. </body>
  410.  
  411. </html>
GeSHi © Codebox Plus Extension
所有显示的时间是 UTC+08:00
分页： 1 / 1

由 phpBB® Forum Software © phpBB Limited 提供支持

简体中文语言由 David Yin 维护