easyui的数据网格显示数据

骑猪看日落 2022-05-12 08:08 255阅读 0赞

项目ssm(spring+springmvc+mybatis)

编译工具：eclipse

后台框架：easyui

因为easyui数据网格显示的是一种json格式数据：

{
    	"total":1,
    	"rows":[
    	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}
    	
    	]
    }

注：重点就是返回total和rows两个属性，而rows就是封装了我们要返回的数据集

搭建easyui框架可以参考：[easyui教程][easyui]

页面展示效果：

![70][]

前端页面：

<table id="tt" class="easyui-datagrid" style="width:100%;height:500px"
    		url="<%=request.getContextPath()%>/messages/messageLists" 
    		 toolbar="#tb"
    		singleSelect="true" fitColumns="true"  pagination="true">
    	<thead>
    		<tr>
    		<th field="m_id" width="60">留言编号</th>
    			<th field="u_id" width="60">用户编号</th>
    			<th field="m_content"  width="70">留言内容</th>
    			<th data-options="field:'m_date',width:60,align:'center',formatter:dataFormatter">留言时间</th>
    			<th data-options="field:'m_status',width:60,align:'center',formatter:statusFormatter">留言状态</th>
    			<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
    		</tr>
    	</thead>
    </table>

注，table中的<th field="m\_id" width="60">留言编号</th>中的field="m\_id"对应的是你返回数据的属性名

由于状态在数据库中使用int存储，用0,1等表示，所以在数据网格中要使用函数来表达你0,1所表达的意思。

js:

代码实现：

controller层：

/**
    	 * 留言记录
    	 * @param page 分页
    	 * @return 后台管理留言记录信息
    	 */
    	@RequestMapping("/messageLists")
    	@ResponseBody
    	public Map<String,Object>messageList(Page page){
    		Map<String,Object>map=new HashMap<String,Object>();
    		//留言记录
    		List<Messages>list=messagesService.personList(page);
    		//留言记录总数
    		int total=messagesService.personListCount(page);
    		map.put("total", total);
    		map.put("rows", list);
    		return map;
    	}

注：map就是一种key-value对，而@ResponseBody会以json形式返回数据，所以这样返回给前端页面，easyui就可以解析成符合的json数据形式，这样数据网格就可以显示出数据来。

Page类是封装了一些分页的属性：

/**
     * 处理分页
     * @author admin
     *
     */
    public class Page implements Serializable {
    
    
        //当前页
        private Integer page=1;
        //页大小
        private Integer rows=5;
        // 总记录 数
        private Integer totalRecord;
        //总页数
        private Integer totalPage;
        //关键字类型
        private String keyType;
        //查询关键字
        private String keyWord;
        //开始记录位置
        private Integer start=0;
        //用户id
        private String userid;
        //开始时间
        private String startTime;
        //结束时间
        private String endTime;
        //留言状态
        private Integer status;
    
    //setter省略。。。
    
        }

service层：

List<Messages> personList(Page page);
    	Integer personListCount(Page page);

serviceImpl层：

@Override
    	public List<Messages> personList(Page page) {
    		return messagesMapper.personList(page);
    	}
    @Override
    	public Integer personListCount(Page page) {
    		return messagesMapper.personListCount(page);
    	}

mapper.xml:

<select id="personList" resultMap="BaseResultMap2"
    		parameterType="comit.model.Page">
    		select * from messages
    		<where>
    			<if test="userid!='' and userid!=null and userid!='undefined' ">
    				AND u_id=#{userid}
    			</if>
    			<if test="keyWord!='' and keyWord!=null ">
    				AND m_content like concat('%',#{keyWord},'%')
    			</if>
    			<if test="startTime!='' and startTime!=null ">
    				AND m_date  <![CDATA[ >= ]]> #{startTime}
    			</if>
    			<if test="endTime!='' and endTime!=null ">
    				AND m_date  <![CDATA[ <= ]]> #{endTime}
    			</if>
    			<if test="status!='' and status!=null and status==2">
    				AND m_status=0
    			</if>
    			<if test="status!='' and status!=null and status==1">
    				AND m_status=1
    			</if>
    		</where>
    		ORDER BY m_id DESC
    		limit #{start},#{rows}
    	</select>
    	
    	<select id="personListCount" resultType="java.lang.Integer"
    		parameterType="comit.model.Page">
    		select count(1)
    		from messages
    		<where>
    			<if test="userid!='' and userid!=null and userid!='undefined' ">
    				AND u_id=#{userid}
    			</if>
    			<if test="keyWord!='' and keyWord!=null ">
    				AND m_content like concat('%',#{keyWord},'%')
    			</if>
    			<if test="startTime!='' and startTime!=null ">
    				AND m_date <![CDATA[ >= ]]> #{startTime}
    			</if>
    			<if test="endTime!='' and endTime!=null ">
    				AND m_date <![CDATA[ <= ]]> #{endTime}
    			</if>
    			<if test="status!='' and status!=null and status==2">
    				AND m_status=0
    			</if>
    			<if test="status!='' and status!=null and status==1">
    				AND m_status=1
    			</if>
    		</where>
    	</select>

注：重点就是看你想拿到什么样的数据，sql应该怎么写

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。  ###

[easyui]: http://www.jeasyui.net/tutorial/147.html
[70]: /images/20220512/30cc3fee086f4a70b2e1c24a70f1d27b.png