使用 Flex3 开发 OLAP 应用（5）OLAPDataGrid 的扩展

look_w

OLAPDataGrid 的扩展作为 Flex3 后新添加的组件，OLAPDataGrid 仍有一定的局限性。如一般的 OLAP 操作中均允许客户在图表直接进行点击，以达到数据上钻及下钻的效果。
对 Flex 已有组件扩展需要在其之上创建自定义的渲染器，而这通常有两种方法：定义一个 renderer（item 类型或 header 类型）在 MXML 的组件内部；或定义在另一个类文件中，再把这个类名指定在组件的 itemRenderer 或 headerRenderer 属性里。
对于 OLAPDataGrid 组件而言，虽然扩展了 AdvancedDataGrid 的功能，但最主要目的是为了支持 OLAP 查询结果的显示，也就是说，数据是由 OLAPCube 决定的。这就决定了其渲染器（OLAPDataGrid**Renderer）行为与普通组件的渲染器相比有着诸多限制，如不允许列的拖拽，不允许在表格上进行修改操作，不允许对列数据进行排序。而对于 OLAP 应用最重要的上钻与下钻操作，OLAPDataGrid**Renderer 亦不支持，我们需要继承 AdvancedDataGrid**Renderer 来完成此功能。
OLAP 常见操作 OLAP 的基本多维分析操作有钻取（Drill-up 和 Drill-down）、切片（Slice）和切块（Dice）、以及旋转（Pivot）等。钻取：是改变维的层次，变换分析的粒度。它包括向下钻取（Drill-down）和向上钻取（Drill-up）/ 上卷 (Roll-up)。Drill-up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而 Drill- down 则相反，它从汇总数据深入到细节数据进行观察或增加新维。切片和切块：是在一部分维上选定值后，关心度量数据在剩余维上的分布。如果剩余的维只有两个，则是切片；如果有三个或以上，则是切块。旋转：是变换维的方向，即在表格中重新安排维的放置（例如行列互换）。

• 首先在 mxml 文件中给出 OLAPDataGrid 的初始定义。                         清单 9. OLAPDataGrid 定义

  1 2 3 4 5

  <mx:Canvas width="100%" height="25%"> <mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%" initialize="configureGrid()"> </mx:OLAPDataGrid> </mx:Canvas>

  
  
  
  
• 通过点击标题栏的方式进行数据的钻取，并使用 header 类型的自定义渲染器来处理上钻，下钻行为。（当然你还可以自定义的添加其他类型的渲染器，如 item 和 groupItem）                         清单 10. configureGrid

  1 2 3

  public function configureGrid():void {    myOLAPDG.headerRenderer = new ClassFactory(DAXHeadItemReader); }

  
  
  
  
• 接着覆写主 header 以及其 subheader（以递归的方式），并以回调函数的方式处理各种鼠标事件。                         清单 10. 父 header 的覆写函数

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  protected override function createChildren():void {    super.createChildren();    label.addEventListener(MouseEvent.CLICK, headerLabelClicked);    label.addEventListener(MouseEvent.MOUSE_OVER, headerLabelMouseOver);    label.addEventListener(MouseEvent.MOUSE_OUT, headerLabelMouseOut);    if (data != null && data.hasOwnProperty("children")) {        var children:Array = this.data.children;        var child:AdvancedDataGridColumn;        for (var i:int = 0; i < children.length; i++) {            child = children;            child.rendererIsEditor = true;            child.headerRenderer = new ClassFactory(DAXSubHeadRender);        }    } }

  
  
  
  清单 11. 上钻回调函数

  1 2 3 4 5 6 7 8 9 10 11

  private function headerLabelClicked(mouseEvent:MouseEvent):void {    var textField:String = mouseEvent.target.getRawText();    if (textField == 'Year Level')        Alert.show("It's the top now! Drill up unavailable!");    else {        // 模拟本应通过 HttpService 与服务端通信返回的数据        var newXML:XML = …… ;        dispatchEvent(new DrillEvent(DrillEvent.DRILL_UP, newXML, true, false));    } }

  
  
  
  Subheader 的构建方式与下钻回调函数与此类似，具体详见附件中代码。
  这样就把一个 Flex 中的标准 OLAPDataGrid 组件用自定义的渲染器进行了扩展。
  
• 接下来我们再来看看具体的钻取逻辑实现。我们可以根据多种方式来判断钻取操作是上钻还是下钻：例如根据点击组件的 textField，或是从后端返回的数据中某字段的值。当上钻或下钻操作无效时，及时地提醒用户。                         清单 12. 下钻回调函数

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  private function subheaderLabelMouseClick(mouseEvent:MouseEvent):void {    var textField:String = mouseEvent.target.getRawText();    if (textField == 'Day Level')        Alert.show("It's the bottom now! Drill down unavailable!");    else {        // 模拟本应通过 HttpService 与服务端通信返回的数据        var newXML:XML;        if (textField == 'Year Level')            newXML = …… ;        else if (textField == 'Quarter Level')            newXML = …… ;        else if (textField == 'Month Level')            newXML = …… ;        dispatchEvent(new DrillEvent(DrillEvent.DRILL_DOWN, newXML, true, false)); }

  
  
  
  最后看一看具体显示的效果。
  
• 点击子 Header，鼠标移过时的特效在 headerLabelMouseOver() 和 headerLabelMouseOut() 方法中定义 ，如图 5 所示。（可与图 4 不进行任何扩展的 OLAPDataGrid 行为进行比较）图 5. 下钻操作 1这时候若点击即完成了下钻操作，将显示季度这个度量的各种数据。如图 6 所示。
  图 6. 下钻操作 2继续点击，数据将会越来越细化，在月之后，最后显示天的数据。而这时若仍进行下钻，则会出现提示用户：下钻操作无法执行。如图 7 所示。
  图 7. 非法下钻操作
• 点击父 Header，则将一步步进行上钻操作，如图 7 的“Day Level”和图 6 的“Quarter Level”。而若在图 5 的基础上点击“Year Level”，也将提示用户：上钻操作无法执行，如图 8 所示。图 8. 非法上钻操作