本人最近在做一个项目,需要将本地文件夹的照片读取到前台进行显示,显示的时候,需要对照片进行批注,如下图所示。
这在显示的时候,就需要对某些列增加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>" }}] }); }