{"id":1422,"date":"2025-07-25T16:01:39","date_gmt":"2025-07-25T08:01:39","guid":{"rendered":"https:\/\/www.tansoo.cn\/?p=1422"},"modified":"2025-07-25T16:01:39","modified_gmt":"2025-07-25T08:01:39","slug":"phpbb-106","status":"publish","type":"post","link":"https:\/\/www.tansoo.cn\/?p=1422","title":{"rendered":"Bootstrap Table \u76f4\u63a5\u7f16\u8f91\u793a\u4f8b (Bootstrap V3 V5)"},"content":{"rendered":"

Bootstrap V3 \u4ee3\u7801\uff1a<\/p>\n

\n
Code: <\/strong>[\u5168\u9009]<\/a> [Expand\/Collapse]<\/a><\/div>\n
\n
\n
\n
    \n
  1. \n
    <!DOCTYPE html><\/span><\/div>\n<\/li>\n
  2. \n
    <html<\/span> lang<\/span>=<\/span>"zh-CN"<\/span>><\/span><\/div>\n<\/li>\n
  3. \n
     <\/div>\n<\/li>\n
  4. \n
    <head<\/span>><\/span><\/div>\n<\/li>\n
  5. \n
        <meta<\/span> charset<\/span>=<\/span>"UTF-8"<\/span>><\/span><\/div>\n<\/li>\n
  6. \n
        <meta<\/span> name<\/span>=<\/span>"viewport"<\/span> content<\/span>=<\/span>"width=device-width, initial-scale=1.0"<\/span>><\/span><\/div>\n<\/li>\n
  7. \n
        <title<\/span>><\/span>Bootstrap Table \u793a\u4f8b (Bootstrap 3)<\/<\/span>title<\/span>><\/span><\/div>\n<\/li>\n
  8. \n
        <!– Bootstrap 3 CSS –><\/span><\/div>\n<\/li>\n
  9. \n
        <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@3.4.1\/dist\/css\/bootstrap.min.css"<\/span>><\/span><\/div>\n<\/li>\n
  10. \n
        <!– Bootstrap Table CSS –><\/span><\/div>\n<\/li>\n
  11. \n
        <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.css"<\/span>><\/span><\/div>\n<\/li>\n
  12. \n
        <!– Bootstrap Table Editable CSS –><\/span><\/div>\n<\/li>\n
  13. \n
        <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span><\/span><\/div>\n<\/li>\n
  14. \n
           href<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/x-editable@1.5.1\/dist\/bootstrap3-editable\/css\/bootstrap-editable.css"<\/span>><\/span><\/div>\n<\/li>\n
  15. \n
        <!– Bootstrap Table Export CSS –><\/span><\/div>\n<\/li>\n
  16. \n
        <style<\/span>><\/span><\/div>\n<\/li>\n
  17. \n
            .toolbar {<\/div>\n<\/li>\n
  18. \n
                margin-bottom: 10px;<\/div>\n<\/li>\n
  19. \n
            }<\/div>\n<\/li>\n
  20. \n
        <\/<\/span>style<\/span>><\/span><\/div>\n<\/li>\n
  21. \n
    <\/<\/span>head<\/span>><\/span><\/div>\n<\/li>\n
  22. \n
     <\/div>\n<\/li>\n
  23. \n
    <body<\/span>><\/span><\/div>\n<\/li>\n
  24. \n
        <div<\/span> class<\/span>=<\/span>"container-fluid"<\/span>><\/span><\/div>\n<\/li>\n
  25. \n
            <h2<\/span>><\/span>Bootstrap Table \u793a\u4f8b (Bootstrap 3)<\/<\/span>h2<\/span>><\/span><\/div>\n<\/li>\n
  26. \n
     <\/div>\n<\/li>\n
  27. \n
            <div<\/span> class<\/span>=<\/span>"toolbar"<\/span>><\/span><\/div>\n<\/li>\n
  28. \n
                <button<\/span> id<\/span>=<\/span>"addRow"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>\u6dfb\u52a0\u884c<\/<\/span>button<\/span>><\/span><\/div>\n<\/li>\n
  29. \n
                <button<\/span> id<\/span>=<\/span>"removeRow"<\/span> class<\/span>=<\/span>"btn btn-danger"<\/span>><\/span>\u5220\u9664\u9009\u4e2d\u884c<\/<\/span>button<\/span>><\/span><\/div>\n<\/li>\n
  30. \n
            <\/<\/span>div<\/span>><\/span><\/div>\n<\/li>\n
  31. \n
     <\/div>\n<\/li>\n
  32. \n
            <table<\/span> id<\/span>=<\/span>"table"<\/span>><\/span><\/div>\n<\/li>\n
  33. \n
            <\/<\/span>table<\/span>><\/span><\/div>\n<\/li>\n
  34. \n
        <\/<\/span>div<\/span>><\/span><\/div>\n<\/li>\n
  35. \n
     <\/div>\n<\/li>\n
  36. \n
        <!– jQuery –><\/span><\/div>\n<\/li>\n
  37. \n
        <script<\/span> src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.6.0\/dist\/jquery.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  38. \n
        <!– Bootstrap 3 JS –><\/span><\/div>\n<\/li>\n
  39. \n
        <script<\/span> src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@3.4.1\/dist\/js\/bootstrap.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  40. \n
        <!– Bootstrap Table JS –><\/span><\/div>\n<\/li>\n
  41. \n
        <script<\/span> src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  42. \n
        <!– Bootstrap Table \u4e2d\u6587\u8bed\u8a00\u5305 –><\/span><\/div>\n<\/li>\n
  43. \n
        <script<\/span> src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-table@1.22.1\/dist\/locale\/bootstrap-table-zh-CN.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  44. \n
        <!– Bootstrap Table Editable JS –><\/span><\/div>\n<\/li>\n
  45. \n
        <script<\/span><\/span><\/div>\n<\/li>\n
  46. \n
           src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/x-editable@1.5.1\/dist\/bootstrap3-editable\/js\/bootstrap-editable.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  47. \n
        <script<\/span><\/span><\/div>\n<\/li>\n
  48. \n
           src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-table@1.22.1\/dist\/extensions\/editable\/bootstrap-table-editable.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  49. \n
        <!– Bootstrap Table Export JS –><\/span><\/div>\n<\/li>\n
  50. \n
        <script<\/span> src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/tableexport.jquery.plugin@1.28.0\/tableExport.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  51. \n
        <script<\/span><\/span><\/div>\n<\/li>\n
  52. \n
           src<\/span>=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-table@1.22.1\/dist\/extensions\/export\/bootstrap-table-export.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  53. \n
     <\/div>\n<\/li>\n
  54. \n
        <script<\/span>><\/span><\/div>\n<\/li>\n
  55. \n
            $(document).ready(function () {<\/div>\n<\/li>\n
  56. \n
                \/\/ \u51c6\u5907\u6570\u636e<\/div>\n<\/li>\n
  57. \n
                var data = [<\/div>\n<\/li>\n
  58. \n
                    { id: 1, name: ‘\u5f20\u4e09’, position: ‘\u524d\u7aef\u5de5\u7a0b\u5e08’, office: ‘\u5317\u4eac’, age: 28, startDate: ‘2020-03-15’, salary: ‘12000’ },<\/div>\n<\/li>\n
  59. \n
                    { id: 2, name: ‘\u674e\u56db’, position: ‘\u540e\u7aef\u5de5\u7a0b\u5e08’, office: ‘\u4e0a\u6d77’, age: 32, startDate: ‘2019-07-01’, salary: ‘15000’ },<\/div>\n<\/li>\n
  60. \n
                    { id: 3, name: ‘\u738b\u4e94’, position: ‘\u5168\u6808\u5de5\u7a0b\u5e08’, office: ‘\u6df1\u5733’, age: 26, startDate: ‘2021-02-20’, salary: ‘18000’ },<\/div>\n<\/li>\n
  61. \n
                    { id: 4, name: ‘\u8d75\u516d’, position: ‘\u4ea7\u54c1\u7ecf\u7406’, office: ‘\u676d\u5dde’, age: 30, startDate: ‘2018-11-10’, salary: ‘20000’ },<\/div>\n<\/li>\n
  62. \n
                    { id: 5, name: ‘\u94b1\u4e03’, position: ‘UI\u8bbe\u8ba1\u5e08’, office: ‘\u5e7f\u5dde’, age: 25, startDate: ‘2022-01-05’, salary: ‘10000’ },<\/div>\n<\/li>\n
  63. \n
                    { id: 6, name: ‘\u5b59\u516b’, position: ‘\u524d\u7aef\u5de5\u7a0b\u5e08’, office: ‘\u6210\u90fd’, age: 27, startDate: ‘2020-09-18’, salary: ‘13000’ },<\/div>\n<\/li>\n
  64. \n
                    { id: 7, name: ‘\u5468\u4e5d’, position: ‘\u540e\u7aef\u5de5\u7a0b\u5e08’, office: ‘\u6b66\u6c49’, age: 29, startDate: ‘2019-05-12’, salary: ‘16000’ },<\/div>\n<\/li>\n
  65. \n
                    { id: 8, name: ‘\u5434\u5341’, position: ‘\u6d4b\u8bd5\u5de5\u7a0b\u5e08’, office: ‘\u5357\u4eac’, age: 24, startDate: ‘2021-08-30’, salary: ‘9000’ }<\/div>\n<\/li>\n
  66. \n
                ];<\/div>\n<\/li>\n
  67. \n
     <\/div>\n<\/li>\n
  68. \n
                \/\/ \u521d\u59cb\u5316\u8868\u683c\u5e76\u52a0\u8f7d\u6570\u636e<\/div>\n<\/li>\n
  69. \n
                $(‘#table’).bootstrapTable({<\/div>\n<\/li>\n
  70. \n
                    data: data,<\/div>\n<\/li>\n
  71. \n
                    columns: [{<\/div>\n<\/li>\n
  72. \n
                        checkbox: true,<\/div>\n<\/li>\n
  73. \n
                        visible: true<\/div>\n<\/li>\n
  74. \n
                    }, {<\/div>\n<\/li>\n
  75. \n
                        field: ‘id’,<\/div>\n<\/li>\n
  76. \n
                        title: ‘ID’,<\/div>\n<\/li>\n
  77. \n
                        sortable: true,<\/div>\n<\/li>\n
  78. \n
                        editable: true<\/div>\n<\/li>\n
  79. \n
                    }, {<\/div>\n<\/li>\n
  80. \n
                        field: ‘name’,<\/div>\n<\/li>\n
  81. \n
                        title: ‘\u59d3\u540d’,<\/div>\n<\/li>\n
  82. \n
                        sortable: true,<\/div>\n<\/li>\n
  83. \n
                        editable: {<\/div>\n<\/li>\n
  84. \n
                            type: ‘text’,<\/div>\n<\/li>\n
  85. \n
                            title: ‘\u59d3\u540d’,<\/div>\n<\/li>\n
  86. \n
                            validate: function (value) {<\/div>\n<\/li>\n
  87. \n
                                if (!value) {<\/div>\n<\/li>\n
  88. \n
                                    return ‘\u59d3\u540d\u4e0d\u80fd\u4e3a\u7a7a’;<\/div>\n<\/li>\n
  89. \n
                                }<\/div>\n<\/li>\n
  90. \n
                                if (value.length > 20) {<\/div>\n<\/li>\n
  91. \n
                                    return ‘\u59d3\u540d\u4e0d\u80fd\u8d85\u8fc720\u4e2a\u5b57\u7b26’;<\/div>\n<\/li>\n
  92. \n
                                }<\/div>\n<\/li>\n
  93. \n
                            }<\/div>\n<\/li>\n
  94. \n
                        }<\/div>\n<\/li>\n
  95. \n
                    }, {<\/div>\n<\/li>\n
  96. \n
                        field: ‘position’,<\/div>\n<\/li>\n
  97. \n
                        title: ‘\u804c\u4f4d’,<\/div>\n<\/li>\n
  98. \n
                        sortable: true,<\/div>\n<\/li>\n
  99. \n
                        editable: {<\/div>\n<\/li>\n
  100. \n
                            type: ‘select’,<\/div>\n<\/li>\n
  101. \n
                            title: ‘\u804c\u4f4d’,<\/div>\n<\/li>\n
  102. \n
                            source: [<\/div>\n<\/li>\n
  103. \n
                                { value: ‘\u524d\u7aef\u5de5\u7a0b\u5e08’, text: ‘\u524d\u7aef\u5de5\u7a0b\u5e08’ },<\/div>\n<\/li>\n
  104. \n
                                { value: ‘\u540e\u7aef\u5de5\u7a0b\u5e08’, text: ‘\u540e\u7aef\u5de5\u7a0b\u5e08’ },<\/div>\n<\/li>\n
  105. \n
                                { value: ‘\u5168\u6808\u5de5\u7a0b\u5e08’, text: ‘\u5168\u6808\u5de5\u7a0b\u5e08’ },<\/div>\n<\/li>\n
  106. \n
                                { value: ‘\u4ea7\u54c1\u7ecf\u7406’, text: ‘\u4ea7\u54c1\u7ecf\u7406’ },<\/div>\n<\/li>\n
  107. \n
                                { value: ‘UI\u8bbe\u8ba1\u5e08’, text: ‘UI\u8bbe\u8ba1\u5e08’ }<\/div>\n<\/li>\n
  108. \n
                            ]<\/div>\n<\/li>\n
  109. \n
                        }<\/div>\n<\/li>\n
  110. \n
                    }, {<\/div>\n<\/li>\n
  111. \n
                        field: ‘office’,<\/div>\n<\/li>\n
  112. \n
                        title: ‘\u529e\u516c\u5ba4’,<\/div>\n<\/li>\n
  113. \n
                        sortable: true,<\/div>\n<\/li>\n
  114. \n
                        editable: true<\/div>\n<\/li>\n
  115. \n
                    }, {<\/div>\n<\/li>\n
  116. \n
                        field: ‘age’,<\/div>\n<\/li>\n
  117. \n
                        title: ‘\u5e74\u9f84’,<\/div>\n<\/li>\n
  118. \n
                        sortable: true,<\/div>\n<\/li>\n
  119. \n
                        editable: {<\/div>\n<\/li>\n
  120. \n
                            type: ‘number’,<\/div>\n<\/li>\n
  121. \n
                            title: ‘\u5e74\u9f84’,<\/div>\n<\/li>\n
  122. \n
                            validate: function (value) {<\/div>\n<\/li>\n
  123. \n
                                if (value && (value < 18 || value > 100)) {<\/span><\/div>\n<\/li>\n
  124. \n
                                   return ‘\u5e74\u9f84\u5fc5\u987b\u572818-100\u4e4b\u95f4’;<\/span><\/div>\n<\/li>\n
  125. \n
                                }<\/div>\n<\/li>\n
  126. \n
                            }<\/div>\n<\/li>\n
  127. \n
                        }<\/div>\n<\/li>\n
  128. \n
                    }, {<\/div>\n<\/li>\n
  129. \n
                        field: ‘startDate’,<\/div>\n<\/li>\n
  130. \n
                        title: ‘\u5165\u804c\u65e5\u671f’,<\/div>\n<\/li>\n
  131. \n
                        sortable: true,<\/div>\n<\/li>\n
  132. \n
                        editable: {<\/div>\n<\/li>\n
  133. \n
                            type: ‘date’,<\/div>\n<\/li>\n
  134. \n
                            title: ‘\u5165\u804c\u65e5\u671f’<\/div>\n<\/li>\n
  135. \n
                        }<\/div>\n<\/li>\n
  136. \n
                    }, {<\/div>\n<\/li>\n
  137. \n
                        field: ‘salary’,<\/div>\n<\/li>\n
  138. \n
                        title: ‘\u85aa\u8d44’,<\/div>\n<\/li>\n
  139. \n
                        sortable: true,<\/div>\n<\/li>\n
  140. \n
                        editable: {<\/div>\n<\/li>\n
  141. \n
                            type: ‘text’,<\/div>\n<\/li>\n
  142. \n
                            title: ‘\u85aa\u8d44’,<\/div>\n<\/li>\n
  143. \n
                            validate: function (value) {<\/div>\n<\/li>\n
  144. \n
                                if (value && !\/^\\d+(\\.\\d{1,2})?$\/.test(value)) {<\/span><\/div>\n<\/li>\n
  145. \n
                                   return ‘\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u85aa\u8d44\u683c\u5f0f’;<\/span><\/div>\n<\/li>\n
  146. \n
                                }<\/div>\n<\/li>\n
  147. \n
                            }<\/div>\n<\/li>\n
  148. \n
                        }<\/div>\n<\/li>\n
  149. \n
                    }, {<\/div>\n<\/li>\n
  150. \n
                        field: ‘operate’,<\/div>\n<\/li>\n
  151. \n
                        title: ‘\u64cd\u4f5c’,<\/div>\n<\/li>\n
  152. \n
                        align: ‘center’,<\/div>\n<\/li>\n
  153. \n
                        events: window.operateEvents,<\/div>\n<\/li>\n
  154. \n
                        formatter: operateFormatter<\/div>\n<\/li>\n
  155. \n
                    }],<\/div>\n<\/li>\n
  156. \n
                    toolbar: ‘.toolbar’,<\/div>\n<\/li>\n
  157. \n
                    search: true,<\/div>\n<\/li>\n
  158. \n
                    showRefresh: true,<\/div>\n<\/li>\n
  159. \n
                    showToggle: true,<\/div>\n<\/li>\n
  160. \n
                    showFullscreen: true,<\/div>\n<\/li>\n
  161. \n
                    showColumns: true,<\/div>\n<\/li>\n
  162. \n
                    showColumnsToggleAll: true,<\/div>\n<\/li>\n
  163. \n
                    showExport: true,<\/div>\n<\/li>\n
  164. \n
                    clickToSelect: true,<\/div>\n<\/li>\n
  165. \n
                    detailFormatter: detailFormatter,<\/div>\n<\/li>\n
  166. \n
                    minimumCountColumns: 2,<\/div>\n<\/li>\n
  167. \n
                    showPaginationSwitch: true,<\/div>\n<\/li>\n
  168. \n
                    pagination: true,<\/div>\n<\/li>\n
  169. \n
                    idField: ‘id’,<\/div>\n<\/li>\n
  170. \n
                    pageList: [10, 25, 50, 100, ‘all’],<\/div>\n<\/li>\n
  171. \n
                    showFooter: false,<\/div>\n<\/li>\n
  172. \n
                    sidePagination: ‘client’,<\/div>\n<\/li>\n
  173. \n
                    responseHandler: responseHandler,<\/div>\n<\/li>\n
  174. \n
                    exportOptions: {<\/div>\n<\/li>\n
  175. \n
                        fileName: ‘\u5458\u5de5\u4fe1\u606f\u8868’,<\/div>\n<\/li>\n
  176. \n
                        ignoreColumn: [0, 8],<\/div>\n<\/li>\n
  177. \n
                        pdfmake: {<\/div>\n<\/li>\n
  178. \n
                            enabled: true,<\/div>\n<\/li>\n
  179. \n
                            docDefinition: {<\/div>\n<\/li>\n
  180. \n
                                pageOrientation: ‘landscape’<\/div>\n<\/li>\n
  181. \n
                            }<\/div>\n<\/li>\n
  182. \n
                        }<\/div>\n<\/li>\n
  183. \n
                    }<\/div>\n<\/li>\n
  184. \n
                });<\/div>\n<\/li>\n
  185. \n
     <\/div>\n<\/li>\n
  186. \n
                \/\/ \u6dfb\u52a0\u884c\u6309\u94ae\u4e8b\u4ef6<\/div>\n<\/li>\n
  187. \n
                $(‘#addRow’).click(function () {<\/div>\n<\/li>\n
  188. \n
                    var newRow = {<\/div>\n<\/li>\n
  189. \n
                        id: $(‘#table’).bootstrapTable(‘getData’).length + 1,<\/div>\n<\/li>\n
  190. \n
                        name: ”,<\/div>\n<\/li>\n
  191. \n
                        position: ”,<\/div>\n<\/li>\n
  192. \n
                        office: ”,<\/div>\n<\/li>\n
  193. \n
                        age: ”,<\/div>\n<\/li>\n
  194. \n
                        startDate: ”,<\/div>\n<\/li>\n
  195. \n
                        salary: ”<\/div>\n<\/li>\n
  196. \n
                    };<\/div>\n<\/li>\n
  197. \n
                    $(‘#table’).bootstrapTable(‘append’, newRow);<\/div>\n<\/li>\n
  198. \n
                });<\/div>\n<\/li>\n
  199. \n
     <\/div>\n<\/li>\n
  200. \n
                \/\/ \u5220\u9664\u884c\u6309\u94ae\u4e8b\u4ef6<\/div>\n<\/li>\n
  201. \n
                $(‘#removeRow’).click(function () {<\/div>\n<\/li>\n
  202. \n
                    var selections = $(‘#table’).bootstrapTable(‘getSelections’);<\/div>\n<\/li>\n
  203. \n
                    if (selections.length === 0) {<\/div>\n<\/li>\n
  204. \n
                        alert(‘\u8bf7\u5148\u9009\u62e9\u8981\u5220\u9664\u7684\u884c’);<\/div>\n<\/li>\n
  205. \n
                        return;<\/div>\n<\/li>\n
  206. \n
                    }<\/div>\n<\/li>\n
  207. \n
     <\/div>\n<\/li>\n
  208. \n
                    var ids = $.map(selections, function (row) {<\/div>\n<\/li>\n
  209. \n
                        return row.id;<\/div>\n<\/li>\n
  210. \n
                    });<\/div>\n<\/li>\n
  211. \n
     <\/div>\n<\/li>\n
  212. \n
                    $(‘#table’).bootstrapTable(‘remove’, {<\/div>\n<\/li>\n
  213. \n
                        field: ‘id’,<\/div>\n<\/li>\n
  214. \n
                        values: ids<\/div>\n<\/li>\n
  215. \n
                    });<\/div>\n<\/li>\n
  216. \n
                });<\/div>\n<\/li>\n
  217. \n
            });<\/div>\n<\/li>\n
  218. \n
     <\/div>\n<\/li>\n
  219. \n
            \/\/ \u64cd\u4f5c\u5217\u683c\u5f0f\u5316<\/div>\n<\/li>\n
  220. \n
            function operateFormatter(value, row, index) {<\/div>\n<\/li>\n
  221. \n
                return [<\/div>\n<\/li>\n
  222. \n
                    ‘<a<\/span> class<\/span>=<\/span>"edit"<\/span> href<\/span>=<\/span>"javascript:void(0)"<\/span> title<\/span>=<\/span>"\u7f16\u8f91"<\/span>><\/span>‘,<\/div>\n<\/li>\n
  223. \n
                    ‘<i<\/span> class<\/span>=<\/span>"glyphicon glyphicon-edit"<\/span>><\/span>\u7f16\u8f91<\/<\/span>i<\/span>><\/span>‘,<\/div>\n<\/li>\n
  224. \n
                    ‘<\/<\/span>a<\/span>><\/span>  ‘,<\/div>\n<\/li>\n
  225. \n
                    ‘<a<\/span> class<\/span>=<\/span>"remove"<\/span> href<\/span>=<\/span>"javascript:void(0)"<\/span> title<\/span>=<\/span>"\u5220\u9664"<\/span>><\/span>‘,<\/div>\n<\/li>\n
  226. \n
                    ‘<i<\/span> class<\/span>=<\/span>"glyphicon glyphicon-remove"<\/span>><\/span>\u5220\u9664<\/<\/span>i<\/span>><\/span>‘,<\/div>\n<\/li>\n
  227. \n
                    ‘<\/<\/span>a<\/span>><\/span>‘<\/div>\n<\/li>\n
  228. \n
                ].join(”);<\/div>\n<\/li>\n
  229. \n
            }<\/div>\n<\/li>\n
  230. \n
     <\/div>\n<\/li>\n
  231. \n
            \/\/ \u64cd\u4f5c\u4e8b\u4ef6<\/div>\n<\/li>\n
  232. \n
            window.operateEvents = {<\/div>\n<\/li>\n
  233. \n
                ‘click .edit’: function (e, value, row, index) {<\/div>\n<\/li>\n
  234. \n
                    $(‘#table’).bootstrapTable(‘updateRow’, {<\/div>\n<\/li>\n
  235. \n
                        index: index,<\/div>\n<\/li>\n
  236. \n
                        row: row<\/div>\n<\/li>\n
  237. \n
                    });<\/div>\n<\/li>\n
  238. \n
                },<\/div>\n<\/li>\n
  239. \n
                ‘click .remove’: function (e, value, row, index) {<\/div>\n<\/li>\n
  240. \n
                    $(‘#table’).bootstrapTable(‘remove’, {<\/div>\n<\/li>\n
  241. \n
                        field: ‘id’,<\/div>\n<\/li>\n
  242. \n
                        values: [row.id]<\/div>\n<\/li>\n
  243. \n
                    });<\/div>\n<\/li>\n
  244. \n
                }<\/div>\n<\/li>\n
  245. \n
            };<\/div>\n<\/li>\n
  246. \n
     <\/div>\n<\/li>\n
  247. \n
            \/\/ \u8be6\u60c5\u683c\u5f0f\u5316<\/div>\n<\/li>\n
  248. \n
            function detailFormatter(index, row) {<\/div>\n<\/li>\n
  249. \n
                var html = [];<\/div>\n<\/li>\n
  250. \n
                $.each(row, function (key, value) {<\/div>\n<\/li>\n
  251. \n
                    html.push(‘<p<\/span>><b<\/span>><\/span>‘ + key + ‘:<\/<\/span>b<\/span>><\/span> ‘ + value + ‘<\/<\/span>p<\/span>><\/span>‘);<\/div>\n<\/li>\n
  252. \n
                });<\/div>\n<\/li>\n
  253. \n
                return html.join(”);<\/div>\n<\/li>\n
  254. \n
            }<\/div>\n<\/li>\n
  255. \n
     <\/div>\n<\/li>\n
  256. \n
            \/\/ \u6570\u636e\u54cd\u5e94\u5904\u7406<\/div>\n<\/li>\n
  257. \n
            function responseHandler(res) {<\/div>\n<\/li>\n
  258. \n
                return res;<\/div>\n<\/li>\n
  259. \n
            }<\/div>\n<\/li>\n
  260. \n
        <\/<\/span>script<\/span>><\/span><\/div>\n<\/li>\n
  261. \n
    <\/<\/span>body<\/span>><\/span><\/div>\n<\/li>\n
  262. \n
     <\/div>\n<\/li>\n
  263. \n
    <\/<\/span>html<\/span>><\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n
    GeSHi © Codebox Plus Extension<\/div>\n<\/div>\n

    \u539f\u6587\u4f5c\u8005: BG6RSH | \u67e5\u770b\u539f\u5e16<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    Bootstrap V3 \u4ee3\u7801\uff1a Code: [\u5168\u9009] [Expand … \u7ee7\u7eed\u9605\u8bfb →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1422","post","type-post","status-publish","format-standard","hentry","category-105"],"_links":{"self":[{"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=\/wp\/v2\/posts\/1422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1422"}],"version-history":[{"count":0,"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=\/wp\/v2\/posts\/1422\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tansoo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}