formatter 的一个实用小例子:数据库文字显示到页面变为图片

formatter简介:

单元格formatter(格式化器)函数，带3个参数：
value：字段值。
row：行记录数据。
index: 行索引。
js代码如下:

    $(function() {
        var options = {
            url: prefix + "/list",
            modalName: "责任清单",
			search: false,
	        showExport: true,
            columns: [{
	            checkbox: true
	        },
			{
				field : 'riskgrade', 
				title : '风险等级',
				sortable: false,
				formatter: function(value, row, index) {
	            	var img='';
	            	if(value=="一"){
	            		img='<img src="/img/ehs/Ⅰ级.png">';
	            	}
	            	else if(value=="二"){
	            		img='<img src="/img/ehs/Ⅱ级.png">';
	            	}
	            	else if(value=="三"){
	            		img='<img src="/img/ehs/Ⅲ级.png">';
	            	}
	            	else if(value=="四"){
	            		img='<img src="/img/ehs/Ⅳ级.png">';
	            	}
	            	else if(value=="五"){
	            		img='<img src="/img/ehs/Ⅴ级.png">';
	            	}
	            	return img;
	            }
			},
	        {
	            title: '操作',
	            align: 'center',
	            formatter: function(value, row, index) {
	            	var actions = [];
	            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.zerenid + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                    actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.zerenid + '\')"><i class="fa fa-remove"></i>删除</a>');
					return actions.join('');
	            }
	        }]
        };
        $.table.init(options);
    });
</script>

数据库设计如下

页面显示效果:

当然了,要先有图片和设置图片地址,第一次写博客,不足之处希望大家海涵 ^_