這兩天開發報表，用到了easyui datagrid 數據表，記錄一下：
在頁面中只需要：
<div >
<table id="magazineGrid">
</table>
</div>
js中：
function init(opid){
$('#magazineGrid').datagrid({
height: ($(window).height()*0.9),
url: 'statistic/queryStatisticsByDetail.do',
method: 'POST',
queryParams: { 'opid': opid},
idField: 'Id',
striped: true,
// fit: true, //自適應大小
//fitColumns: true,
singleSelect: true,
rownumbers: true,
pagination: true, //true代表顯示分頁控件 ，而且傳到後臺的參數中會自動添加 page 和 row 兩參數，後臺直接就可以接收到
nowrap: false,
showFooter: true,
pageSize: 20,//每頁顯示的記錄條數，默認爲10
pageList: [10,20,30,50,70],//可以設置每頁記錄條數的列表
toolbar: [{
text: '詳細號源推送信息表',
}],
columns: [[
{ field: 'opId', title: '操作ID', width: 80, align: 'center' },
{ field: 'sourceId', title: '號源ID', width: 100, align: 'center' },
{ field: 'scheduleId', title: '排班ID', width: 100, align: 'center' },
{ field: 'hospitalCode', title: '醫院編碼', width: 100, align: 'center' },
{ field: 'hospitalName', title: '醫院名稱', width: 150, align: 'center' },
{ field: 'deptCode', title: '科室編碼', width: 100, align: 'center' },
{ field: 'deptName', title: '科室名稱', width: 200, align: 'center' },
{ field: 'doctorCode', title: '醫生編碼', width: 100, align: 'center' },
{ field: 'doctorName', title: '醫生姓名', width: 100, align: 'center' },
{ field: 'timeDesc', title: '班次時段', width: 80, align: 'center' },
{ field: 'sourceDate', title: '號源日期', width: 100, align: 'center' },
{ field: 'sourceWeek', title: '號源星期', width: 80, align: 'center' },
{ field: 'sourceTime', title: '號源時間', width: 100, align: 'center' },
{ field: 'sourceStatus', title: '號源狀態', width: 80, align: 'center' },
{ field: 'operateType', title: '操作類型', width: 80, align: 'center' },
{ field: 'operateStatus', title: '操作狀態', width: 80, align: 'center' },
{ field: 'oprateComment', title: '結果描述', width: 300, align: 'center' },
{ field: 'updateDate', title: '更新時間', width: 150, align: 'center' }
]],
onBeforeLoad: function (param) {
},
onLoadSuccess: function (data) {
},
onLoadError: function () {
},
onClickCell: function (rowIndex, field, value) {
}
});
}
這些都是前端需要的，當然頁面中首先也要引入easyui控件纔可以的：
<!--easyui-->
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/js/easyui-1.5/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/js/easyui-1.5/themes/icon.css">
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
標紅的地方值得注意，之前一直用../這種方式來，據說用以上這種方法指示路徑會比較好。
接下來就是今天要說的重點了， 後臺返回的參數要組裝成json格式：
jsonobj.put("total", total); //總條數有多少
jsonobj.put("rows", jarray); //需要顯示的條數是多少
數據格式如下： total 表示總共有多少條 rows 表示 本次要展示的具體數據
{"total":2,"rows":[{"ID":1,"PropertyName":"顏色","SubTime":"\/Date(1405084530147)\/","ReMark":null},{"ID":2,"PropertyName":"尺碼","SubTime":"\/Date(1405084568650)\/","ReMark":null}]}
這樣前端的分頁纔會正確展示出來。
還有一個就是oracle的後臺分頁技術了， oracle和 mysql不一樣， mysql分頁用 limit就很簡單，但是oracle不一樣
oracle的寫法如下：
SELECT * FROM
(
SELECT A.*, ROWNUM RN
FROM ( select t.id,t.op_id,t.source_id,t.schedule_id,t.hospital_code ,t.hospital_name ,
t.dept_code,t.dept_name,t.doctor_code,t.doctor_name,t.time_desc,t.source_date,
t.source_week,t.source_time,t.source_status,t.operate_type ,t.operate_status,t.oprate_comment ,
to_char(t.update_date,'yyyy-MM-dd HH24:MI:SS') update_date from source_statistics_info t where t.op_id=#{opid}) A
WHERE ROWNUM <![CDATA[ <= ]]> #{end}
)
WHERE RN <![CDATA[ > ]]> #{start}
標紅部分是實際上我們查詢的語句， 嵌套上其他部分，就是分頁的結果！