Amazon Slicer

Slicers can have many different types of UI.、 For example, there are many slicers on the www.amazon.com web page that let us filter goods that we are interested in.

Here we show you an amazon slicer sample.
var dataNames = ["Image", "Description", "Brand", "Price", "Internal Memory", "Network", "Avg. Customer Review", "ShipToChina"]; //"size", var datas = [["NOKIA521.jpg", "Nokia Lumia 521 T-Mobile Cell Phone - White", "Nokia", "49.99", "16", "3G", "4", true], ["LG450.jpg", "LG 450 Black - No Contract (T-Mobile)", "LG", "29.99", "4", "3G", "4", true], ["LGC365.jpg", "LG Xpression C395 Unlocked GSM Slider Cell Phone with Touchscreen + Full QWERTY Keyboard - Red", "LG", "49.99", "32", "3G", "3.5", false], ["BLUPink.jpg", "BLU Dash JR W D141w Unlocked GSM Dual-SIM Android Cell Phone - Pink", "BLU", "18.99", "4", "3G", "4", true], ["BLUWhite.jpg", "BLU Dash JR W D141w Unlocked GSM Dual-SIM Android Cell Phone - White", "BLU", "129.99", "32", "4G", "3.5", false], ["LGA275.jpg", "LG A275 Black Unlocked GSM Dual SIM QuadBand Cell Phone - International Version - No Warranty", "LG", "79.89", "4", "3G", "3.5", false], ["BLUBlue.jpg", "BLU Dash JR W D141w Unlocked GSM Dual-SIM Android Cell Phone - Blue", "BLU", "59.99", "4", "GSM", "4", false], ["LGVN250.jpg", "LG Cosmos VN250 Verizon Phone (POST PAID)", "LG", "449.99", "64", "4G", "3.5", false], ["LGOptimus.jpg", "LG Optimus Dynamic Android Prepaid Phone with Triple Minutes (Tracfone)", "LG", "29.99", "16", "GSM", "4", true], ["LG305c.jpg", "Tracfone LG 305C with Triple Minutes for Life (Tracfone)", "LG", "99.99", "16", "3G", "4", false], ["SamsungC3520.jpg", "Samsung GT-C3520I Unlocked Quad-Band GSM Phone with 1.3 MP Camera, MP3 Player...", "Samsung", "64.99", "8", "3G", "3.5", false], ["LGVN251.jpg", "LG VN251 VN 251 COSMOS 2 Verizon Wireless Slider Keyboard Bluetooth Cell Phone", "LG", "58.69", "16", "4G", "4", false], ["ZTEUSAZ222.jpg", "AT&T Z222 Go Phone (AT&T)", "ZTE USA", "24.85", "4", "4G", "4", false], ["BLUQ170T.jpg", "BLU Q170T Samba TV Unlocked Dual SIM Quad-Band GSM Phone (Black/Red)", "BLU", "26.08", "32", "3G", "3.5", true], ["Apple4SWhite.jpg", "Apple iPhone 4S GSM Unlocked 16GB Smartphone - White", "Apple", "199.99", "16", "GSM", "4", false], ["LG840G.jpg", "LG 840G Prepaid Phone With Triple Minutes (Tracfone)", "LG", "48.95", "32", "4G", "3.5", false], ["SamsungA157V.jpg", "Samsung a157V (AT&T)", "Samsung", "14.99", "8", "3G", "3.5", false], ["LGVN150.jpg", "LG Revere VN150 Bluetooth CDMA Camera Flip Cell Phone Verizon or PagePlus", "LG", "72.50", "2", "GSM", "3.5", false], ["NOKIA106.jpg", "Nokia 106 Unlocked GSM Dual-Band Cell Phone w/ SMS and FM Radio - Black", "Nokia", "17.99", "2", "GSM", "4", false], ["ZTEZ222.jpg", "Unlocked ZTE Z222 Flip Phone With Camera For ATT, T-Mobile and Other Supported GSM Networks...", "ZTE", "27.79", "16", "4G", "3.5", false], ["Apple4SUnlocked.jpg", "Apple iPhone 4S 16GB 3G WiFi Black Smartphone Unlocked", "Apple", "182.99", "16", "3G", "4", false], ["BLUQ170TBlue.jpg", "BLU Q170T Samba TV Unlocked Dual SIM Quad-Band GSM Phone (Black/Blue)", "BLU", "22.99", "2", "GSM", "4", false], ["SamsungC3520Gray.jpg", "Samsung GT-C3520BLK Unlocked GSM Cell Phone,Charcoal Gray", "Samsung", "99.99", "8", "3G", "3.5", false], ["LG306G.jpg", "LG 306G 3G Cell Phone | TracFone", "TracFone", "4.99", "2", "GSM", "3.5", false]]; var path = (location.origin + location.pathname); var srcBase = "$DEMOROOT$/spread/source/"; // if (path.indexOf("#") === -1) { // // srcBase = location.origin + location.pathname; // if (path.indexOf("demos/") > -1) { // srcBase = path.substr(0, path.indexOf("demos/")); // } // } window.onload = function () { var dataSource = new GC.Spread.Slicers.GeneralSlicerData(datas, dataNames); var brandSlicer = new AmazonSlicer(document.getElementById('slicer_Brand')); brandSlicer.setData(dataSource, "Brand"); var memorySlicer = new AmazonSlicer(document.getElementById('slicer_Memory')); memorySlicer.setData(dataSource, "Internal Memory"); var netWorkSlicer = new AmazonSlicer(document.getElementById('slicer_Network')); netWorkSlicer.setData(dataSource, "Network"); var customerReviewSlicer = new AmazonSlicer(document.getElementById('slicer_CustomerReview')); customerReviewSlicer.setData(dataSource, "Avg. Customer Review"); }; function AmazonSlicer(container) { this.container = container; } AmazonSlicer.prototype.constructor = AmazonSlicer; AmazonSlicer.prototype.setData = function (slicerData, columnName) { this.slicerData = slicerData; this.columnName = columnName; this.data = slicerData.getData(columnName); this.exclusiveDatas = slicerData.getExclusiveData(columnName); this.slicerData.attachListener(this); this.onDataLoaded(); } AmazonSlicer.prototype.onDataLoaded = function () { let slicer = this; var header = '<div class="slicerHeader">' + '<div class="slicerHeaderBorder"></div>' + '<span style="font-size:medium">' + this.columnName + '</span>' + '<div class="slicerHeaderBorder"></div>' + '</div>'; if (slicer.container.className.indexOf('slicer') < 0) { slicer.container.className = slicer.container.className + ' slicer'; } var datas = slicer.exclusiveDatas; let slicerContent = header; if (slicer.columnName === "Avg. Customer Review") { for (var i = 0; i < datas.length; i++) { var count = 0; for (var j = 0; j < datas.length; j++) { if (parseFloat(datas[j]) >= parseFloat(datas[i])) { count += slicer.slicerData.getRowIndexes(slicer.columnName, slicer.slicerData.getExclusiveData(slicer.columnName).indexOf(datas[j])).length; } } var imageSrcPrefix = srcBase ? srcBase : ''; var image = '<img src="' + imageSrcPrefix + 'images\/' + datas[i] + '.png" alt="' + datas[i] + '"style="vertical-align:middle"></img><span>& Up</span>' slicerContent += '<div>' + image + '<span style="color:#A29999">(' + count + ')</span></div>'; } } else { for (var i = 0; i < datas.length; i++) { var count = slicer.slicerData.getRowIndexes(slicer.columnName, slicer.slicerData.getExclusiveData(slicer.columnName).indexOf(datas[i])).length; // todo label include checkbox slicerContent += '<label style="display: block">' + '<input type="checkbox"/><span>' + datas[i] + '</span><span style="color:#A29999">(' + count + ')</span>' + '</label>'; } } slicer.container.innerHTML = slicerContent; var headerEle = slicer.container.firstChild; headerEle.onmousedown = function (e) { slicer.slicerData.doUnfilter(slicer.columnName); if (slicer.columnName !== "Avg. Customer Review") { var childNodes = slicer.container.childNodes; for (var i = 1, length = childNodes.length; i < length; i++) { childNodes[i].childNodes[0].checked = false; } } } var items = []; var children = slicer.container.childNodes children.forEach((item, index) => { if (index === 0) { return; } items.push(item); item.className = item.className + ' slicerItem'; item.onmouseenter = function (e) { e.target.className += ' hover'; } item.onmouseleave = function (e) { e.target.className = e.target.className.replace('hover', '').trim(); } if (slicer.columnName === "Avg. Customer Review") { item.onclick = function (e) { var exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName), childNodes = this.parentNode.childNodes, indexes = []; var currentAlt = item.childNodes[0].alt; for (var i = 1, length = childNodes.length; i < length; i++) { var tempAlt = childNodes[i].childNodes[0].alt; if (parseFloat(tempAlt) >= parseFloat(currentAlt)) { indexes.push(exclusiveData.indexOf(tempAlt)); } } if (indexes.length === 0) { slicer.slicerData.doUnfilter(slicer.columnName); } else { slicer.slicerData.doFilter(slicer.columnName, {exclusiveRowIndexes: indexes}) } } } else { // label checkbox item.onclick = function (e) { var exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName), childNodes = item.parentNode.childNodes, indexes = []; for (var i = 1, length = childNodes.length; i < length; i++) { if (childNodes[i].childNodes[0].checked) { indexes.push(exclusiveData.indexOf(childNodes[i].childNodes[1].innerText)) } } if (indexes.length === 0) { slicer.slicerData.doUnfilter(slicer.columnName); } else { slicer.slicerData.doFilter(slicer.columnName, {exclusiveRowIndexes: indexes}) } } } }); slicer.items = items; slicer.onFiltered(null); }; AmazonSlicer.prototype.resetClass = function () { var items = this.items; var classes = ["filtered", "partial", "filteredOutBySelf", "filteredOutByOther"]; for (var i = 0; i < items.length; i++) { for (var k = 0; k < classes.length; k++) { items[i].className = items[i].className.replace(classes[k], '').trim(); } } }; AmazonSlicer.prototype.onFiltered = function () { this.resetClass(); var items = this.items; var filteredItems = this.slicerData.getFilteredIndexes(this.columnName); for (var i = 0; i < filteredItems.length; i++) { if (items[filteredItems[i]].className.indexOf('filtered') < 0) { items[filteredItems[i]].className = items[filteredItems[i]].className + ' filtered'; } } var filteredOutItems = this.slicerData.getFilteredOutIndexes(this.columnName, GC.Spread.Slicers.FilteredOutDataType.byCurrentColumn); for (var i = 0; i < filteredOutItems.length; i++) { if (items[filteredOutItems[i]].className.indexOf('filteredOutBySelf').indexOf < 0) { items[filteredOutItems[i]].className = items[filteredOutItems[i]].className + ' filteredOutBySelf' } } var filteredOutByOtherItems = this.slicerData.getFilteredOutIndexes(this.columnName, GC.Spread.Slicers.FilteredOutDataType.byOtherColumns); for (var i = 0; i < filteredOutByOtherItems.length; i++) { if (items[filteredOutByOtherItems[i]].className.indexOf('filteredOutByOther') < 0) { items[filteredOutByOtherItems[i]].className = items[filteredOutByOtherItems[i]].className + 'filteredOutByOther' } } this.refreshList(); }; AmazonSlicer.prototype.refreshList = function () { var list = document.getElementById('ss'); var indexes = this.slicerData.getFilteredRowIndexes(); let listItemsHtml = ''; for (var i = 0, rowCount = indexes.length; i < rowCount; i++) { var imageSrcPrefix = srcBase ? srcBase : ''; var image1 = '<div class="p_image"><img src="' + imageSrcPrefix + 'images\/' + datas[indexes[i]][0] + '" style="width:160px;height:160px"></img></div>'; var image2 = '<div class="p_vote"><img src="' + imageSrcPrefix + 'images\/' + datas[indexes[i]][6] + '.png"/></div>'; listItemsHtml += '<div style="width:200px;margin-left:20px;margin-top:10px;display:inline-block" >' + image1 + '<div class="p_description" style="height:86px;font-size:medium;color:#0066C0">' + datas[indexes[i]][1] + '</div>' + '<div class="p_company">by ' + datas[indexes[i]][2] + '</div>' + '<div class="p_price" style="font-weight:bold;color:#B52704">$' + datas[indexes[i]][3] + '</div>' + image2 + '</div>' } list.innerHTML = listItemsHtml; }
<!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$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.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" class="sample-spreadsheets"></div> <!--<div class="sample-options layout_slicer">--> <div class="options-container"> <p class="desc">Select different options to filter the results in the store.</p> <div id="slicer_Brand" class="slicer"></div> <div id="slicer_Memory" class="slicer"></div> <div id="slicer_Network" class="slicer"></div> <div id="slicer_CustomerReview" class="slicer"></div> </div> <!--</div>--> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: auto; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .slicer { margin-bottom: 10px; } .slicerHeader { position: relative; padding-top: 1px; font-weight: 600; } .hover { color: #E47911; cursor: default; } .desc { padding: 2px 10px; margin-top: 0; background-color: #F4F8EB; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }