SSM+EasyUI之数据表格中图片展示，供新手参考！

最新推荐文章于 2020-01-09 13:39:45 发布

弦上小风筝

最新推荐文章于 2020-01-09 13:39:45 发布

阅读量1.2k

点赞数 3

文章标签： easyui ssm

本文链接：https://blog.csdn.net/weixin_43972754/article/details/88660171

版权

数据库图片字段保存图片名字即可，如：zhangsan.jpg

1、model层

private String simage;
//此处省略其他字段
public String getSimage() {
        return simage;
    }

    public void setSimage(String simage) {
        this.simage = simage;
    }

2、dao层

List<Student> find(Map<String, Object> map);

3、service层

List<Student> find(Map<String, Object> map);

4、serviceImpl层

@Service("StudentService")
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentDao studentDao;
@Override
    public List<Student> find(Map<String, Object> map) {
        return studentDao.find(map);
    }

5、mapper

<mapper namespace="com.xxxx.dao.StudentDao">
    <resultMap type="Student" id="StudentResult">
        <id property="id" column="id"/>
        <result property="simage" column="simage"/>
</mapper>
 <select id="find" parameterType="Map" resultMap="StudentResult">
        select * from t_b_student
        <where>
            <if test="name!=null and name!='' ">
                and name like #{name}
            </if>
        </where>
        <if test="start!=null and size!=null">
            limit #{start},#{size}
        </if>
    </select>

6、controller

@RequestMapping("/list")
    public String list(HttpServletResponse res) throws Exception {
        List<Student> studentList = studentService.find(map);
        JSONObject result = new JSONObject();
        JSONArray jsonArray = JSONArray.fromObject(studentList);
        result.put("rows", jsonArray);
        ResponseUtil.write(res, result);
        return null;
        }

7、json数据工具

public class ResponseUtil {
    public static void write(HttpServletResponse response, Object object) throws Exception {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(object);
        out.flush();
        out.close();
    }
}

6、数据表格

<table id="dg" title="宿舍人员管理" class="easyui-datagrid" fitColumns="true"
       pagination="true" rownumbers="true"
       url="${pageContext.request.contextPath}/student/list" fit="true"
       toolbar="#tb"
       iconCls="icon-ok">
    <thead>
    <tr>
        <th field="cb" checkbox="true" align="center"></th>
        //此处省略其他字段
        <th field="simage" width="50" align="center" formatter="showImg">图像采集信息</th>
    </tr>
    </thead>
</table>

7、图片展示js代码

function showImg(val,row){
            return '<img  style="width: 150px" src="${pageContext.request.contextPath}/static/images/student/'+val+'"/>';
        }

8、效果展示