实现bootstrap-table的可编辑

最新推荐文章于 2023-11-08 21:11:30 发布

程序员猪猪侠

最新推荐文章于 2023-11-08 21:11:30 发布

阅读量1k

点赞数

分类专栏： html 文章标签： html jquery

本文链接：https://blog.csdn.net/xiaozhu2hao/article/details/109474059

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

需要引入的文件，包括了bootstrap的css和js文件，bootstrap-table的js和css文件，bootstrap-table的extension中的bootstrap-table-edit.js，再加上bootstrap-table官网推荐的插件x-editable中的bootstrap3-editable中的css和js（此处用了github上基于bootstrap3-editable的bootstrap4-editable,用3也是完全OK的)。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.css">
   <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.js"></script>
   <script type="text/javascript" src="./plugin/bootstrap-table-editable.js"></script>

   <link rel="stylesheet" href="./plugin/bootstrap4-editable/css/bootstrap-editable.css">
   <script type="text/javascript" src="./plugin/bootstrap4-editable/js/bootstrap-editable.js"></script>
    <!-- 加载Font-Awesome-->
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

页面代码

<body>
    <table id="table"
    data-pagination="true"
    data-show-export="true">
    <thead>
      <tr>
        <th data-field="id">ID</th>
        <th data-field="name" data-editable="true">Item Name</th>
        <th data-field="price" data-editable="true">Item Price</th>
      </tr>
    </thead>
  </table>
  <div type="button" class="btn btn-primary" id="getDataBtn">getData</div>
  </body>
  <script>
    $.fn.editable.defaults.mode = 'inline';
    $('#table').bootstrapTable();
    var tableData=[];
    for(let i=0;i<3;i++){
            var mesObj = {};
            mesObj['id'] = "1";
            mesObj['name'] = "sef";
            mesObj['price'] = "13";
            tableData.push(mesObj);
        }
        $("#table").bootstrapTable('refreshOptions', {
            data: tableData
        });
        $("#getDataBtn").click(function(){
          var data=$('#table').bootstrapTable('getData');
          console.log(data);
        })
  </script>

呈现效果

然而当点击对勾的时候出现如下错误

bootstrap-table-editable.js:124 Uncaught TypeError: that.resetFooter is not a function
    at HTMLAnchorElement.<anonymous> (bootstrap-table-editable.js:124)
    at HTMLAnchorElement.dispatch (jquery.min.js:2)
    at HTMLAnchorElement.v.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at S.fn.init.triggerHandler (jquery.min.js:2)
    at Inline.save (bootstrap-editable.js:1220)
    at HTMLDivElement.i (jquery.min.js:2)
    at HTMLDivElement.dispatch (jquery.min.js:2)
    at HTMLDivElement.v.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)

这是个什么鬼，用最简单的方法，将代码中的that.resetFooter删除，编辑成功，获取一下数据，完全ok。

程序员猪猪侠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
实现bootstrap-table的可编辑

需要引入的文件，包括了bootstrap的css和js文件，bootstrap-table的js和css文件，bootstrap-table的extension中的bootstrap-table-edit.js，再加上bootstrap-table官网推荐的插件x-editable中的bootstrap3-editable中的css和js（此处用了github上基于bootstrap3-editable的bootstrap4-editable)。<script src="https://cdn.
复制链接

扫一扫