easyui的数据网格显示数据

项目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教程

页面展示效果：

前端页面：

<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:

<script>
//留言状态
function statusFormatter(value,row,index){
	if(value==1){
		return "公开";
	}else{
		return "不公开";
	}
}

//时间戳的转换
function dataFormatter(value,row,index){
	    var da = value;
	    da = new Date(da);
	    var year = da.getFullYear()+'年';
	    var month = da.getMonth()+1+'月';
	    var date = da.getDate()+'日';
	    return ([year,month,date].join('-'));  
}
/* 操作 */
function formatOper(val,row,index){
	var e = '<a href="#" id="deitcls" onclick="updateStatus(' + row.m_id +","+1+ ')">公开</a> ';
    var d = '<a href="#" onclick="updateStatus(' + row.m_id+","+0 +')">不公开</a>';
    return e + d;
}
	
</script>

代码实现：

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的数据网格显示数据

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

猜你喜欢