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

最新推荐文章于 2024-01-15 09:13:41 发布

原创

最新推荐文章于 2024-01-15 09:13:41 发布 · 1.3w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #动态列 #json #透视表

本文介绍了如何使用SpringMVC和EasyUI框架动态生成Datagrid的列，解决前台js不能预先定义columns的问题。关键在于后台生成动态的column JSON，通过Java反射填充field属性。难点包括前台js动态生成datagrid配置和后台json动态装配，通过理解核心原理，实现了动态生成列的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求里面要求实现一个类似于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_datagr