下拉菜单使开发人员能够向工作簿中的单元格添加具有特定属性的下拉菜单。 这些下拉菜单不需要任何额外的代码，只需要简单指定下拉菜单要使用的代码即可。
SpreadJS现在有9种不同的下拉菜单，该演示展示了如何使用多列选择器。
在打开多列选择器之前，您需要在单元格样式设置选项数据。
选择任何数据项时，数据项值将作为对象类型提交到当前单元格的值。 对于返回的对象值，用户可以使用 PROPERTY函数 来解析对象以获得指定的属性值。
或者, 当用户使用valuePath选项时，他们可以选择对象值的字段值，并将其提交到单元格中。
您可以使用多列选择器下拉列表，如以下代码所示：
多列选择器的选项设置应遵循以下结构：
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
initSpread();
};
function initSpread() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 6 });
spread.options.allowDynamicArray = true;
spread.suspendPaint();
initTemplateSheet(spread);
initArrayDataSourceSheet(spread);
initRangeRefDataSourceSheet(spread);
initTableRefDataSourceSheet(spread);
initFormulaRefDataSourceSheet(spread);
initFormulaQueryDataSourceSheet(spread);
spread.resumePaint();
}
function initArrayDataSourceSheet(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.name("ArrayDataSource");
var 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 }
];
var 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: 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);
var 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: 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);
var templateSheet = spread.getSheet(1);
var cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 5, 2);
sheet.setCellType(2, 3, cellType, GC.Spread.Sheets.SheetArea.viewport);
sheet.resumePaint();
}
function initTemplateSheet (spread) {
var 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();
}
function initRangeRefDataSourceSheet(spread) {
var sheet = spread.getSheet(2);
sheet.suspendPaint();
sheet.name("RangeRefDataSource");
var 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");
var dataSource = "RangeRefDataSource!$A$1:$C$2";
var 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();
}
function initTableRefDataSourceSheet(spread) {
var sheet = spread.getSheet(3);
sheet.suspendPaint();
sheet.name("TableRefDataSource");
var 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
}));
var table = sheet.tables.add("tableSource", 6, 0, 1, 1);
table.bindingPath("ds");
var 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();
}
function initFormulaRefDataSourceSheet(spread) {
var sheet = spread.getSheet(4);
sheet.suspendPaint();
sheet.name("FormulaRefDataSource");
var colInfos = [
{ name: "Rate1", size: "*" },
{ name: "Rate2", size: "*" },
{ name: "Rate3", size: "*" },
];
var 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();
}
function initFormulaQueryDataSourceSheet(spread) {
var sheet = spread.getSheet(5);
sheet.suspendPaint();
sheet.name("FormulaQueryDataSource");
var dataManager = spread.dataManager();
var filmTable = dataManager.addTable("Film", {
data: dataSource
});
filmTable.fetchSync();
var yearColInfos = [
{ name: "Year", size: 60 },
];
var 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"
}
}
];
var genreColInfos = [
{ name: "Genre", size: 100 },
];
var 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"
}
}
];
var filmColInfos = [
{ name: "Film", size: 200 },
];
var 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"
}
}
];
var 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();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
var dataSource = [
{
"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
}
]
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
