怎么实现bootstrapTable 可编辑行?

发布于 2022-09-06 12:09:53 字数 2072 浏览 20 评论 0

通过bootstrapTable 插件生成了表格
通过bootstrap的modal框层可以实现行数据的修改吗
目前实现的是 行数据向modal层传值 可是modal层设置的值不能传递到前端
一定要通过后台接口才可以实现吗 有别的办法吗?

$('#demo-table').bootstrapTable({
        columns: [{
            filed:'model',
            checkbox:true
        },{
            field: 'id',
            title: '洗衣模式'
        }, {
            field: 'time',
            title: '时间'
        }, {
            field: 'price',
            title: '价格'
        },{
            filed:'editer',
            title:'编辑',
            formatter:function(value,row,index){
                           var e = '<a href="#" mce_href="#" onclick="edit()">编辑</a> ';
                            return e
                        }
            }],
        data: [{
            id: "标准洗",
            time: '5分钟',
            price: '20元'
        }, {
            id: '快速洗',
            time: '15分钟',
            price: '15元'
        },{
            id: '脱水',
            time: '5分钟',
            price: '5元'
        },{
            id: '大件洗',
            time: '45分钟',
            price: '35元'
        }]
    });

     function edit(){
         // 获取当前行 var row=$("#demo-table").bootstrapTable('getSelections')
         //console.log(row)
         
         //点击当前行
          $('#demo-table').on('click-row.bs.table', 
          
              function (e, row, element){
                  //设置标题
                  $("#myModalLabel").text(row.id+"设置")
                  //打开模态框
                $("#myModal").modal()
                //点击提交
                $("#sumb").click(function(){
                //获取时间
                var pric=$("#price").val();
                var times=$("#times").val();
                row.price=pric;
                row.time=times;
                     $('#myModal').modal('hide');
                })
                
                 
            });  
         
     }
     

row值已经改变了 不知道哪出问题了 还是这个思路不行
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

凶凌 2022-09-13 12:09:54

我认为是没有重新渲染的问题,也就是说你虽然row值已经改变了,但是你的页面没有用更改的row值进行重新渲染,如果不需要后台接口只是纯前端修改的页面的话,可以改变row值得同时修改dom元素。

物价感观 2022-09-13 12:09:54

你可以判断后端是否更新成功了,如果更新成功了,可以在前端更新行数据啊
更新方式:$table.bootstrapTable('updateByUniqueId', {id: data.id, row: data});
data就是行数据

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文