怎么实现bootstrapTable 可编辑行?

新手上路,请多包涵

通过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值已经改变了 不知道哪出问题了 还是这个思路不行
图片描述

阅读 7.9k
2 个回答

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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题