项目前端用的是easyui框架,后端是ssm(spring,springMVC,mybatis),数据库是oracle。
easyUI是一个很不错的后台管理系统框架。系统中数据基本都是通过datagrid去展现。
他的基本流程是:
前端statement.jsp
<table id="statementGrid" class="easyui-datagrid" style="height:100%;100%" toolbar="#toolbar"></table>
statement.js
首先页面初始化:
/* 页面初始化 */ $(function () { statementGridInit(); //表格初始化 });
/* 表格初始化 */
function statementGridInit() {
$('#statementGrid').datagrid({
fitColumns: true, //是否列自适应
rownumbers: true,
striped: true,
singleSelect: true,
locale: "zh_CN", //语言
loader:load,
fitColumns:true, //宽度自适应
frozenColumns:[[
{ field:'comName',title:'单位名称',rowspan:3,halign: 'center',formatter:
function(value,row, index){
if (value == "小计:"||value == "总计:"){
return '<b>'+value+'</b>';
}else{
return value;
}
}},
{ field:'slipYear',title:'年度',rowspan:3,halign: 'center' },
{ field:'slipCom',title:'投保单位',rowspan:3,halign: 'center' },
{ field:'slipNo',title:'保单号',rowspan:3,halign: 'center' },
{ field:'xmsqName',title:'项目名称',rowspan:3,halign: 'center'}
]],
});
}
/* 表格数据加载 */
function load(param, success, error) {
var url= '/kjps/system/countSearch/list';
var data22 = form2Json("catalogCodefm");
var params = {
comSuperior:data22.comSuperior,
comName:data22.comName,
slipYear:data22.slipYear,
slipCom:data22.slipCom,
slipNo:data22.slipNo
}
doRequest({
url: url,
isEncrypt: true,
data:params,
callback: function (res) {
success(res);
}
});
};
后端:
/** * 查询列表数据 */ @RequestMapping(value = "/list", method = RequestMethod.POST) @ResponseBody public ResBody<CountSearch> list(@RequestBody CountSearch countSearch,HttpServletRequest request) { ResBody<CountSearch> res = new ResBody<>(); res.setRows(countSearchService.list(countSearch,request)); res.setMsg("查询列表成功"); return res; }
controller去调service,service去调mapper。