MultiColumn Picker

MultiColumn Picker는 SpreadJS의 드롭다운 유형으로, JavaScript 코드를 사용하여 통합 문서의 셀 스타일로 정의됩니다. 개발자는 선택기의 데이터 소스를 지정할 수 있습니다. 아래 스프레드시트의 MultiColumn Picker에서 다른 항목을 선택하면 옵션이 어떻게 바뀌는지 살펴볼 수 있습니다.

드롭다운은 개발자에게 특정 속성이 있는 드롭다운 메뉴를 통합 문서의 셀에 추가하는 기능을 제공합니다. 이러한 드롭다운 메뉴는 드롭다운 메뉴에 사용할 코드를 지정하는 것 이외에 추가 코드가 필요하지 않습니다. 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; }