与CDF中的TableComponent组件交互 -- 转自Pedro Alves on Business Intelligence

原文在blogspot上，blogspot已经被墙了。可惜，可惜。

Interacting with the TableComponent

It's been usual to see someone asking for interaction with the TableComponent in CDF. While it's true that we don't support that out of the box, it's incredibly easy to add it. Well, maybe not incredibly easy to everyone, but that's what blogs are for :)


To achieve that we'll use the amazingly useful postExecution function. It allows us to execute whatever we want after the component is rendered. Since CDF internally uses JQuery we have almost no restrictions to what we can do.


We'll use the bind and live functions of jquery. Let's define our click function:

var clickFunction = function(){
 alert("You clicked on: " + $(this).text())
}

And in our postExecution we'll add a call for it. I'll use the sample in the documentation

var topTenCustomers =
 {
  name: "topTenCustomers",
  type: "tableComponent",
  chartDefinition: MetaLayerHome2.topTenCustomerDefinition,
  htmlObject: "sampleObject",
  executeAtStart: true,
  postExecution: function(){
   var cols = $("#sampleObject td:nth-child(1)");
   cols.die("click");
   cols.live("click",clickFunction);
  }
 };

Some explanations. With the help of selectors we selected every first row (index on nth-child starts at 1). We can select whatever column(s) we want. Then I attached the clickFunction to the click event on those cells.

The reason I used live instead of bind is subtle - this way, when we change pages or filter within our component it will still work.

And that's it. In a real-world scenario we'd probably replace the alert() with something like the Dashboards.fireChange function like we do in charts, but you get the idea.

Of course we can play a bit around this idea. Here's my final alternative to the tablecomponent component reference example:

var MetaLayerHome2 = {
 topTenCustomerDefinition: {
  colHeaders: ["Customers","Sales"],
  colTypes: ['string','numeric'],
  colFormats: [null,'%.0f'],
  queryType: 'mdx',
  displayLength: 5,

  catalog: 'solution:steel-wheels/analysis/steelwheels.mondrian.xml',
  jndi: "SampleData",
  query: function(){

   var query = "select NON EMPTY {[Measures].[Sales]} ON COLUMNS,"+
    " NON EMPTY TopCount([Customers].[All Customers].Children, 10.0, [Measures].[Sales]) " +
    " ON ROWS from [SteelWheelsSales]"
   return query;
  }
 }
};

var mouseoverFunction = function(){
 var oldColor = $(this).css("color");
 $(this).data("oldColor",oldColor);
 $(this).css("color","red");
 $(this).css("cursor","pointer");
}

var mouseoutFunction = function(){
 $(this).css("color",$(this).data("oldColor"));
 $(this).css("cursor","default");
}

var clickFunction = function(){
 alert("You clicked on: " + $(this).text())
}

var topTenCustomers =
 {
  name: "topTenCustomers",
  type: "tableComponent",
  chartDefinition: MetaLayerHome2.topTenCustomerDefinition,
  htmlObject: "sampleObject",
  executeAtStart: true,
  postExecution: function(){
   var cols = $("#sampleObject td:nth-child(1)");
   cols.die("click");
   cols.die("mouseover");
   cols.die("mouseout");
   cols.live("click",clickFunction);
   cols.live("mouseover",mouseoverFunction);
   cols.live("mouseout",mouseoutFunction);
  }
 };
Dashboards.init([topTenCustomers]);