主要參考官方的文檔，歡迎評論
1、集成easyui,下面是我的引入方式，我引入到了head.html 每次只要引入該頁面就可以了。
<!-- easyui樣式支持 -->
<link rel="stylesheet" type="text/css" href="${basePath}/plugins/jquery-easyui-1.7.0/themes/default/easyui.css">
<!-- easyui圖標支持 -->
<link rel="stylesheet" type="text/css" href="${basePath}/plugins/jquery-easyui-1.7.0/themes/icon.css">
<!-- 引入jquery -->
<script type="text/javascript" src="${basePath}/plugins/jquery-easyui-1.7.0/jquery.min.js"></script>
<!-- easyui功能支持 -->
<script type="text/javascript" src="${basePath}/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<!-- easyui中文支持 -->
<script type="text/javascript" src="${basePath}/plugins/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
2、html頁面
引入head.html
<head>
<title>廠區信息</title>
<#include "../include/head.html">
</head>
<body>
<table id="dg" title="廠區信息"></table>
<script>
$(function () {
init_datagrid();
});
function init_datagrid() {
//默認第一頁，
var pageNumber = 1;
//每頁顯示10行
var pageSize = 10;
//表頭字段
var arr_columns = dg_columns();
//datagrid名稱
var title_name= "園區信息";
$("#dg").datagrid({
title: title_name,
url: '${basePath}/factory/datagrid',
method: 'post',
singleSelect: true,
remoteSort: true, //定義從服務器對數據進行排序。
pagination: true, //在DataGrid控件底部顯示分頁工具欄。
pageNumber: pageNumber,
pageSize: pageSize,
pageList: [5,10,15,20],
fitColumns:true,
columns: [arr_columns],
rownumbers: true,
loadMsg: '正在加載數據',
checkbox: true,
emptyMsg: '列表為空',
selectOnCheck: false,
checkOnSelect: false
});
}
function dg_columns() {
var arr = new Array();
arr.push({field: 'factoryCode', title: '廠區編碼', width: $(this).width() * 0.5, align: 'center'});
arr.push({field: 'factoryName', title: '廠區名稱', width: $(this).width() * 0.5, align: 'center'});
arr.push({field: 'factoryAddress', title: '廠區地址', width: $(this).width() * 0.5, align: 'center'});
arr.push({field: 'company', title: '所屬公司', width: $(this).width() * 0.5, align: 'center'});
return arr;
}
</script>
</body>
寫本頁面時建議將init_datagrid()封裝成一個通用方法，寫入相應的參數，以實現方法的復用，減少代碼的重復
3.java后台
注意前台需要接收的數據格式為：
{"total":8,"rows":[{"factoryCode":"E-01","factoryName":"111111","id":"1"},{"factoryCode":"E-02","factoryName":"222222","id":"2"}]}數據涉密顧不能貼出
所以我們的目的就是將查詢出來的數據寫成上述json格式
/**
* 加載easyuidatagrid 數據
* @param request
* @return
*/
@ResponseBody
@RequestMapping("/datagrid")
public JSONObject datagrid(HttpServletRequest request){
int pageNumber = Integer.parseInt(request.getParameter("page")); //獲取當前頁碼，easyui默認傳到后台
int pageSize = Integer.parseInt(request.getParameter("rows")); //獲取每頁顯示多少行，easyui默認傳到后台
int count = mdmFactoryInfoService.count();
List<MdmFactoryInfo> factoryList = mdmFactoryInfoService.selectPage(pageNumber*pageSize,(pageNumber-1)*pageSize);
System.out.println(CommonUtil.toGridJson(count,factoryList));
return CommonUtil.toGridJson(count,factoryList);
}
CommonUtil代碼
/**
* 轉為datagrid json
*/
public static JSONObject toGridJson(int totalCount, Object obj) {
if(null==obj){
JSONObject jsonResult = new JSONObject();
jsonResult.put("total",totalCount);
jsonResult.put("rows",new JSONArray());
return jsonResult;
}
if(!Collection.class.isAssignableFrom(obj.getClass())) {
JSONObject jsonResult = new JSONObject();
jsonResult.put("total", totalCount);
jsonResult.put("rows", new JSONArray());
return jsonResult;
}
String json = JSON.toJSONString(obj);
JSONObject jsonResult = new JSONObject();
jsonResult.put("total", totalCount);
jsonResult.put("rows", obj);
return jsonResult;
}
數據層我用的mybatis，這里主要注意的是要分頁查詢的sql，我用的是oracle。
分頁查詢sql
<select id="selectPage" parameterType="java.lang.Integer" resultMap="BaseResultMap">
SELECT * FROM ( SELECT ROWNUM rn , M.* FROM MDM_FACTORY M WHERE Rownum <= #{firstIndex,jdbcType=INTEGER}) WHERE rn > #{pageSize,jdbcType=INTEGER}
</select>
數據總量sql
<select id="count" parameterType="java.lang.String" resultType="java.lang.Integer">
select count(*) from MDM_FACTORY
</select>
以上結束后展示一下頁面
以上有錯誤歡迎指正