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
                  };
  • 相关阅读:
    VB连接ORACAL过程
    【EXCEL】字段是否存在的查询
    ASP.NET中插入FLASH[学来得]
    做一个健康的的程序员
    SQL语法规范——Insert语句
    WEBBENCH测试网站的负载工具
    常用简易JavaScript函数(转)
    WEB服务器性能/压力测试工具HTTP_LOAD、WEBBENCH、AB、SIEGE使用教程
    Linux服务器监控SHELL脚本(自动发邮件)(转)
    空间页面CSS说明
  • 原文地址:https://www.cnblogs.com/_fyz/p/3682405.html
Copyright © 2011-2022 走看看