bootstrap-table表格插件的使用案例

最近做的一个项目中用到了bootstrap-table表格插件，以下是js文件中部分相关代码片：

/**
* 初始化表格的列
*/
Face.initColumn = function () {
var columns = [
{title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'},
{title: '用户姓名', field: 'userName', align: 'center', valign: 'middle', sortable: true},
{title: '身份证号', field: 'idCard', align: 'center', valign: 'middle', sortable: true},
{title: '联系电话', field: 'phone', align: 'center', valign: 'middle', sortable: true},
{title: '所在工地', field: 'constructionSite', align: 'center', valign: 'middle', sortable: true},
{title: '状态', field: 'isDelete', align: 'center', valign: 'middle', sortable: true,formatter:function(value,row,index){
switch(value){
case 0:{
return '正常';
}
case 1:{
return '已删除';
}
}
return value;
}},
{title: '录入时间', field: 'createTime', align: 'center', valign: 'middle', sortable: true},
{title: '操作',field:'isDelete',align: 'center', valign: 'middle', sortable: true,formatter:function(value,row,index){
var a = '<a href="faceRecognition/face_info?faceId='+ row.id +'">查看</a> ';
var b = '<a href="faceRecognition/face_edit?faceId='+ row.id +'">编辑</a> ';
var c = '<a  οnclick="return Face.delFace('+row.id+')">删除</a> ';
if(value == 0) {
return a+b+c;
}
if(value == 1) {
return a;
}
}},
];

return columns;
};

Face.delFace = function (id) {
if (confirm("是否删除该人脸数据？")==true) {

this.InfoData={"id":id};
//提交信息
var ajax = new $ax(Feng.ctxPath + "/faceRecognition/delete", function (data) {
Feng.success("删除成功!");
Face.table.refresh();

}, function (data) {
Feng.error("删除失败!" + data.responseJSON.message + "!");
Face.table.refresh();
});
ajax.set(this.InfoData);
ajax.start();
}
};

达到的预期效果如下图所示：

总结：可以用formatter:function(value,row,index)函数来控制数据表中的状态选值，也可以为每行数据表创建静态超链接，通过传每行的id值进超链接来进行一些相关的CRUD操作。