Bootstrap-table动态新增行,删除行,可编辑
效果图
html
<div class="table-box" style="margin: 20px;">
<div id="toolbar">
<a id="addRow" onclick="addRow()">添加行</a>
<a id="removeRow" onclick="removeRow()">删除行</a>
</div>
<table id="exampleTable"></table>
</div>
js
<script type="text/javascript">
$(function () {
$('#exampleTable').bootstrapTable({
// url: '',//如果需要请求后台获取初始数据的话,这里写请求地址
// toolbar: '#toolbar',
// clickEdit: true,
// showToggle: true,
// pagination: true, //显示分页条
// showColumns: true,
// showPaginationSwitch: true, //显示切换分页按钮
// showRefresh: true, //显示刷新按钮
// //clickToSelect: true, //点击row选中radio或CheckBox
columns: [{
checkbox: true
},
{
field: 'index',
title: '序列',
formatter:function(value, row, index) {
return row.index = index+1; //返回行号
}
},{
field: 'contactsName',
title: '联系人',
formatter: function(value,row,index){
var result ="<input id='"+index+"contactsName' placeholder='联系人'" +
"class='form-control' value='"+(value==undefined?'':value)+"' οnblur='getValues("+index+")'>";
return result //formatter 这里,里面的value一定要加,不然写值的时候会写不上去
}
},
{
field: 'email',
title: '邮箱',
formatter: function(value,row,index){
var result ="<input id='"+index+"email' placeholder='邮箱'" +
"class='form-control' value='"+(value==undefined?'':value)+"' οnblur='getValues("+index+")'>";
return result
}
}, {
field: 'telphone',
title: '电话',
formatter: function(value,row,index){
var result ="<input id='"+index+"telphone' placeholder='电话'" +
"class='form-control' value='"+(value==undefined?'':value)+"' οnblur='getValues("+index+")'>";
return result
}
},{
field: 'comment',
title: '备注',
formatter: function(value,row,index){
var result ="<input id='"+index+"comment' placeholder='备注'" +
"class='form-control' value='"+(value==undefined?'':value)+"' οnblur='getValues("+index+")'>";
return result
}
}]
});
}
//添加行
function addRow(){
var row=
{
"contactsName":"",
"email":"",
"telphone":"",
"comment":""
};
//append 追加到最后一行
//prepend 新增到第一行
$('#exampleTable').bootstrapTable('append', row);
//更新行数据
$('#exampleTable').bootstrapTable('updateRow',row);
//定位到最后一行
$('#exampleTable').bootstrapTable('scrollTo', 'bottom');
}
function getValues(index) {
var rows = $('#exampleTable').bootstrapTable('getData');
$.each(rows, function (i, row) {
if (row.index == (index + 1)) {
row.contactsName = $("#" + index + "contactsName").val();
row.email = $("#" + index + "email").val();
row.telphone = $("#" + index + "telphone").val();
row.comment = $("#" + index + "comment").val();
$('#exampleTable').bootstrapTable('updateRow', row);
return false;
}
});
}
function removeRow(){
var rows = $('#exampleTable').bootstrapTable('getSelections');//获取选中行
if (rows.length == 0) {
layer.msg("请选择要删除的数据");
return;
}
var indexs=[];
for(var i=0;i<rows.length;i++){
indexs[i]=rows[i].index;
}
//删除
$('#exampleTable').bootstrapTable('remove', {
field:'index',
values:indexs
});
}
</script>
嗯,就这样。
如果觉得这个不太行的话,另一个博客指路:https://blog.csdn.net/dizuncainiao/article/details/81742971