드롭다운은 개발자에게 특정 속성이 있는 드롭다운 메뉴를 통합 문서의 셀에 추가하는 기능을 제공합니다. 이러한 드롭다운 메뉴는 드롭다운 메뉴에 사용할 코드를 지정하는 것 이외에 추가 코드가 필요하지 않습니다.
SpreadJS에는 9가지 다른 종류의 드롭다운이 있으며, 이 데모에서는 MultiColumn Picker를 사용하는 방법을 보여줍니다.
MultiColumn Picker를 열기 전에 셀 스타일에서 옵션 데이터를 설정해야 합니다. 데이터 항목을 선택하면 해당 데이터 항목의 값이 현재 셀 값에 개체 유형으로 제출됩니다. 반환되는 개체 값에 대해 PROPERTY 함수를 사용하여 해당 개체를 구문 분석하고 지정된 속성 값을 가져올 수 있습니다.
또는, 사용자가 valuePath 옵션을 사용하여 개체 값의 필드 값을 선택하여 셀에 제출할 수 있습니다.
다음 코드를 사용하여 MultiColumn Picker 드롭다운을 사용할 수 있습니다.
MultiColumn Picker의 옵션은 다음과 같은 구조를 따라야 합니다.
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="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}
