springmvc+easyui实现透视表-动态生成列-白红宇

springmvc+easyui实现透视表-动态生成列

阅读量：6564 次

发布时间：2019-06-24

本文共 6199 字，大约阅读时间需要 20 分钟。

项目需求里面要求实现一个类似于excel里透视表的功能，大致意思就是选择对应的数据库之后，行标签和列标签都是可选的，然后在页面上就生成对应的相关记录。
例如，我选择“财务信息”数据库，列标签选择“部门”，行标签选择“科目”，页面上就显示每个部门在每项科目上的财务信息（这里就简单化为支出）。

因为我前台选择的是easyui框架，一般用于显示表格都是在datagrid的columns定义filed和title，但是这个需求就无法事先定义好这些属性，只有在运行时才能装载这些组件，怎么办呢？看了很多网上的信息，发现讲的都很模糊，要不就是简单问题复杂化，要不就是一言带过，于是就决定自己弄，毕竟看别人的东西只是个启发。废话不多说，开始。

难点：

1.前台js动态生成datagrid配置

2.后台json动态装配

解决办法：

对于第一个难点，

弄懂核心原理是最重要的，核心就是重新生成column字符串。意思就是说，原先是前台js事先写死，但是现在传一个值过去，格式和原先保持一致就可以了。

既然知道这个原理了，那问题就迎刃而解了，我先调用后台处理方法，再返回对应格式的字符串给前台就行了。即保证前台获取的json格式如下：

[html]

{"total":23,

"rows":[

{"3":0,"2":91940.0,"1":0,"4":50000.0,"detailSubject":"01.1 购置设备费"},

{"3":36000.0,"2":0,"1":80000.0,"4":0,"detailSubject":"01.2 研制设备费"}],

"columns":[[{"field":"detailSubject","width":100,"title":"明细科目"},

{"field":"1","width":100,"title":"D0 材料部"},

{"field":"2","width":100,"title":"D1 工程部"},

{"field":"3","width":100,"title":"D2 软件部"},

{"field":"4","width":100,"title":"D3 物理部"}]]

}

下面是实现的两种前台的写法：
第一种前台写法：

[javascript]

$(function(){

//初始化

$("#pivotTable_datagrid").datagrid({

type: 'POST',

pagination:true,

rownumbers:true,

fit:true,

width:1024,

height:500,

nowrap: false,

border: false,

pageSize:10,

singleSelect:true

});

loadDatagrid();

});

function loadDatagrid() {

$.ajax({

url: path+'/pivotTable/datagrid',

type:"POST",

success: function(data){

var options = $("#pivotTable_datagrid").datagrid("options"); //取出当前datagrid的配置

var json = decodeURIComponent(data.columns);//解码

console.info(json);

options.columns = eval(json);

$('#pivotTable_datagrid').datagrid(options);

$('#pivotTable_datagrid').datagrid("loadData", data.rows);//实例化之后立刻载入数据源,加载本地数据，旧的行会被移除。

}

});

}

这一种方法主要是把后台传过来的column对应的json数组通过options赋给datagrid的column属性，然后再重新.datagrid()，这个方法有个缺陷，就是没法实现刷新。
因为项目工期比较紧，我就没有仔细研究为什么会这样。下面介绍下另一种写法，其实原理还是一样的，从后台获取column的json配置：

* 生成透视表，

function create() {

var database = $('#pivotTable_searchForm input[name=database]').val();

var colTag = $('#pivotTable_searchForm input[name=colTag]').val();

var rowTag = $('#pivotTable_searchForm input[name=rowTag]').val();

console.info(database);

if (database.trim() == "") {

$.messager.alert('提示', '请先选择数据源！', 'info');

}else if(colTag.trim() == "" && rowTag.trim() == ""){

$.messager.alert('提示', '请至少选择一个行标签或者列标签！', 'info');

}else if(colTag.trim() == rowTag.trim()){

$.messager.alert('提示', '亲，行标签和列标签不能一样哦！', 'info');

}else{

console.info(database);

console.info(colTag);

console.info(rowTag);

var url = path+'/pivotTable/datagrid?database='+database

+'&colTag='+colTag+'&rowTag='+rowTag;

$.ajax({

url : url,

dateType : 'json',

type : 'post',

success : function(r) {

console.info(r.columns);

$('#pivotTable_datagrid').datagrid({

url : url,

fit : true,

border : false,

pagination : true,

rownumbers : true,

fitColumns : true,

columns : r.columns //这里提取后台传过来的json数组里的columns数据，

});

}

});

}

}

这样第一个难点就解决了，只要后台传过来的json格式正确，前台就能显示对应的界面。那么问题来了，学挖掘机技术哪家强？好吧，开个玩笑^_^

第二个难点，我怎么在后台生成动态的column的json？（因为笔者是用java的springmvc写的，所以可能下面方法只适合javaer）

很简单，如果实体类的属性知道，就一个通过java反射获取，填充到column的field的属性里。先看代码：

后台：

* 生成透视表

* @return

@ResponseBody

@RequestMapping("/pivotTable/datagrid")

public DataGrid testPage(PageHelper page,HttpServletRequest request){

DataGrid dg = new DataGrid(); //这个是用于向前台传送整个json数据的实体bean

PageHelper page = new PageHelper(); //用于后台分页的

List<DatagridColumn> columnList = new ArrayList<DatagridColumn>();

Map<String,String> column = new HashMap<String,String>();

column.put("applyDate", "日期");

column.put("proBriefName", "项目简称");

column.put("activityCode", "财务计划编号");

column.put("applicant", "申请人");

column.put("amount", "金额");

column.put("fundPurpose", "经费用途");

column.put("loanNo", "借款单号");

// 获取实体类的所有属性，返回Field数组

LoanBean t = new LoanBean();

Field[] field = t.getClass().getDeclaredFields();

// 遍历所有属性

for (int j = 0; j < field.length; j++) {

DatagridColumn dc = new DatagridColumn();

// 获取属性的名字

String name = field[j].getName();

dc.setField(name);

dc.setTitle(column.get(name));

dc.setWidth(80);

columnList.add(dc);

}

String columnJson = JSON.toJSONString(columnList, SerializerFeature.UseSingleQuotes);

System.out.println("json格式的column为："+columnJson);

columnJson = "["+columnJson+"]";

//columns需要后台生成

String columns = "[[";

columns = columns + "{field:'applyDate',title:'日期',width:80},";

columns = columns + "{field:'proBriefName',title:'项目简称',width:80},";

columns = columns + "{field:'activityCode',title:'财务计划编号',width:80},";

columns = columns + "{field:'applicant',title:'申请人',width:80},";

columns = columns + "{field:'amount',title:'金额',width:80},";

columns = columns + "{field:'fundPurpose',title:'经费用途',width:80},";

columns = columns + "{field:'loanNo',title:'借款单号',width:80}";

columns = columns + "]]";

try {

columnJson = URLEncoder.encode(columnJson,"UTF-8");

} catch (UnsupportedEncodingException e) {

e.printStackTrace();

}

System.out.println(columnJson);

//根据条件查询总数

Long total = financeService.loanCount(page);

dg.setTotal(total);

//根据条件查询List

List<LoanBean> loanList = financeService.loanList(page);//这里是重点

dg.setRows(loanList);

dg.setColumns(columnJson);

return dg;

}

之前都是用实体bean加载记录数据，再放到datagrid的rows里面，然后springmvc的jackson自动将其序列化为json数组传到前台，
但是现在如果实体类的属性不固定（大多数情况下都是这个），该怎么办？我这里给个思路：
我用了一个ResultBean来加载返回的结果记录集，这个ResultBean里有两个属性，第一个是记录的第一列的标题rowTag，第二个属性就是自第二列之后每一列下的值，因为列数不固定，所以就用了Map<String,Object> data来获取，后台查出几个记录，就put对应的kew,value进去，最后再写个方法，根据结果集、表头Title和Field映射Map、行标签，生成Map类型的rows，这个转换方法核心就是遍历map再加载，如下：