easyui的資料網格顯示資料
阿新 • • 發佈:2018-12-10
專案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應該怎麼寫