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
                  };
  • 相关阅读:
    C字符串和C++中string的区别 &amp;&amp;&amp;&amp;C++中int型与string型互相转换
    UML的类图关系分为: 关联、聚合/组合、依赖、泛化(继承)
    STL map详细用法和make_pair函数
    字符串旋转(str.find()---KMP)
    层次遍历二叉树
    图像特征提取三大法宝:HOG特征,LBP特征,Haar特征
    位运算---整数间的转化
    最大公倍数
    单链表的实现
    jsp下Kindeditor环境搭建
  • 原文地址:https://www.cnblogs.com/_fyz/p/3682405.html
Copyright © 2011-2022 走看看