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

悠悠 2022-08-13 03:29 175阅读 0赞

项目需求里面要求实现一个类似于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 = 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再加载，如下：

/**
         * 根据结果集、表头Title和Field映射Map、行标签，生成Map类型的rows
         * @param rlist
         * @param colMap
         * @param rowTag
         * @return
         */
        public List<Map<String, Object>> getDatagridMap(List<ResultBean> rlist,
                Map<String, String> colMap, String rowTag) {
            List<Map<String,Object>> datagridMap = new ArrayList<Map<String,Object>>();
            for(int i=0;i<rlist.size();i++){
                Map<String,Object> rMap= new HashMap<String, Object>();
                ResultBean rb = rlist.get(i);
                rMap.put(rowTag, rb.getRowTag());
                //遍历Map
                Set<String> set1 = rb.getData().keySet();
                Iterator<String> it = set1.iterator();
                while(it.hasNext()){
                    String colTitle = it.next();
                    if(colMap.containsKey(colTitle)){
                        rMap.put(colMap.get(colTitle), rb.getData().get(colTitle));
                    }
                }
                datagridMap.add(rMap);
            }
            return datagridMap;
        }

总之，一句话，原理最重要， **后台返回对应的json格式（注意，json格式是最核心的），前台就能生成相应的界面**。至于json数据怎么生成，不同的人有不同的实现方式。哦了！