怎么实现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值已经改变了 不知道哪出问题了 还是这个思路不行
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我认为是没有重新渲染的问题,也就是说你虽然row值已经改变了,但是你的页面没有用更改的row值进行重新渲染,如果不需要后台接口只是纯前端修改的页面的话,可以改变row值得同时修改dom元素。
你可以判断后端是否更新成功了,如果更新成功了,可以在前端更新行数据啊
更新方式:$table.bootstrapTable('updateByUniqueId', {id: data.id, row: data});
data就是行数据