zoukankan      html  css  js  c++  java
  • 基于webpivottable做的透视表

    1、绑定数据和配置:

    var wptConfig=<%= wptConfig%>;

    webPivotTable.setCsvData(<%=dataFields %>, <%=datas %>,eval(wptConfig));

    三个参数依次对应列,数据源,配置文件,列是指定的一个数组,格式:["a","b"],数据的格式:[["a","b"],["c","d"]],配置文件是一个JSON,格式如下:

     var cfg = {
                            "format": "WPT",
                            "version": "1.0",
                            "rows": [0],
                            "cols": [2],
                            "filters": [2],
                            "values": [
                                {
                                "id": 1,
                                "label": "总计 - 销售额",
                                "fieldIndex":1,
                                "stats": "Sum",
                                "format": {
                                    "decimalFlag": "on",
                                    "decimal": 2
                                }
                            }
                            ]
                        };
    View Code

    webPivotTable配置参数说明:

        <script type="text/javascript">
            var webPivotTable = null;
            require(["wpt/WebPivotTable", "dojo/domReady!"], function (WebPivotTable) {
    
                webPivotTable = new WebPivotTable({
                    customOptions: {
                        locale: "zh",//选择语言环境为中文
                        uiFlags: {//ui 配置
                            menuBtn: 1,//菜单按钮
                            dataSourceBtn: 0,//数据源按钮
                            languageSwitchBtn: 0,//语言选择按钮
                            helpBtn: 0,//帮助按钮
                            pivotFieldsPaneBtn: 1,//控制"列选择面板"的按钮显示或者隐藏
                            aboutBtn: 0//关于按钮
                        },      

    pivotFields: { //Pivot Fields List pane //设置透视Fields的格式,显示或者隐藏等
    show: 0, // show/hide: 1/0
    position:"right", // position: "left", "top", "right", "bottom"
    stacked: 0, //stack fields area or not: 1/0
    300, // width, only for left and right
    height:200 // height, only for top and bottom
    },

    expandRows: 0,//行是否展开
    expandCols: 1,//列是否展开

                        pivotLayout: "2"        //设置是否只显示表格,或者图形           
                    }
                }, "wpt-container");   
                 var wptConfig=<%= wptConfig%>;
                 
                 webPivotTable.setCsvData(<%=dataFields %>, <%=datas %>,eval(wptConfig)); 
            });     
        </script>
     {
                  "format": "WPT",
                  "version": "1.0",
                  "grid": {
                  "showSigns": 1,//行前面的+/-好
                  "showRowTotals": 1,//行合计
                  "showColTotals": 0,//列合计
                  "showRowSubtotals": 0,//行小计
                  "showColSubtotals": 0,//列小计
                  "compactForm": 0,
                  "zoomScale": 1,
                  "zoomScaleStep": 0.05,
                  "rowHeaderWidth": 120,
                  "cellWidth": 100,
                  "cellHeight": 23
                  },
                  "mode": "CSV",
                  "rows": [{0}],
                  "cols": [{1}],
                  "filters": [],
                  "values": [
                  {
                  "id": 1,
                  "label": "销售件数",
                  "fieldIndex":销售件数,
                  "stats": "Sum",
                  "format": {
                  "decimalFlag": "on",
                  "decimal": 2
                  }
                  },
                  {
                  "id": 1,
                  "label": "成交笔数",
                  "fieldIndex":成交笔数,
                  "stats": "Sum",
                  "format": {
                  "decimalFlag": "on",
                  "decimal": 2
                  }
                  }
                  ],
                  "valuesInAxis": 0,//如果设置为-1,则value字段不会在列头显示,如果设置为0在列显示,如果设置为1则在rows里面显示。
                  "valuesIndex": 1
                  };
  • 相关阅读:
    【WPF】绘制柱状图、折线图、扇形图
    【WPF】获取容器宽高
    【SQL】SQL Server、MySQL、SQLite获取自增ID、自增ID清零
    【SQL Server操作】SQL Server重命名数据库及解决数据库无法分离的问题
    【数据迁移】MySQL数据库迁移到SQL Server
    【MySQL操作】MySQL导入导出数据库
    【MySQL操作】MySQL Workbench远程连接的一些操作
    【c#】遍历获得一个类的所有属性名
    vue 跨域 springCloud @CrossOrigin注解
    解决IDEA右侧maven不显示方法
  • 原文地址:https://www.cnblogs.com/_fyz/p/3682405.html
Copyright © 2011-2022 走看看