<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 8: Alternative display</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .slick-cell { background: white !important; border-color: transparent !important; line-height: 19px !important; } /* alternating offsets */ .slick-row .cell-inner { margin-right: 60px; } .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner, .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner { margin-left: 60px; margin-right: 0; } .contact-card-cell { border-color: transparent !important; } .cell-inner { height: 80px; margin: 10px; padding: 10px; background: #fafafa; border: 1px solid gray; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 1px 1px 5px silver; -webkit-box-shadow: 1px 1px 5px silver; -webkit-transition: all 0.5s; } .cell-inner:hover { background: #f0f0f0; } .cell-left { width: 40px; height: 100%; float: left; border-right: 1px dotted gray; background: url("../images/user_identity.gif") no-repeat top center; } .cell-main { margin-left: 50px; } </style> </head> <body> <table width="100%"> <tr> <td valign="top" width="50%"> <div id="myGrid" style="width:600px;height:500px;"></div> </td> <td valign="top"> <h2>Demonstrates:</h2> <ul> <li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" target=_blank>micro-templates</a> while still using SlickGrid's virtual rendering technology. </li> </ul> <h2>View Source:</h2> <ul> <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example8-alternative-display.html" target="_sourcewindow"> View the source for this example on Github</a></li> </ul> </td> </tr> </table> <!-- cell template --> <script type="text/html" id="cell_template"> <div class="cell-inner"> <div class="cell-left"></div> <div class="cell-main"> <b><%=name%></b><br/> <%=title%><br/> <%=email%><br/> <%=phone%> </div> </div> </script> <script src="../lib/firebugx.js"></script> <script src="../lib/jquery-1.7.min.js"></script> <script src="../lib/jquery.event.drag-2.2.js"></script> <script src="../slick.core.js"></script> <script src="../slick.grid.js"></script> <script> // Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function () { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript str .replace(/[\r\t\n]/g, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%>").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); // Provide some basic currying to the user return data ? fn(data) : fn; }; })(); var grid; var data = []; var columns = [ {id: "contact-card", name: "Contacts", formatter: renderCell, width: 500, cssClass: "contact-card-cell"} ]; var options = { rowHeight: 140, editable: false, enableAddRow: false, enableCellNavigation: false, enableColumnReorder: false }; var compiled_template = tmpl("cell_template"); function renderCell(row, cell, value, columnDef, dataContext) { return compiled_template(dataContext); } $(function () { for (var i = 0; i < 100; i++) { var d = (data[i] = {}); d["name"] = "User " + i; d["email"] = "test.user@nospam.org"; d["title"] = "Regional sales manager"; d["phone"] = "206-000-0000"; } grid = new Slick.Grid("#myGrid", data, columns, options); }) </script> </body> </html>