分页表格，layui表格使用，在表格中显示图片

最新推荐文章于 2024-12-27 14:12:58 发布

wskfly

最新推荐文章于 2024-12-27 14:12:58 发布

阅读量1.4w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/wskfly/article/details/86477987

layui 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用layui框架在网页上展示表格数据，并实现基于条件的搜索功能。包括HTML结构搭建、JS代码配置、图片显示优化及后端SSM框架的数据交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用layui显示表格数据的时候也是一步一步来的，先只是显示数据和分页，后来在带条件搜索显示，最后在表格中显示图片

先看效果图

下面先一步一步的附上代码吧

这是数据表格的HTML代码，先进行页面渲染，然后在js里面进行数据请求。

<body>
	<div>
		<blockquote class="layui-elem-quote">用户管理->医生列表</blockquote>
		<!-- <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-left:3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px"></i>刷新</a> -->
	</div>
	<div class="demoTable layui-form">
		&nbsp;&nbsp;&nbsp;&nbsp;医生名称：
		<div class="layui-inline">
			<input class="layui-input" name="keyWord" id="keyWord"
				autocomplete="off">
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;性别：
		<div class="layui-inline ">
			<select name="keyWord2" id="keyWord2">
				<option value="" selected>--请选择--</option>
				<option value="0">男</option>
				<option value="1">女</option>
			</select>
		</div>
		<button class="layui-btn" data-type="reload"
			style="margin-left: 43px" id="search">搜索</button>

	</div>
	

	<div>
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>

</body>

这个是js代码，具体layui的语法使用可以参考https://www.layui.com/demo/table.html这里不做语法的解释。

<script type="text/javascript">
layui.use(['table','laytpl'],
		function() {
		    var table = layui.table;
		    var laytpl = layui.laytpl;
		    table.render({
		        elem: '#test',
		        url: '${pageContext.request.contextPath}/userManger/doctorlist',
		        id: 'testReload',
		        title: '医生数据表',
		        cols: [[{
		            type: 'checkbox',
		          
		        },
		        {
		            field: 'id',
		            title: 'ID',
		            width: 80,
		            unresize: true,
		            sort: true
		        },
		        {
		            field: 'imgUrl',
		            title: '头像',
		            width: 120,
		            templet:"#imgtmp"
		        },
		        {
		            field: 'name',
		            title: '姓名',
		            width: 100
		        },
		        {
		            field: 'sex',
		            title: '性别',
		            width: 80,
		            sort: true,
		            templet: function(row) {
		                if (row.sex == 0) {
		                    return "男"
		                } else if (row.sex == 1) {
		                    return "女"
		                }else if (row.sex ==null){
		                	return "未知"
		                }
		            }
		        },
		        {
		            field: 'job',
		            title: '职称',
		            width: 100,
		            sort: true
		        },
		        {
		            field: 'hospitalName',
		            title: '医院名称',
		            width: 150,
		            sort: true,
		        },
		        {
		            field: 'divisionName',
		            title: '科室名称',
		            width: 150

		        },
		        {
		            field: 'goodAt',
		            title: '擅长',
		            width: 150

		        },
		        {
		            title: '操作',
		            toolbar: '#barDemo',
		            width: 150
		        }]],
		        page: true
		    });

		    //监听单元格工具事件，test是lay-filter的值，进行过滤
		    table.on('tool(test)',
		    function(obj) {
		        var data = obj.data;
		        //console.log(obj)
		        if (obj.event === 'del') {
		            layer.confirm('确认删除吗？',
		            function(index) {
		                //确认删除发送ajax请求
		                $.ajax({
		                    url: '${pageContext.request.contextPath}/userManger/userdelete',
		                    type: "get",
		                    data: {
		                        "id": data.id
		                    },
		                    success: function(d) {
		                        if (d.code == 0) {
		                            obj.del();
		                        } else {
		                            layer.msg("删除失败!", {
		                                icon: 5
		                            });
		                        }
		                    }
		                });
		                layer.close(index);
		            });
		        } else if (obj.event === 'edit') {
		            layer.open({
		                type: 2,
		                title: "编辑医生",
		                area: ['750px', '450px'],
		                maxmin: true,
		                content: '${pageContext.request.contextPath}/userManger/doctorEditUI/' + data.id
		            })
		        }
		    });

		    //table重载
		    var $ = layui.$,
		    active = {
		        //搜索的实现
		        reload: function() {
		            var keyWord = $('#keyWord');
		            var keyWord2 = $('#keyWord2');

		            //执行重载
		            table.reload('testReload', {
		                page: {
		                    curr: 1
		                    //重新从第 1 页开始
		                },
		                where: {
		                    keyWord: keyWord.val(),
		                    keyWord2: keyWord2.val()
		                }
		            });
		        }
		       

		    };

		    $('.layui-btn').on('click',
		    function() {
		        var type = $(this).data('type');
		        active[type] ? active[type].call(this) : '';
		    });

		});
</script>

要实现表格显示图片可以用layui模板，我定义了一个模板然后在数据表格中使用，至于这个src里面的值是什么，就是你访问数据表格URL返回的json对象。layui模板https://www.layui.com/doc/modules/laytpl.html

解决图片在表格中显示不全的问题

<!--layui.table图片显示不全，需重新定义CSS  -->
<style type="text/css"> 
.layui-table-cell{
	height:auto!important;
	white-space:normal;
}

</style>

现在附上后台ssm代码

controller层代码

@RequestMapping(value = "/doctorlist", method = RequestMethod.GET)
	@ResponseBody
	public ResultMap<List<Doctor>> doctorlist(Page page,@RequestParam("limit") int limit){
		page.setRows(limit);
		int total=userMangerService.selectDocPageCount(page);
		List<Doctor> userList=userMangerService.selectDocPageList(page);
		return new ResultMap<List<Doctor>>("",userList,0,total);		
	}

Page和ResultMap封装实体类

package com.eyou.esd.entity;

public class Page {
	//当前页
	private Integer page = 1;
	// 每页大小
	private Integer rows = 10;
	// 总记录数
	private Integer totalRecord;
	// 总页数
	private Integer totalPage;
	
	//分页开始位置
	private Integer start;
	
	private String keyWord;
	
	private String keyWord2;
	
	public Integer getPage() {
		return page;
	}
	public void setPage(Integer page) {
		this.page = page;
	}
	public Integer getRows() {
		return rows;
	}
	public void setRows(Integer rows) {
		this.rows = rows;
	}
	public Integer getTotalRecord() {
		return totalRecord;
	}
	public void setTotalRecord(Integer totalRecord) {
		this.totalRecord = totalRecord;
	}
	public Integer getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(Integer totalPage) {
		this.totalPage = totalPage;
	}
	public String getKeyWord() {
		return keyWord;
	}
	public void setKeyWord(String keyWord) {
		this.keyWord = keyWord;
	}
	
	public String getKeyWord2() {
		return keyWord2;
	}
	public void setKeyWord2(String keyWord2) {
		this.keyWord2 = keyWord2;
	}
	public Integer getStart() {
		start=(page-1)*rows;
        return start;
	}
	public void setStart(Integer start) {
		this.start = start;
	}
	
	

}

package com.eyou.esd.entity;

public class ResultMap<T> {
	
	private String msg;
    private  T data;
    private  int code;
    private  int count;
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public T getData() {
		return data;
	}
	public void setData(T data) {
		this.data = data;
	}
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	public ResultMap(String msg, T data, int code, int count) {
		this.msg = msg;
		this.data = data;
		this.code = code;
		this.count = count;
	}
	
	public ResultMap(int code) {
		this.code = code;
    }
	
	
	public ResultMap(int code,String msg) {	
		this.msg = msg;
		this.code = code;
	}
    
     
}

Mapper.xml的代码，这里用的是sqlserver，如果是mysql分页语法就是用limit

<select id="selectDocPageCount" parameterType="com.eyou.esd.entity.Page"
		resultType="java.lang.Integer">
		select count(1) from Base_Doctor
		<where>
			<if test="keyWord2!=null and keyWord2!=''">AND Sex = #{keyWord2,jdbcType=INTEGER}</if>
			<if test="keyWord!=null and keyWord!=''">AND Name like CONCAT(CONCAT('%',#{keyWord}),'%')</if>
		</where>
	</select>
	
	<select id="selectDocPageList" parameterType="com.eyou.esd.entity.Page"
		resultMap="DocResultMap">
		select BDoc.* ,BH.HospitalName,BD.DivisionName from Base_Doctor BDoc left join Base_Hospital BH on BDoc.HospitalID=BH.ID left join Base_Division BD on BDoc.DivisionID=BD.ID
		<where>
			<if test="keyWord2!=null and keyWord2!=''">AND Sex = #{keyWord2,jdbcType=INTEGER}</if>
			<if test="keyWord!=null and keyWord!=''">AND Name like CONCAT(CONCAT('%',#{keyWord}),'%')</if>
		</where>
		order by BDoc.ID
		offset #{start,jdbcType=INTEGER} rows
		fetch next #{rows,jdbcType=INTEGER} rows only
		
	</select>

mapper.xml結果集映射

<resultMap id="DocResultMap" type="com.eyou.esd.entity.Doctor">
		<id column="ID" property="id" jdbcType="INTEGER" />
		<result column="Code" property="code" jdbcType="VARCHAR" />
		<result column="Name" property="name" jdbcType="VARCHAR" />
		<result column="Sex" property="sex" jdbcType="INTEGER" />
		<result column="Attending" property="attending" jdbcType="VARCHAR" />
		<result column="ImgUrl" property="imgUrl" jdbcType="VARCHAR" />
		<result column="Job" property="job" jdbcType="VARCHAR" />
		<result column="GoodAt" property="goodAt" jdbcType="VARCHAR" />	
		<result column="CreateTime" property="createTime" jdbcType="TIMESTAMP" />
		<result column="Phone" property="phone" jdbcType="VARCHAR" />
		<result column="DivisionName" property="divisionName" jdbcType="VARCHAR" />
		<result column="HospitalName" property="hospitalName" jdbcType="VARCHAR" />	
		<result column="DivisionID" property="divisionID" jdbcType="INTEGER" />
		<result column="HospitalID" property="hospitalID" jdbcType="INTEGER" />	
	</resultMap>