1<!doctype html> 2<html class="no-js"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Getting started - jsGrid</title> 7 <meta name="description" content="Getting started - jsGrid"/> 8 <meta name="viewport" content="width=device-width, initial-scale=1"/> 9 <meta name="keywords" content=", "/> 10 11 <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'> 12 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 13 14 <link rel="stylesheet" href="/css/style.css"/> 15 16 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 17 18 <!-- Open Graph: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ 19 Twitter: https://dev.twitter.com/docs/cards/types/summary-card 20 ============================== --> 21 <meta property="og:title" content="Getting started"/> 22 <meta property="og:site_name" content=" - jsGrid"/> 23 <meta property="og:url" content=" - http://js-grid.com"/> 24 <meta property="og:description" content=""/> 25 <meta property="og:image" content=""/> 26 <meta name="twitter:card" content="summary"> 27 <meta name="twitter:site" content="@artem_tabalin"> 28 <meta name="twitter:title" content="Getting started"> 29 <meta name="twitter:description" content=""> 30 <meta name="twitter:image" content=""> 31 32
32<script src="/bower_components/modernizr/modernizr.js"></script>
32 33</head> 34<body> 35 36<div class="off-canvas-wrap" data-offcanvas> 37 <div class="inner-wrap"> 38 <!--[if lt IE 8]> 39 <div data-alert class="alert-box alert radius" class="browsehappy">Please <a href="http://browsehappy.com/">upgrade your browser</a>. <a href="#" class="close">×</a></div> 40 <![endif]--> 41 42 <header class="header"> 43 <div class="row"> 44 <div class="small-12 columns"> 45 <section class="main-nav right show-for-medium-up"> 46 <ul class="inline-list"> 47 <li><a href="/">Home</a></li> 48<li><a href="/getting-started">Getting Started</a></li> 49<li><a href="/demos">Demos</a></li> 50<li><a href="/samples">Backends</a></li> 51<li><a href="/docs">Documentation</a></li> 52 </ul> 53 </section> 54 55 <section class="main-nav right show-for-small"> 56 <ul class="inline-list"> 57 <li> 58 <a class="right-off-canvas-toggle"><i class="fa fa-bars fa-lg"></i></a> 59 </li> 60 </ul> 61 </section> 62 63 <h1 class="brand"><a href="http://js-grid.com">jsGrid</a></h1> 64 </div> 65 </div> 66 </header> 67 68 <!-- Off Canvas Menu --> 69 <aside class="right-off-canvas-menu"> 70 <ul class="off-canvas-list"> 71 <li><a href="/">Home</a></li> 72<li><a href="/getting-started">Getting Started</a></li> 73<li><a href="/demos">Demos</a></li> 74<li><a href="/samples">Backends</a></li> 75<li><a href="/docs">Documentation</a></li> 76 </ul> 77 </aside> 78 79 <section role="main"> 80 <div class="page-header"> 81 <div class="row"> 82 <div class="medium-9 columns content"> 83 <h1>Getting Started</h1> 84 <p>How to start using jsGrid</p> 85 </div> 86 <div class="medium-3 columns content"> 87 <div class="carbon-container"> 88
88<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIE2QE&placement=js-gridcom" id="_carbonads_js"></script>
88 89</div> 90 </div> 91 </div> 92</div> 93 94<div class="page-content"> 95 <div class="row"> 96 <div class="small-12 columns content"> 97 <h2>jsGrid CDN</h2> 98 <p>jsGrid is available on <a href="https://cdnjs.com/libraries/jsgrid" target="_blank">cdnjs</a>. Here is the CDN links available:</p> 99 <div class="code"> 100<pre class="prettyprint linenums lang-html"> 101<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" /> 102<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 103 104<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script></pre> 105 </div> 106 107 <h2>How to use jsGrid</h2> 108 <p class="step">1. Download jsGrid or install it with bower</p> 109 110 <div class="code"> 111<pre class="prettyprint linenums lang-bash"> 112$ bower install js-grid 113</pre> 114 </div> 115 116 <div> 117 <a href="https://github.com/tabalinas/jsgrid/releases/download/v1.5.3/jsgrid-1.5.3.zip" class="button large success"> 118 Download jsGrid<br /><small>combined</small> 119 </a> 120 <a href="https://github.com/tabalinas/jsgrid/archive/v1.5.3.zip" class="button large"> 121 Download source<br /><small>.zip file</small> 122 </a> 123 <a href="https://github.com/tabalinas/jsgrid/archive/v1.5.3.tar.gz" class="button large"> 124 Download source<br /><small>.tar.gz file</small> 125 </a> 126 </div> 127 128 <p class="step">2. Ensure that <strong>jQuery v1.8.3 or later</strong> is included.</p> 129 130 <p class="step">3. Include <strong>jsGrid</strong> script and css stylesheet files into your web page:</p> 131 132 <div class="code"> 133<pre class="prettyprint linenums lang-html"> 134<link type="text/css" rel="stylesheet" href="jsgrid.min.css" /> 135<link type="text/css" rel="stylesheet" href="jsgrid-theme.min.css" /> 136 137<script type="text/javascript" src="jsgrid.min.js"></script> 138</pre> 139 </div> 140 141 <p class="step">4. Add a <strong><div></strong> for the grid to your web page markup:</p> 142 143 <div class="code"> 144<pre class="prettyprint linenums lang-html"> 145<div id="jsGrid"></div> 146</pre> 147 </div> 148 149 <p class="step">5. Create the grid applying jQuery plugin <strong>jsGrid</strong> with the config as follows:</p> 150 151 <div class="code"> 152<pre class="prettyprint linenums lang-html"> 153<script> 154 var clients = [ 155 { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false }, 156 { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true }, 157 { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false }, 158 { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true }, 159 { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false } 160 ]; 161 162 var countries = [ 163 { Name: "", Id: 0 }, 164 { Name: "United States", Id: 1 }, 165 { Name: "Canada", Id: 2 }, 166 { Name: "United Kingdom", Id: 3 } 167 ]; 168 169 $("#jsGrid").jsGrid({ 170 width: "100%", 171 height: "400px", 172 173 inserting: true, 174 editing: true, 175 sorting: true, 176 paging: true, 177 178 data: clients, 179 180 fields: [ 181 { name: "Name", type: "text", width: 150, validate: "required" }, 182 { name: "Age", type: "number", width: 50 }, 183 { name: "Address", type: "text", width: 200 }, 184 { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" }, 185 { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, 186 { type: "control" } 187 ] 188 }); 189</script></pre> 190 </div> 191 192 </div> 193 </div> 194</div> 195 196 </section> 197 198 <footer class="footer" role="contentinfo"> 199 <div class="row"> 200 <div class="medium-6 columns content footer-nav-container"> 201 <ul class="inline-list footer-nav"> 202 <li>
202jsGrid v1.5.3</li> 203<li><a href="/releases">Releases</a></li> 204<li><a href="https://github.com/tabalinas/jsgrid">GitHub</a></li> 205<li><a href="https://github.com/tabalinas/jsgrid/issues">Issues</a></li> 206 </ul> 207 </div> 208 <div class="medium-6 columns content"> 209 <p class="quiet copyright"> 210 <a class="twitter-follow-button" href="https://twitter.com/artem_tabalin" data-show-count="true" data-lang="en">Follow @artem_tabalin</a> 211 <br /> 212 Created by <a href="https://github.com/tabalinas" target="_blank">Artem Tabalin</a> 2016 213 </p> 214 </div> 215 </div> 216 </footer> 217 218 <!-- close the off-canvas menu --> 219 <a class="exit-off-canvas"></a> 220 </div> 221</div> 222
223<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
vendor: 1 bytes, line 223
223
224<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true"></script>
vendor: 1 bytes, line 224
224
225<script>window.jQuery || document.write('
225<script src="/bower_components/jquery/jquery.js"><\/script>')</script>
vendor: 1 bytes, line 225
225
226<script src="/js/plugins.js"></script>
vendor: 1 bytes, line 226
226
227<script src="/bower_components/foundation/js/foundation.min.js"></script>
vendor: 1 bytes, line 227
227
228<script src="/js/script.js"></script>
228 229
230<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
vendor: 1 bytes, line 230
230
231<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
vendor: 1 bytes, line 231
231
232<script>
vendor: 469 bytes, lines 232-244
232 233 (function (i, s, o, g, r, a, m) { 234 i['GoogleAnalyticsObject'] = r; 235 i[r] = i[r] || function () { 236 (i[r].q = i[r].q || []).push(arguments) 237 }, i[r].l = 1 * new Date(); 238 a = s.createElement(o), 239 m = s.getElementsByTagName(o)[0]; 240 a.async = 1; 241 a.src = g; 242 m.parentNode.insertBefore(a, m) 243 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 244 ga('create', '
244UA-44114514-5
vendor: 40 bytes, lines 244-245
244', 'auto'); 245 ga('send', 'pageview');
246</script>
246 247</body> 248</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.