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
                  };
  • 相关阅读:
    接口测试如何在json中引用mock变量
    接口测试--接口文档规范
    接口测试和性能测试的区别
    接口测试和功能测试的区别
    接口请求(get、post、head等)详解
    软件测试流程
    软件测试系统学习流程和常见面试题
    接口测试之json中的key获取
    正则表达式解析
    Jmeter使用HTTPS协议
  • 原文地址:https://www.cnblogs.com/_fyz/p/3682405.html
Copyright © 2011-2022 走看看