bootstraptable使用总结之前端样式设计

本人最近在做一个项目，需要将本地文件夹的照片读取到前台进行显示，显示的时候，需要对照片进行批注，如下图所示。

这在显示的时候，就需要对某些列增加checkbox按钮。在实现的时候也是找了很多的资料，后头在参考了bootstraptable怎么实现自定义按钮列的操作的时候，发现了可以return一个HTML代码块到相应的table里面，就参照这个思路实现了我的想法，参考代码如下：

function showTable() {
    $('#table').bootstrapTable({
        data:imageList,
        columns: [{
            field: 'fileName',
            title: 'fileName',
            formatter : function (value, row, index) {
                console.log()
                return"<p name='fileName'>"+value+"</p>";
            }
        },{
            field: 'base64Image',
            title: '照片',
            formatter : function (value, row, index) {
                return"<img  name= 'imageSrc'    src='"+value+"' alt='' style='width: 60px;height: 60px'>";
            }
        }, {
            field: 'normal',
            title: '正常',
            formatter:function(value, row, index){
                return "<label><input name='checkbox"+index+"' type = \"checkbox\"  value='正常'style='height: 20px;width: 20px'>正常</label>"
            }
        },{
            field: 'curl',
            title: '卷边',
            formatter:function(value, row, index){
                return "<label><input name='checkbox"+index+"' type = \"checkbox\" value='卷边'style='height: 20px;width: 20px'>卷边</label>"
        }},{
            field: 'fracture',
            title: '破裂',
            formatter:function(value, row, index){
                return "<label><input name='checkbox"+index+"' type = \"checkbox\"  value='破裂'style='height: 20px;width: 20px'>破裂</label>"
        }}, {
            field: 'notBulge',
            title: '未胀开',
            formatter:function(value, row, index){
                return "<label><input name='checkbox"+index+"' type = \"checkbox\" value='未胀开'style='height: 20px;width: 20px'>未胀开</label>"
        }}]
    });
}

bootstraptable使用总结之前端样式设计

猜你喜欢