下拉菜单使开发人员能够向工作簿中的单元格添加具有特定属性的下拉菜单。 这些下拉菜单不需要任何额外的代码，只需要简单指定下拉菜单要使用的代码即可。
SpreadJS现在有9种不同的下拉菜单，该演示展示了如何使用多列选择器。
在打开多列选择器之前，您需要在单元格样式设置选项数据。
选择任何数据项时，数据项值将作为对象类型提交到当前单元格的值。 对于返回的对象值，用户可以使用 PROPERTY函数 来解析对象以获得指定的属性值。
或者, 当用户使用valuePath选项时，他们可以选择对象值的字段值，并将其提交到单元格中。
您可以使用多列选择器下拉列表，如以下代码所示：
多列选择器的选项设置应遵循以下结构：
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
</div>
</template>
<script>
import Vue from "vue";
import "@grapecity-software/spread-sheets-vue";
import '@grapecity-software/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import GC from "@grapecity-software/spread-sheets";
import { getData } from "./data";
let App = Vue.extend({
name: "app",
data: function() {
return {
spread: null
};
},
methods: {
initSpread(spread) {
spread.setSheetCount(6);
spread.options.allowDynamicArray = true;
spread.suspendPaint();
this.initTemplateSheet(spread);
this.initArrayDataSourceSheet(spread);
this.initRangeRefDataSourceSheet(spread);
this.initTableRefDataSourceSheet(spread);
this.initFormulaRefDataSourceSheet(spread);
this.initFormulaQueryDataSourceSheet(spread);
spread.resumePaint();
},
initArrayDataSourceSheet(spread) {
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.name("ArrayDataSource");
let colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
{ name: "Audience Score %", size: 120 },
{ name: "Worldwide Gross", size: 100, formatter: "$#,##0.00" },
{ name: "Year", size: 50 }
];
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 700,
height: 400,
dataSource: this.dataSource,
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Film")';
sheet.setColumnWidth(2, 150);
sheet.getCell(1, 2).wordWrap(true);
sheet.setText(1, 2, "DataSource is array, return data parsed to the value of property 'Film'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
let style1 = new GC.Spread.Sheets.Style();
style1.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style1.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 700,
height: 400,
dataSource: this.dataSource
}
}
];
sheet.setText(2, 2, "DataSource is array, return data is object.");
sheet.getCell(2, 2).wordWrap(true);
sheet.setStyle(2, 3, style1);
sheet.getCell(2, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(2, 200);
let templateSheet = spread.getSheet(1);
let cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 5, 2);
sheet.setCellType(2, 3, cellType, GC.Spread.Sheets.SheetArea.viewport);
sheet.resumePaint();
},
initTemplateSheet(spread) {
let templateSheet = spread.getSheet(1);
templateSheet.suspendPaint();
templateSheet.visible(false);
templateSheet.setRowCount(5);
templateSheet.setColumnCount(2);
templateSheet.setValue(0, 0, "Film Name: ");
templateSheet.getCell(0, 0).font("14px Arial");
templateSheet.setBindingPath(0, 1, "Film");
templateSheet.setValue(1, 0, "Film Type: ");
templateSheet.getCell(1, 0).font("14px Arial");
templateSheet.setBindingPath(1, 1, "Genre");
templateSheet.setValue(2, 0, "Lead Studio: ");
templateSheet.getCell(2, 0).font("14px Arial");
templateSheet.setBindingPath(2, 1, "Lead Studio");
templateSheet.setValue(3, 0, "Audience Score %: ");
templateSheet.getCell(3, 0).font("14px Arial");
templateSheet.setBindingPath(3, 1, "Audience Score %");
templateSheet.setValue(4, 0, "Profitability: ");
templateSheet.getCell(4, 0).font("14px Arial");
templateSheet.setBindingPath(4, 1, "Profitability");
templateSheet.setFormatter(4, 1, "$#,##0.00");
templateSheet.resumePaint();
},
initRangeRefDataSourceSheet(spread) {
let sheet = spread.getSheet(2);
sheet.suspendPaint();
sheet.name("RangeRefDataSource");
let colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
];
sheet.setText(0, 0, "27 Dresses");
sheet.setText(0, 1, "Comedy");
sheet.setText(0, 2, "Fox");
sheet.setText(1, 0, "(500) Days of Summer");
sheet.setText(1, 1, "Comedy");
sheet.setText(1, 2, "Fox");
let dataSource = "RangeRefDataSource!$A$1:$C$2";
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 400,
height: 100,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Genre")';
sheet.setText(0, 3, "DataSource is range reference, return data parsed to the value of property 'Genre'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
sheet.resumePaint();
},
initTableRefDataSourceSheet(spread) {
let sheet = spread.getSheet(3);
sheet.suspendPaint();
sheet.name("TableRefDataSource");
let data = [
{ name: "Yang", age: 24 },
{ name: "Wang", age: 35 },
{ name: "Zhang", age: 20 }
];
sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({
name: "Yang",
age: 24,
country: "China",
city: "Xi'an",
ds: data
}));
let table = sheet.tables.add("tableSource", 6, 0, 1, 1);
table.bindingPath("ds");
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 180,
height: 120,
dataSource: "tableSource[[#Headers], [#Data]]"
}
}
];
style.formatter = '=PROPERTY(@, "age")';
sheet.setText(0, 3, "DataSource is table reference, return data parsed to the value of property 'age'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
sheet.resumePaint();
},
initFormulaRefDataSourceSheet(spread) {
let sheet = spread.getSheet(4);
sheet.suspendPaint();
sheet.name("FormulaRefDataSource");
let colInfos = [
{ name: "Rate1", size: "*" },
{ name: "Rate2", size: "*" },
{ name: "Rate3", size: "*" },
];
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 400,
height: 120,
dataSource: "=RANDARRAY(3,3)",
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Rate2")';
sheet.setText(0, 3, "DataSource is formula '=RANDARRAY(3,3)', return data parsed to the value of property 'Rate2'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
sheet.resumePaint();
},
initFormulaQueryDataSourceSheet(spread) {
let sheet = spread.getSheet(5);
sheet.suspendPaint();
sheet.name("FormulaQueryDataSource");
let dataManager = spread.dataManager();
let filmTable = dataManager.addTable("Film", {
data: this.dataSource
});
filmTable.fetchSync();
let yearColInfos = [
{ name: "Year", size: 60 },
];
let yearStyle = new GC.Spread.Sheets.Style();
yearStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
yearStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 65,
height: 130,
dataSource: '=SORT(UNIQUE(QUERY("Film", "Year")))',
bindingInfos: yearColInfos,
valuePath: "Year"
}
}
];
let genreColInfos = [
{ name: "Genre", size: 100 },
];
let genreStyle = new GC.Spread.Sheets.Style();
genreStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
genreStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 110,
height: 130,
dataSource: '=SORT(UNIQUE(FILTER(QUERY("Film", "Genre"), QUERY("Film", "Year")=B4)))',
bindingInfos: genreColInfos,
valuePath: "Genre"
}
}
];
let filmColInfos = [
{ name: "Film", size: 200 },
];
let filmStyle = new GC.Spread.Sheets.Style();
filmStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
filmStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 210,
height: 200,
dataSource: '=SORT(UNIQUE(FILTER(QUERY("Film", "Film"), (QUERY("Film", "Year")=B4)*(QUERY("Film", "Genre")=D4))))',
bindingInfos: filmColInfos,
valuePath: "Film"
}
}
];
let hAlignStyle = new GC.Spread.Sheets.Style();
hAlignStyle.hAlign = 1;
sheet.setStyle(2, -1, hAlignStyle);
sheet.setText(0, 0, `DataSource is formula, Query data from table and cascade`);
sheet.setValue(2, 1, "Year");
sheet.setValue(2, 3, "Genre");
sheet.setValue(2, 5, "Film");
sheet.setColumnWidth(1, 80);
sheet.setColumnWidth(3, 100);
sheet.setColumnWidth(5, 250);
sheet.setStyle(3, 1, yearStyle);
sheet.setStyle(3, 3, genreStyle);
sheet.setStyle(3, 5, filmStyle);
sheet.setColumnWidth(2, 10);
sheet.setColumnWidth(4, 10);
sheet.resumePaint();
}
},
computed: {
dataSource() {
return getData();
}
}
});
new Vue({
render: h => h(App)
}).$mount("#app");
</script>
<style>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/vue/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/zh/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/zh/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
export function getData() {
return [
{
"Film": "27 Dresses",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 71,
"Profitability": 5.34,
"Rating": 40,
"Worldwide Gross": 160.30,
"Year": 2008
},
{
"Film": "(500) Days of Summer",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 81,
"Profitability": 8.09,
"Rating": 87,
"Worldwide Gross": 60.72,
"Year": 2009
},
{
"Film": "A Dangerous Method",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 89,
"Profitability": 0.44,
"Rating": 79,
"Worldwide Gross": 8.97,
"Year": 2011
},
{
"Film": "A Serious Man",
"Genre": "Drama",
"Lead Studio": "Universal",
"Audience Score %": 64,
"Profitability": 4.38,
"Rating": 89,
"Worldwide Gross": 30.68,
"Year": 2009
},
{
"Film": "Across the Universe",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 84,
"Profitability": 0.65,
"Rating": 54,
"Worldwide Gross": 29.36,
"Year": 2007
},
{
"Film": "Beginners",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 80,
"Profitability": 4.47,
"Rating": 84,
"Worldwide Gross": 14.31,
"Year": 2011
},
{
"Film": "Dear John",
"Genre": "Drama",
"Lead Studio": "Sony",
"Audience Score %": 66,
"Profitability": 4.5988,
"Rating": 29,
"Worldwide Gross": 114.97,
"Year": 2010
},
{
"Film": "Enchanted",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 80,
"Profitability": 4.00,
"Rating": 93,
"Worldwide Gross": 340.48,
"Year": 2007
},
{
"Film": "Fireproof",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 51,
"Profitability": 66.93,
"Rating": 40,
"Worldwide Gross": 33.46,
"Year": 2008
},
{
"Film": "Four Christmases",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 52,
"Profitability": 2.02,
"Rating": 26,
"Worldwide Gross": 161.83,
"Year": 2008
},
{
"Film": "Ghosts of Girlfriends Past",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 47,
"Profitability": 2.0444,
"Rating": 27,
"Worldwide Gross": 102.22,
"Year": 2009
},
{
"Film": "Gnomeo and Juliet",
"Genre": "Animation",
"Lead Studio": "Disney",
"Audience Score %": 52,
"Profitability": 5.38,
"Rating": 56,
"Worldwide Gross": 193.96,
"Year": 2011
},
{
"Film": "Going the Distance",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 56,
"Profitability": 1.31,
"Rating": 53,
"Worldwide Gross": 42.05,
"Year": 2010
},
{
"Film": "Good Luck Chuck",
"Genre": "Comedy",
"Lead Studio": "Lionsgate",
"Audience Score %": 61,
"Profitability": 2.36,
"Rating": 3,
"Worldwide Gross": 59.19,
"Year": 2007
},
{
"Film": "He's Just Not That Into You",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 60,
"Profitability": 7.15,
"Rating": 42,
"Worldwide Gross": 178.84,
"Year": 2009
},
{
"Film": "High School Musical 3: Senior Year",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 76,
"Profitability": 22.91,
"Rating": 65,
"Worldwide Gross": 252.04,
"Year": 2008
},
{
"Film": "I Love You Phillip Morris",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 57,
"Profitability": 1.34,
"Rating": 71,
"Worldwide Gross": 20.1,
"Year": 2010
},
{
"Film": "It's Complicated",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 63,
"Profitability": 2.64,
"Rating": 56,
"Worldwide Gross": 224.6,
"Year": 2009
},
{
"Film": "Jane Eyre",
"Genre": "Romance",
"Lead Studio": "Universal",
"Audience Score %": 77,
"Profitability": null,
"Rating": 85,
"Worldwide Gross": 30.14,
"Year": 2011
},
{
"Film": "Just Wright",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 58,
"Profitability": 1.79,
"Rating": 45,
"Worldwide Gross": 21.56,
"Year": 2010
},
{
"Film": "Killers",
"Genre": "Action",
"Lead Studio": "Lionsgate",
"Audience Score %": 45,
"Profitability": 1.24,
"Rating": 11,
"Worldwide Gross": 93.4,
"Year": 2010
},
{
"Film": "Knocked Up",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 83,
"Profitability": 6.63,
"Rating": 91,
"Worldwide Gross": 219.00,
"Year": 2007
},
{
"Film": "Leap Year",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 49,
"Profitability": 1.71,
"Rating": 21,
"Worldwide Gross": 32.59,
"Year": 2010
},
{
"Film": "Letters to Juliet",
"Genre": "Comedy",
"Lead Studio": "Summit",
"Audience Score %": 62,
"Profitability": 2.639333333,
"Rating": 40,
"Worldwide Gross": 79.18,
"Year": 2010
},
{
"Film": "License to Wed",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 55,
"Profitability": 1.98,
"Rating": 8,
"Worldwide Gross": 69.30,
"Year": 2007
},
{
"Film": "Life as We Know It",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 62,
"Profitability": 2.53,
"Rating": 28,
"Worldwide Gross": 96.16,
"Year": 2010
},
{
"Film": "Love & Other Drugs",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 55,
"Profitability": 1.81,
"Rating": 48,
"Worldwide Gross": 54.53,
"Year": 2010
},
{
"Film": "Love Happens",
"Genre": "Drama",
"Lead Studio": "Universal",
"Audience Score %": 40,
"Profitability": 2.00,
"Rating": 18,
"Worldwide Gross": 36.08,
"Year": 2009
},
{
"Film": "Made of Honor",
"Genre": "Comedy",
"Lead Studio": "Sony",
"Audience Score %": 61,
"Profitability": 2.64,
"Rating": 13,
"Worldwide Gross": 105.96,
"Year": 2008
},
{
"Film": "Mamma Mia!",
"Genre": "Comedy",
"Lead Studio": "Universal",
"Audience Score %": 76,
"Profitability": 9.23,
"Rating": 53,
"Worldwide Gross": 609.47,
"Year": 2008
},
{
"Film": "Marley and Me",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 77,
"Profitability": 3.746781818,
"Rating": 63,
"Worldwide Gross": 206.073,
"Year": 2008
},
{
"Film": "Midnight in Paris",
"Genre": "Romance",
"Lead Studio": "Sony",
"Audience Score %": 84,
"Profitability": 8.74,
"Rating": 93,
"Worldwide Gross": 148.66,
"Year": 2011
},
{
"Film": "Miss Pettigrew Lives for a Day",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 70,
"Profitability": 0.25,
"Rating": 78,
"Worldwide Gross": 15.17,
"Year": 2008
},
{
"Film": "Monte Carlo",
"Genre": "Romance",
"Lead Studio": "20th Century Fox",
"Audience Score %": 50,
"Profitability": 1.98,
"Rating": 38,
"Worldwide Gross": 39.66,
"Year": 2011
},
{
"Film": "Music and Lyrics",
"Genre": "Romance",
"Lead Studio": "Warner Bros.",
"Audience Score %": 70,
"Profitability": 3.64,
"Rating": 63,
"Worldwide Gross": 145.89,
"Year": 2007
},
{
"Film": "My Week with Marilyn",
"Genre": "Drama",
"Lead Studio": "The Weinstein Company",
"Audience Score %": 84,
"Profitability": 0.82,
"Rating": 83,
"Worldwide Gross": 8.25,
"Year": 2011
},
{
"Film": "New Year's Eve",
"Genre": "Romance",
"Lead Studio": "Warner Bros.",
"Audience Score %": 48,
"Profitability": 2.53,
"Rating": 8,
"Worldwide Gross": 142.04,
"Year": 2011
},
{
"Film": "Nick and Norah's Infinite Playlist",
"Genre": "Comedy",
"Lead Studio": "Sony",
"Audience Score %": 67,
"Profitability": 3.35,
"Rating": 73,
"Worldwide Gross": 33.52,
"Year": 2008
},
{
"Film": "No Reservations",
"Genre": "Comedy",
"Lead Studio": "",
"Audience Score %": 64,
"Profitability": 3.30,
"Rating": 39,
"Worldwide Gross": 92.60,
"Year": 2007
},
{
"Film": "Not Easily Broken",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 66,
"Profitability": 2.14,
"Rating": 34,
"Worldwide Gross": 10.7,
"Year": 2009
},
{
"Film": "One Day",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 54,
"Profitability": 3.68,
"Rating": 37,
"Worldwide Gross": 55.24,
"Year": 2011
},
{
"Film": "Our Family Wedding",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 49,
"Profitability": null,
"Rating": 14,
"Worldwide Gross": 21.37,
"Year": 2010
},
{
"Film": "Over Her Dead Body",
"Genre": "Comedy",
"Lead Studio": "New Line",
"Audience Score %": 47,
"Profitability": 2.07,
"Rating": 15,
"Worldwide Gross": 20.71,
"Year": 2008
},
{
"Film": "P.S. I Love You",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 82,
"Profitability": 5.10,
"Rating": 21,
"Worldwide Gross": 153.09,
"Year": 2007
},
{
"Film": "Penelope",
"Genre": "Comedy",
"Lead Studio": "Summit",
"Audience Score %": 74,
"Profitability": 1.38,
"Rating": 52,
"Worldwide Gross": 20.74,
"Year": 2008
},
{
"Film": "Rachel Getting Married",
"Genre": "Drama",
"Lead Studio": "Independent",
"Audience Score %": 61,
"Profitability": 1.38,
"Rating": 85,
"Worldwide Gross": 16.61,
"Year": 2008
},
{
"Film": "Remember Me",
"Genre": "Drama",
"Lead Studio": "Summit",
"Audience Score %": 70,
"Profitability": 3.49,
"Rating": 28,
"Worldwide Gross": 55.86,
"Year": 2010
},
{
"Film": "Sex and the City",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 81,
"Profitability": 7.22,
"Rating": 49,
"Worldwide Gross": 415.25,
"Year": 2008
},
{
"Film": "Sex and the City 2",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 49,
"Profitability": 2.88,
"Rating": 15,
"Worldwide Gross": 288.35,
"Year": 2010
},
{
"Film": "She's Out of My League",
"Genre": "Comedy",
"Lead Studio": "Paramount",
"Audience Score %": 60,
"Profitability": 2.44,
"Rating": 57,
"Worldwide Gross": 48.81,
"Year": 2010
},
{
"Film": "Something Borrowed",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": null,
"Profitability": 1.71,
"Rating": null,
"Worldwide Gross": 60.18,
"Year": 2011
},
{
"Film": "Tangled",
"Genre": "Animation",
"Lead Studio": "Disney",
"Audience Score %": 88,
"Profitability": 1.36,
"Rating": 89,
"Worldwide Gross": 355.08,
"Year": 2010
},
{
"Film": "The Back-up Plan",
"Genre": "Comedy",
"Lead Studio": "CBS",
"Audience Score %": 47,
"Profitability": 2.20,
"Rating": 20,
"Worldwide Gross": 77.09,
"Year": 2010
},
{
"Film": "The Curious Case of Benjamin Button",
"Genre": "Fantasy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 81,
"Profitability": 1.78,
"Rating": 73,
"Worldwide Gross": 285.43,
"Year": 2008
},
{
"Film": "The Duchess",
"Genre": "Drama",
"Lead Studio": "Paramount",
"Audience Score %": 68,
"Profitability": 3.20,
"Rating": 60,
"Worldwide Gross": 43.30,
"Year": 2008
},
{
"Film": "The Heartbreak Kid",
"Genre": "Comedy",
"Lead Studio": "Paramount",
"Audience Score %": 41,
"Profitability": 2.12,
"Rating": 30,
"Worldwide Gross": 127.76,
"Year": 2007
},
{
"Film": "The Invention of Lying",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 47,
"Profitability": 1.75,
"Rating": 56,
"Worldwide Gross": 32.4,
"Year": 2009
},
{
"Film": "The Proposal",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 74,
"Profitability": 7.86,
"Rating": 43,
"Worldwide Gross": 314.7,
"Year": 2009
},
{
"Film": "The Time Traveler's Wife",
"Genre": "Drama",
"Lead Studio": "Paramount",
"Audience Score %": 65,
"Profitability": 2.59,
"Rating": 38,
"Worldwide Gross": 101.33,
"Year": 2009
},
{
"Film": "The Twilight Saga: New Moon",
"Genre": "Drama",
"Lead Studio": "Summit",
"Audience Score %": 78,
"Profitability": 14.19,
"Rating": 27,
"Worldwide Gross": 709.82,
"Year": 2009
},
{
"Film": "The Ugly Truth",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 68,
"Profitability": 5.40,
"Rating": 14,
"Worldwide Gross": 205.3,
"Year": 2009
},
{
"Film": "Twilight",
"Genre": "Romance",
"Lead Studio": "Summit",
"Audience Score %": 82,
"Profitability": 10.18,
"Rating": 49,
"Worldwide Gross": 376.66,
"Year": 2008
},
{
"Film": "Twilight: Breaking Dawn",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 68,
"Profitability": 6.38,
"Rating": 26,
"Worldwide Gross": 702.17,
"Year": 2011
},
{
"Film": "Tyler Perry's Why Did I get Married",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 47,
"Profitability": 3.72,
"Rating": 46,
"Worldwide Gross": 55.862886,
"Year": 2007
},
{
"Film": "Valentine's Day",
"Genre": "Comedy",
"Lead Studio": "Warner Bros.",
"Audience Score %": 54,
"Profitability": 4.18,
"Rating": 17,
"Worldwide Gross": 217.57,
"Year": 2010
},
{
"Film": "Waiting For Forever",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 53,
"Profitability": 0.005,
"Rating": 6,
"Worldwide Gross": 0.025,
"Year": 2011
},
{
"Film": "Waitress",
"Genre": "Romance",
"Lead Studio": "Independent",
"Audience Score %": 67,
"Profitability": 11.08,
"Rating": 89,
"Worldwide Gross": 22.17,
"Year": 2007
},
{
"Film": "WALL-E",
"Genre": "Animation",
"Lead Studio": "Disney",
"Audience Score %": 89,
"Profitability": 2.89,
"Rating": 96,
"Worldwide Gross": 521.28,
"Year": 2008
},
{
"Film": "Water For Elephants",
"Genre": "Drama",
"Lead Studio": "20th Century Fox",
"Audience Score %": 72,
"Profitability": 3.081421053,
"Rating": 60,
"Worldwide Gross": 117.094,
"Year": 2011
},
{
"Film": "What Happens in Vegas",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 72,
"Profitability": 6.26,
"Rating": 28,
"Worldwide Gross": 219.36,
"Year": 2008
},
{
"Film": "When in Rome",
"Genre": "Comedy",
"Lead Studio": "Disney",
"Audience Score %": 44,
"Profitability": 0,
"Rating": 15,
"Worldwide Gross": 43.04,
"Year": 2010
},
{
"Film": "You Will Meet a Tall Dark Stranger",
"Genre": "Comedy",
"Lead Studio": "Independent",
"Audience Score %": 35,
"Profitability": 1.21,
"Rating": 43,
"Worldwide Gross": 26.66,
"Year": 2010
},
{
"Film": "Youth in Revolt",
"Genre": "Comedy",
"Lead Studio": "The Weinstein Company",
"Audience Score %": 52,
"Profitability": 1.09,
"Rating": 68,
"Worldwide Gross": 19.62,
"Year": 2010
},
{
"Film": "Zack and Miri Make a Porno",
"Genre": "Romance",
"Lead Studio": "The Weinstein Company",
"Audience Score %": 70,
"Profitability": 1.74,
"Rating": 64,
"Worldwide Gross": 41.94,
"Year": 2008
}
];
}
(function(global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js',
'@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js',
'@grapecity-software/spread-sheets-vue': 'npm:@grapecity-software/spread-sheets-vue/index.js',
'@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
