BootstrapTable之添加自增序号、自定义删除功能
前言
当我们的表格的原始数据中没有序号字段是,我们可以通过BootstrapTable为其设置自增序号并显示,同时我们也可以为表格添加自定的删除功能,来删除某一列数据。
一、添加自增序号
在自己数据列的最前端加上序号列即可,具体代码如下,其中title为姓名的列为自己数据中真实的第一列,而title为序号的列为添加的自增序号列,效果如下所示:
columns: [
// {
// checkbox: true,
// visible: true //是否显示复选框
// },
{
title: '序号',
align: "center",
width: 40,
formatter: function (value, row, index) {
return showIndex(value, row, index);
}
},
{
field : 'userName',
title : '姓名',
align : 'center',
},
{
field : 'sbuCode',
title : 'SBU',
align : 'center',
},
{
field : 'departmentSort',
title : '部门分类',
align : 'center',
},
{
field:'ID',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
],
二、自定义删除功能
如上图中表格最后红色叉号的显示,即为自定义的删除功能,具体样式代码如下所示:
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
userName = row.userName;
sbuCode = row.sbuCode;
departmentSort = row.departmentSort;
result += '<a href="javascript:;" class="btn btn-xs btn-danger" style="margin:5px" οnclick="DeleteUser(userName,sbuCode,departmentSort)" title="删除">';
result += '<span class="glyphicon glyphicon-remove"></span></a>';
return result;
}
点击事件,具体代码如下所示:
function DeleteUser(userName,sbuCode,departmentSort){
var url = './rest/feePermission/deleteUser';
$.ajax({
url : url,
type : "post",
contentType : "application/json;charset=utf-8",
data:JSON.stringify({
userName:this.userName,
sbuCode:this.sbuCode,
departmentSort:this.departmentSort
}),
dataType : "json",
success : function(data) {
alert("删除成功!")
} ,
error : function(err) {
alert("删除失败!")
}
});
}
总结
BootstrapTable里面两个非常简单且实用的功能,记录一下,欢迎各位大佬指正。
更多推荐
BootstrapTable之添加自增序号、自定义删除功能
发布评论