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

川长思鸟来 2023-07-22 13:26 30阅读 0赞

**最近做的一个项目中用到了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();
        }
    };

**达到的预期效果如下图所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]  
**总结：可以用formatter:function(value,row,index)函数来控制数据表中的状态选值，也可以为每行数据表创建静态超链接，通过传每行的id值进超链接来进行一些相关的CRUD操作。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]: /images/20230528/a21eea7381f64ab395f508fd76587c41.png