这两天开发报表,用到了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}
标红部分是实际上我们查询的语句, 嵌套上其他部分,就是分页的结果!