项目需求里面要求实现一个类似于excel里透视表的功能，大致意思就是选择对应的
数据库之后，行标签和列标签都是可选的，然后在页面上就生成对应的相关记录。
例如，我选择“财务信息”数据库，列标签选择“部门”，行标签选择“科目”，页面上就显示每个部门在每项科目上的财务信息（这里就简单化为支出）。
因为我前台选择的是easyui框架，一般用于显示表格都是在datagrid的columns定义filed和title，但是这个需求就无法事先定义好这些属性，只有在运行时才能装载这些组件，怎么办呢？看了很多网上的信息，发现讲的都很模糊，要不就是简单问题复杂化，要不就是一言带过，于是就决定自己弄，毕竟看别人的东西只是个启发。废话不多说，开始。
难点：
1.前台js动态生成datagrid配置
2.后台json动态装配
解决办法：
对于第一个难点，
弄懂核心原理是最重要的，核心就是 重新生成column字符串。意思就是说，原先是前台js事先写死，但是现在传一个值过去，格式和原先保持一致就可以了。
既然知道这个原理了，那问题就迎刃而解了，我先调用后台处理方法，再返回对应格式的字符串给前台就行了。即保证前台获取的json格式如下：
{"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 物理部"}]]
}
下面是实现的两种前台的写法：
第一种前台写法：
$(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 = eva l(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"){
DataGrid dg = new DataGrid(); //这个是用于