mirror of https://github.com/ColorlibHQ/AdminLTE
added jsGrid & updated DataTables demo
- updated DataTables typo in demo files - added jsGrid to package,json & npm/Plugins.js - added jsgrid demopull/2149/head
REJack
parent
9dfbc32be7
commit
3b8df1a62b
|
|
@ -197,6 +197,15 @@ const Plugins = [
|
|||
from: 'node_modules/toastr/build/',
|
||||
to : 'plugins/toastr'
|
||||
},
|
||||
// jsGrid
|
||||
{
|
||||
from: 'node_modules/jsgrid/dist',
|
||||
to: 'plugins/jsgrid'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/jsgrid/demos/',
|
||||
to: 'plugins/jsgrid/demos'
|
||||
},
|
||||
|
||||
|
||||
// // Doc Assets
|
||||
|
|
|
|||
|
|
@ -388,7 +388,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="pages/tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -375,7 +375,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="pages/tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -385,7 +385,13 @@ to get the desired effect
|
|||
<li class="nav-item">
|
||||
<a href="pages/tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "admin-lte",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-beta.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -8142,6 +8142,11 @@
|
|||
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
|
||||
"dev": true
|
||||
},
|
||||
"jsgrid": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
|
||||
"integrity": "sha1-sV/EJkgxU77itrVnMS9nXZKDSg0="
|
||||
},
|
||||
"json-parse-better-errors": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@
|
|||
"jquery-mousewheel": "^3.1.13",
|
||||
"jquery-ui-dist": "^1.12.1",
|
||||
"jqvmap": "github:CivilError/jqvmap",
|
||||
"jsgrid": "^1.5.3",
|
||||
"moment": "^2.24.0",
|
||||
"overlayscrollbars": "^1.7.2",
|
||||
"popper.js": "^1.15.0",
|
||||
|
|
|
|||
|
|
@ -377,7 +377,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -411,7 +411,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -377,7 +377,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -381,7 +381,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -383,7 +383,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -382,7 +382,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -383,7 +383,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -377,7 +377,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -377,7 +377,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -406,7 +406,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -388,7 +388,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -380,7 +380,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -380,7 +380,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -380,7 +380,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>AdminLTE 3 | Data Tables</title>
|
||||
<title>AdminLTE 3 | DataTables</title>
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
|
@ -380,7 +380,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link active">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -582,12 +588,12 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>Data Tables</h1>
|
||||
<h1>DataTables</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Data Tables</li>
|
||||
<li class="breadcrumb-item active">DataTables</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -600,7 +606,7 @@
|
|||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Hover Data Table</h3>
|
||||
<h3 class="card-title">DataTable with minimal features & hover style</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
|
|
@ -1040,7 +1046,7 @@
|
|||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Data Table With Full Features</h3>
|
||||
<h3 class="card-title">DataTable with default features</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,673 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>AdminLTE 3 | jsGrid</title>
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
<!-- jsGrid -->
|
||||
<link rel="stylesheet" href="../../plugins/jsgrid/jsgrid.min.css">
|
||||
<link rel="stylesheet" href="../../plugins/jsgrid/jsgrid-theme.min.css">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
</head>
|
||||
<body class="hold-transition sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-expand navbar-white navbar-light border-bottom">
|
||||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="../../index3.html" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- SEARCH FORM -->
|
||||
<form class="form-inline ml-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-navbar" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Right navbar links -->
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#">
|
||||
<i class="far fa-comments"></i>
|
||||
<span class="badge badge-danger navbar-badge">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="media">
|
||||
<img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
|
||||
<div class="media-body">
|
||||
<h3 class="dropdown-item-title">
|
||||
Brad Diesel
|
||||
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="text-sm">Call me whenever you can...</p>
|
||||
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="media">
|
||||
<img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
|
||||
<div class="media-body">
|
||||
<h3 class="dropdown-item-title">
|
||||
John Pierce
|
||||
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="text-sm">I got your message bro</p>
|
||||
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="media">
|
||||
<img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
|
||||
<div class="media-body">
|
||||
<h3 class="dropdown-item-title">
|
||||
Nora Silvester
|
||||
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="text-sm">The subject goes here</p>
|
||||
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Notifications Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#">
|
||||
<i class="far fa-bell"></i>
|
||||
<span class="badge badge-warning navbar-badge">15</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
|
||||
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-envelope mr-2"></i> 4 new messages
|
||||
<span class="float-right text-muted text-sm">3 mins</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-users mr-2"></i> 8 friend requests
|
||||
<span class="float-right text-muted text-sm">12 hours</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-file mr-2"></i> 3 new reports
|
||||
<span class="float-right text-muted text-sm">2 days</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
|
||||
<!-- Main Sidebar Container -->
|
||||
<aside class="main-sidebar sidebar-dark-primary elevation-4">
|
||||
<!-- Brand Logo -->
|
||||
<a href="../../index3.html" class="brand-link">
|
||||
<img src="../../dist/img/AdminLTELogo.png"
|
||||
alt="AdminLTE Logo"
|
||||
class="brand-image img-circle elevation-3"
|
||||
style="opacity: .8">
|
||||
<span class="brand-text font-weight-light">AdminLTE 3</span>
|
||||
</a>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Sidebar user (optional) -->
|
||||
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
|
||||
<div class="image">
|
||||
<img src="../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="#" class="d-block">Alexander Pierce</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<nav class="mt-2">
|
||||
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
|
||||
<!-- Add icons to the links using the .nav-icon class
|
||||
with font-awesome or any other icon font library -->
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-tachometer-alt"></i>
|
||||
<p>
|
||||
Dashboard
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../../index.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Dashboard v1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../index2.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Dashboard v2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../index3.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Dashboard v3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../widgets.html" class="nav-link">
|
||||
<i class="nav-icon fas fa-th"></i>
|
||||
<p>
|
||||
Widgets
|
||||
<span class="right badge badge-danger">New</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-copy"></i>
|
||||
<p>
|
||||
Layout Options
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
<span class="badge badge-info right">6</span>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../layout/top-nav.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Top Navigation</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../layout/boxed.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Boxed</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../layout/fixed.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Fixed</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../layout/fixed-topnav.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Fixed Navbar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../layout/fixed-footer.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Fixed Footer</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../layout/collapsed-sidebar.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Collapsed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-chart-pie"></i>
|
||||
<p>
|
||||
Charts
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../charts/chartjs.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>ChartJS</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../charts/flot.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Flot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../charts/inline.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Inline</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-tree"></i>
|
||||
<p>
|
||||
UI Elements
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../UI/general.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>General</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../UI/icons.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../UI/buttons.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Buttons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../UI/sliders.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Sliders</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../UI/navbar.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Navbar & Tabs</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-edit"></i>
|
||||
<p>
|
||||
Forms
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../forms/general.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>General Elements</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../forms/advanced.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Advanced Elements</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../forms/editors.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Editors</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview menu-open">
|
||||
<a href="#" class="nav-link active">
|
||||
<i class="nav-icon fas fa-table"></i>
|
||||
<p>
|
||||
Tables
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../tables/simple.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Simple Tables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link active">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">EXAMPLES</li>
|
||||
<li class="nav-item">
|
||||
<a href="../calendar.html" class="nav-link">
|
||||
<i class="nav-icon far fa-calendar-alt"></i>
|
||||
<p>
|
||||
Calendar
|
||||
<span class="badge badge-info right">2</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
<p>
|
||||
Mailbox
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../mailbox/mailbox.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Inbox</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../mailbox/compose.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Compose</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../mailbox/read-mail.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Read</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-book"></i>
|
||||
<p>
|
||||
Pages
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../examples/invoice.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Invoice</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/profile.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/e_commerce.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>E-commerce</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/projects.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Projects</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/project_add.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Project Add</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/project_edit.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Project Edit</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/project_detail.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Project Detail</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/contacts.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Contacts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-plus-square"></i>
|
||||
<p>
|
||||
Extras
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../examples/login.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Login</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/register.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Register</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/lockscreen.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Lockscreen</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/legacy-user-menu.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Legacy User Menu</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/404.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Error 404</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/500.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Error 500</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../examples/blank.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Blank Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../starter.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Starter Page</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">MISCELLANEOUS</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://adminlte.io/docs" class="nav-link">
|
||||
<i class="nav-icon fas fa-file"></i>
|
||||
<p>Documentation</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">LABELS</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle text-danger"></i>
|
||||
<p class="text">Important</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle text-warning"></i>
|
||||
<p>Warning</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle text-info"></i>
|
||||
<p>Informational</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.sidebar-menu -->
|
||||
</div>
|
||||
<!-- /.sidebar -->
|
||||
</aside>
|
||||
|
||||
<!-- Content Wrapper. Contains page content -->
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>jsGrid</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">jsGrid</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.container-fluid -->
|
||||
</section>
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">jsGrid</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div id="jsGrid1"></div>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<footer class="main-footer">
|
||||
<div class="float-right d-none d-sm-block">
|
||||
<b>Version</b> 3.0.0-beta.2
|
||||
</div>
|
||||
<strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
|
||||
reserved.
|
||||
</footer>
|
||||
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Control sidebar content goes here -->
|
||||
</aside>
|
||||
<!-- /.control-sidebar -->
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="../../plugins/jquery/jquery.min.js"></script>
|
||||
<!-- Bootstrap 4 -->
|
||||
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- jsGrid -->
|
||||
<script src="../../plugins/jsgrid/demos/db.js"></script>
|
||||
<script src="../../plugins/jsgrid/jsgrid.min.js"></script>
|
||||
<!-- FastClick -->
|
||||
<script src="../../plugins/fastclick/fastclick.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="../../dist/js/adminlte.min.js"></script>
|
||||
<!-- AdminLTE for demo purposes -->
|
||||
<script src="../../dist/js/demo.js"></script>
|
||||
<!-- page script -->
|
||||
<script>
|
||||
$(function () {
|
||||
$("#jsGrid1").jsGrid({
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
|
||||
sorting: true,
|
||||
paging: true,
|
||||
|
||||
data: db.clients,
|
||||
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -377,7 +377,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="../tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -377,7 +377,13 @@
|
|||
<li class="nav-item">
|
||||
<a href="tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Data Tables</p>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Basic Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Basic Scenario</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
inserting: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
deleteConfirm: "Do you really want to delete the client?",
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{ type: "control" }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Batch Delete</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Batch Delete</h1>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
confirmDeleting: false,
|
||||
paging: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
return db.clients;
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
headerTemplate: function() {
|
||||
return $("<button>").attr("type", "button").text("Delete")
|
||||
.on("click", function () {
|
||||
deleteSelectedItems();
|
||||
});
|
||||
},
|
||||
itemTemplate: function(_, item) {
|
||||
return $("<input>").attr("type", "checkbox")
|
||||
.prop("checked", $.inArray(item, selectedItems) > -1)
|
||||
.on("change", function () {
|
||||
$(this).is(":checked") ? selectItem(item) : unselectItem(item);
|
||||
});
|
||||
},
|
||||
align: "center",
|
||||
width: 50
|
||||
},
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
var selectedItems = [];
|
||||
|
||||
var selectItem = function(item) {
|
||||
selectedItems.push(item);
|
||||
};
|
||||
|
||||
var unselectItem = function(item) {
|
||||
selectedItems = $.grep(selectedItems, function(i) {
|
||||
return i !== item;
|
||||
});
|
||||
};
|
||||
|
||||
var deleteSelectedItems = function() {
|
||||
if(!selectedItems.length || !confirm("Are you sure?"))
|
||||
return;
|
||||
|
||||
deleteClientsFromDb(selectedItems);
|
||||
|
||||
var $grid = $("#jsGrid");
|
||||
$grid.jsGrid("option", "pageIndex", 1);
|
||||
$grid.jsGrid("loadData");
|
||||
|
||||
selectedItems = [];
|
||||
};
|
||||
|
||||
var deleteClientsFromDb = function(deletingClients) {
|
||||
db.clients = $.map(db.clients, function(client) {
|
||||
return ($.inArray(client, deletingClients) > -1) ? null : client;
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom Grid Field Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css' />
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
|
||||
<style>
|
||||
.hasDatepicker {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-datepicker * {
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-size: 14px;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom Grid DateField</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
var MyDateField = function(config) {
|
||||
jsGrid.Field.call(this, config);
|
||||
};
|
||||
|
||||
MyDateField.prototype = new jsGrid.Field({
|
||||
sorter: function(date1, date2) {
|
||||
return new Date(date1) - new Date(date2);
|
||||
},
|
||||
|
||||
itemTemplate: function(value) {
|
||||
return new Date(value).toDateString();
|
||||
},
|
||||
|
||||
insertTemplate: function(value) {
|
||||
return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
|
||||
},
|
||||
|
||||
editTemplate: function(value) {
|
||||
return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
|
||||
},
|
||||
|
||||
insertValue: function() {
|
||||
return this._insertPicker.datepicker("getDate").toISOString();
|
||||
},
|
||||
|
||||
editValue: function() {
|
||||
return this._editPicker.datepicker("getDate").toISOString();
|
||||
}
|
||||
});
|
||||
|
||||
jsGrid.fields.myDateField = MyDateField;
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
inserting: true,
|
||||
editing: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
fields: [
|
||||
{ name: "Account", width: 150, align: "center" },
|
||||
{ name: "Name", type: "text" },
|
||||
{ name: "RegisterDate", type: "myDateField", width: 100, align: "center" },
|
||||
{ type: "control", editButton: false, modeSwitchButton: false }
|
||||
],
|
||||
data: db.users
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom Load Indicator</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script>
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.textarea.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
|
||||
<style>
|
||||
.rating {
|
||||
color: #F8CA03;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom Load Indicator</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
sorting: true,
|
||||
paging: false,
|
||||
autoload: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
var d = $.Deferred();
|
||||
|
||||
$.ajax({
|
||||
url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
|
||||
dataType: "json"
|
||||
}).done(function(response) {
|
||||
setTimeout(function() {
|
||||
d.resolve(response.value);
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
return d.promise();
|
||||
}
|
||||
},
|
||||
loadIndicator: function(config) {
|
||||
var container = config.container[0];
|
||||
var spinner = new Spinner();
|
||||
|
||||
return {
|
||||
show: function() {
|
||||
spinner.spin(container);
|
||||
},
|
||||
hide: function() {
|
||||
spinner.stop();
|
||||
}
|
||||
};
|
||||
},
|
||||
fields: [
|
||||
{ name: "Name", type: "text" },
|
||||
{ name: "Description", type: "textarea", width: 150 },
|
||||
{ name: "Rating", type: "number", width: 50, align: "center",
|
||||
itemTemplate: function(value) {
|
||||
return $("<div>").addClass("rating").append(Array(value + 1).join("★"));
|
||||
}
|
||||
},
|
||||
{ name: "Price", type: "number", width: 50,
|
||||
itemTemplate: function(value) {
|
||||
return value.toFixed(2) + "$"; }
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom Row Renderer</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
|
||||
<style>
|
||||
.client-photo { float: left; margin: 0 20px 0 10px; }
|
||||
.client-photo img { border-radius: 50%; border: 1px solid #ddd; }
|
||||
.client-info { margin-top: 10px; }
|
||||
.client-info p { line-height: 25px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom Row Renderer</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "80%",
|
||||
width: "50%",
|
||||
autoload: true,
|
||||
paging: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
var deferred = $.Deferred();
|
||||
|
||||
$.ajax({
|
||||
url: 'http://api.randomuser.me/?results=40',
|
||||
dataType: 'jsonp',
|
||||
success: function(data){
|
||||
deferred.resolve(data.results);
|
||||
}
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
},
|
||||
rowRenderer: function(item) {
|
||||
var user = item;
|
||||
var $photo = $("<div>").addClass("client-photo").append($("<img>").attr("src", user.picture.large));
|
||||
var $info = $("<div>").addClass("client-info")
|
||||
.append($("<p>").append($("<strong>").text(user.name.first.capitalize() + " " + user.name.last.capitalize())))
|
||||
.append($("<p>").text("Location: " + user.location.city.capitalize() + ", " + user.location.street))
|
||||
.append($("<p>").text("Email: " + user.email))
|
||||
.append($("<p>").text("Phone: " + user.phone))
|
||||
.append($("<p>").text("Cell: " + user.cell));
|
||||
|
||||
return $("<tr>").append($("<td>").append($photo).append($info));
|
||||
},
|
||||
fields: [
|
||||
{ title: "Clients" }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
String.prototype.capitalize = function() {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom View Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
|
||||
<style>
|
||||
.config-panel {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e9e9e9;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.config-panel label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom View</h1>
|
||||
<div class="config-panel">
|
||||
<label><input id="heading" type="checkbox" checked /> Heading</label>
|
||||
<label><input id="filtering" type="checkbox" checked /> Filtering</label>
|
||||
<label><input id="inserting" type="checkbox" /> Inserting</label>
|
||||
<label><input id="editing" type="checkbox" checked /> Editing</label>
|
||||
<label><input id="paging" type="checkbox" checked /> Paging</label>
|
||||
<label><input id="sorting" type="checkbox" checked /> Sorting</label>
|
||||
<label><input id="selecting" type="checkbox" checked /> Selecting</label>
|
||||
</div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{ type: "control", modeSwitchButton: false, editButton: false }
|
||||
]
|
||||
});
|
||||
|
||||
$(".config-panel input[type=checkbox]").on("click", function() {
|
||||
var $cb = $(this);
|
||||
$("#jsGrid").jsGrid("option", $cb.attr("id"), $cb.is(":checked"));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Data Manipulation</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
||||
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
|
||||
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
|
||||
<style>
|
||||
.ui-widget *, .ui-widget input, .ui-widget select, .ui-widget button {
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-size: 14px;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.details-form-field input,
|
||||
.details-form-field select {
|
||||
width: 250px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.details-form-field {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.details-form-field:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.details-form-field:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.details-form-field button {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input.error, select.error {
|
||||
border: 1px solid #ff9999;
|
||||
background: #ffeeee;
|
||||
}
|
||||
|
||||
label.error {
|
||||
float: right;
|
||||
margin-left: 100px;
|
||||
font-size: .8em;
|
||||
color: #ff6666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Data Manipulation</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<div id="detailsDialog">
|
||||
<form id="detailsForm">
|
||||
<div class="details-form-field">
|
||||
<label for="name">Name:</label>
|
||||
<input id="name" name="name" type="text" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="age">Age:</label>
|
||||
<input id="age" name="age" type="number" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="address">Address:</label>
|
||||
<input id="address" name="address" type="text" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="country">Country:</label>
|
||||
<select id="country" name="country">
|
||||
<option value="">(Select)</option>
|
||||
<option value="1">United States</option>
|
||||
<option value="2">Canada</option>
|
||||
<option value="3">United Kingdom</option>
|
||||
<option value="4">France</option>
|
||||
<option value="5">Brazil</option>
|
||||
<option value="6">China</option>
|
||||
<option value="7">Russia</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="married">Is Married</label>
|
||||
<input id="married" name="married" type="checkbox" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<button type="submit" id="save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
editing: true,
|
||||
autoload: true,
|
||||
paging: true,
|
||||
deleteConfirm: function(item) {
|
||||
return "The client \"" + item.Name + "\" will be removed. Are you sure?";
|
||||
},
|
||||
rowClick: function(args) {
|
||||
showDetailsDialog("Edit", args.item);
|
||||
},
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{
|
||||
type: "control",
|
||||
modeSwitchButton: false,
|
||||
editButton: false,
|
||||
headerTemplate: function() {
|
||||
return $("<button>").attr("type", "button").text("Add")
|
||||
.on("click", function () {
|
||||
showDetailsDialog("Add", {});
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$("#detailsDialog").dialog({
|
||||
autoOpen: false,
|
||||
width: 400,
|
||||
close: function() {
|
||||
$("#detailsForm").validate().resetForm();
|
||||
$("#detailsForm").find(".error").removeClass("error");
|
||||
}
|
||||
});
|
||||
|
||||
$("#detailsForm").validate({
|
||||
rules: {
|
||||
name: "required",
|
||||
age: { required: true, range: [18, 150] },
|
||||
address: { required: true, minlength: 10 },
|
||||
country: "required"
|
||||
},
|
||||
messages: {
|
||||
name: "Please enter name",
|
||||
age: "Please enter valid age",
|
||||
address: "Please enter address (more than 10 chars)",
|
||||
country: "Please select country"
|
||||
},
|
||||
submitHandler: function() {
|
||||
formSubmitHandler();
|
||||
}
|
||||
});
|
||||
|
||||
var formSubmitHandler = $.noop;
|
||||
|
||||
var showDetailsDialog = function(dialogType, client) {
|
||||
$("#name").val(client.Name);
|
||||
$("#age").val(client.Age);
|
||||
$("#address").val(client.Address);
|
||||
$("#country").val(client.Country);
|
||||
$("#married").prop("checked", client.Married);
|
||||
|
||||
formSubmitHandler = function() {
|
||||
saveClient(client, dialogType === "Add");
|
||||
};
|
||||
|
||||
$("#detailsDialog").dialog("option", "title", dialogType + " Client")
|
||||
.dialog("open");
|
||||
};
|
||||
|
||||
var saveClient = function(client, isNew) {
|
||||
$.extend(client, {
|
||||
Name: $("#name").val(),
|
||||
Age: parseInt($("#age").val(), 10),
|
||||
Address: $("#address").val(),
|
||||
Country: parseInt($("#country").val(), 10),
|
||||
Married: $("#married").is(":checked")
|
||||
});
|
||||
|
||||
$("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client);
|
||||
|
||||
$("#detailsDialog").dialog("close");
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,884 @@
|
|||
(function() {
|
||||
|
||||
var db = {
|
||||
|
||||
loadData: function(filter) {
|
||||
return $.grep(this.clients, function(client) {
|
||||
return (!filter.Name || client.Name.indexOf(filter.Name) > -1)
|
||||
&& (filter.Age === undefined || client.Age === filter.Age)
|
||||
&& (!filter.Address || client.Address.indexOf(filter.Address) > -1)
|
||||
&& (!filter.Country || client.Country === filter.Country)
|
||||
&& (filter.Married === undefined || client.Married === filter.Married);
|
||||
});
|
||||
},
|
||||
|
||||
insertItem: function(insertingClient) {
|
||||
this.clients.push(insertingClient);
|
||||
},
|
||||
|
||||
updateItem: function(updatingClient) { },
|
||||
|
||||
deleteItem: function(deletingClient) {
|
||||
var clientIndex = $.inArray(deletingClient, this.clients);
|
||||
this.clients.splice(clientIndex, 1);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
window.db = db;
|
||||
|
||||
|
||||
db.countries = [
|
||||
{ Name: "", Id: 0 },
|
||||
{ Name: "United States", Id: 1 },
|
||||
{ Name: "Canada", Id: 2 },
|
||||
{ Name: "United Kingdom", Id: 3 },
|
||||
{ Name: "France", Id: 4 },
|
||||
{ Name: "Brazil", Id: 5 },
|
||||
{ Name: "China", Id: 6 },
|
||||
{ Name: "Russia", Id: 7 }
|
||||
];
|
||||
|
||||
db.clients = [
|
||||
{
|
||||
"Name": "Otto Clay",
|
||||
"Age": 61,
|
||||
"Country": 6,
|
||||
"Address": "Ap #897-1459 Quam Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Connor Johnston",
|
||||
"Age": 73,
|
||||
"Country": 7,
|
||||
"Address": "Ap #370-4647 Dis Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lacey Hess",
|
||||
"Age": 29,
|
||||
"Country": 7,
|
||||
"Address": "Ap #365-8835 Integer St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Timothy Henson",
|
||||
"Age": 78,
|
||||
"Country": 1,
|
||||
"Address": "911-5143 Luctus Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Ramona Benton",
|
||||
"Age": 43,
|
||||
"Country": 5,
|
||||
"Address": "Ap #614-689 Vehicula Street",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Ezra Tillman",
|
||||
"Age": 51,
|
||||
"Country": 1,
|
||||
"Address": "P.O. Box 738, 7583 Quisque St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Dante Carter",
|
||||
"Age": 59,
|
||||
"Country": 1,
|
||||
"Address": "P.O. Box 976, 6316 Lorem, St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Christopher Mcclure",
|
||||
"Age": 58,
|
||||
"Country": 1,
|
||||
"Address": "847-4303 Dictum Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Ruby Rocha",
|
||||
"Age": 62,
|
||||
"Country": 2,
|
||||
"Address": "5212 Sagittis Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Imelda Hardin",
|
||||
"Age": 39,
|
||||
"Country": 5,
|
||||
"Address": "719-7009 Auctor Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Jonah Johns",
|
||||
"Age": 28,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 939, 9310 A Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Herman Rosa",
|
||||
"Age": 49,
|
||||
"Country": 7,
|
||||
"Address": "718-7162 Molestie Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Arthur Gay",
|
||||
"Age": 20,
|
||||
"Country": 7,
|
||||
"Address": "5497 Neque Street",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Xena Wilkerson",
|
||||
"Age": 63,
|
||||
"Country": 1,
|
||||
"Address": "Ap #303-6974 Proin Street",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lilah Atkins",
|
||||
"Age": 33,
|
||||
"Country": 5,
|
||||
"Address": "622-8602 Gravida Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Malik Shepard",
|
||||
"Age": 59,
|
||||
"Country": 1,
|
||||
"Address": "967-5176 Tincidunt Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Keely Silva",
|
||||
"Age": 24,
|
||||
"Country": 1,
|
||||
"Address": "P.O. Box 153, 8995 Praesent Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Hunter Pate",
|
||||
"Age": 73,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 771, 7599 Ante, Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Mikayla Roach",
|
||||
"Age": 55,
|
||||
"Country": 5,
|
||||
"Address": "Ap #438-9886 Donec Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Upton Joseph",
|
||||
"Age": 48,
|
||||
"Country": 4,
|
||||
"Address": "Ap #896-7592 Habitant St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Jeanette Pate",
|
||||
"Age": 59,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 177, 7584 Amet, St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kaden Hernandez",
|
||||
"Age": 79,
|
||||
"Country": 3,
|
||||
"Address": "366 Ut St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Kenyon Stevens",
|
||||
"Age": 20,
|
||||
"Country": 3,
|
||||
"Address": "P.O. Box 704, 4580 Gravida Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Jerome Harper",
|
||||
"Age": 31,
|
||||
"Country": 5,
|
||||
"Address": "2464 Porttitor Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Jelani Patel",
|
||||
"Age": 36,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 541, 5805 Nec Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Keaton Oconnor",
|
||||
"Age": 21,
|
||||
"Country": 1,
|
||||
"Address": "Ap #657-1093 Nec, Street",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Bree Johnston",
|
||||
"Age": 31,
|
||||
"Country": 2,
|
||||
"Address": "372-5942 Vulputate Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Maisie Hodges",
|
||||
"Age": 70,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 445, 3880 Odio, Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kuame Calhoun",
|
||||
"Age": 39,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 609, 4105 Rutrum St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Carlos Cameron",
|
||||
"Age": 38,
|
||||
"Country": 5,
|
||||
"Address": "Ap #215-5386 A, Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Fulton Parsons",
|
||||
"Age": 25,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 523, 3705 Sed Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Wallace Christian",
|
||||
"Age": 43,
|
||||
"Country": 3,
|
||||
"Address": "416-8816 Mauris Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Caryn Maldonado",
|
||||
"Age": 40,
|
||||
"Country": 1,
|
||||
"Address": "108-282 Nonummy Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Whilemina Frank",
|
||||
"Age": 20,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 681, 3938 Egestas. Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Emery Moon",
|
||||
"Age": 41,
|
||||
"Country": 4,
|
||||
"Address": "Ap #717-8556 Non Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Price Watkins",
|
||||
"Age": 35,
|
||||
"Country": 4,
|
||||
"Address": "832-7810 Nunc Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lydia Castillo",
|
||||
"Age": 59,
|
||||
"Country": 7,
|
||||
"Address": "5280 Placerat, Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lawrence Conway",
|
||||
"Age": 53,
|
||||
"Country": 1,
|
||||
"Address": "Ap #452-2808 Imperdiet St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kalia Nicholson",
|
||||
"Age": 67,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 871, 3023 Tellus Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Brielle Baxter",
|
||||
"Age": 45,
|
||||
"Country": 3,
|
||||
"Address": "Ap #822-9526 Ut, Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Valentine Brady",
|
||||
"Age": 72,
|
||||
"Country": 7,
|
||||
"Address": "8014 Enim. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Rebecca Gardner",
|
||||
"Age": 57,
|
||||
"Country": 4,
|
||||
"Address": "8655 Arcu. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Vladimir Tate",
|
||||
"Age": 26,
|
||||
"Country": 1,
|
||||
"Address": "130-1291 Non, Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Vernon Hays",
|
||||
"Age": 56,
|
||||
"Country": 4,
|
||||
"Address": "964-5552 In Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Allegra Hull",
|
||||
"Age": 22,
|
||||
"Country": 4,
|
||||
"Address": "245-8891 Donec St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Hu Hendrix",
|
||||
"Age": 65,
|
||||
"Country": 7,
|
||||
"Address": "428-5404 Tempus Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Kenyon Battle",
|
||||
"Age": 32,
|
||||
"Country": 2,
|
||||
"Address": "921-6804 Lectus St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Gloria Nielsen",
|
||||
"Age": 24,
|
||||
"Country": 4,
|
||||
"Address": "Ap #275-4345 Lorem, Street",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Illiana Kidd",
|
||||
"Age": 59,
|
||||
"Country": 2,
|
||||
"Address": "7618 Lacus. Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Adria Todd",
|
||||
"Age": 68,
|
||||
"Country": 6,
|
||||
"Address": "1889 Tincidunt Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kirsten Mayo",
|
||||
"Age": 71,
|
||||
"Country": 1,
|
||||
"Address": "100-8640 Orci, Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Willa Hobbs",
|
||||
"Age": 60,
|
||||
"Country": 6,
|
||||
"Address": "P.O. Box 323, 158 Tristique St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Alexis Clements",
|
||||
"Age": 69,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 176, 5107 Proin Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Akeem Conrad",
|
||||
"Age": 60,
|
||||
"Country": 2,
|
||||
"Address": "282-495 Sed Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Montana Silva",
|
||||
"Age": 79,
|
||||
"Country": 6,
|
||||
"Address": "P.O. Box 120, 9766 Consectetuer St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kaseem Hensley",
|
||||
"Age": 77,
|
||||
"Country": 6,
|
||||
"Address": "Ap #510-8903 Mauris. Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Christopher Morton",
|
||||
"Age": 35,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 234, 3651 Sodales Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Wade Fernandez",
|
||||
"Age": 49,
|
||||
"Country": 6,
|
||||
"Address": "740-5059 Dolor. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Illiana Kirby",
|
||||
"Age": 31,
|
||||
"Country": 2,
|
||||
"Address": "527-3553 Mi Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kimberley Hurley",
|
||||
"Age": 65,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 637, 9915 Dictum St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Arthur Olsen",
|
||||
"Age": 74,
|
||||
"Country": 5,
|
||||
"Address": "887-5080 Eget St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Brody Potts",
|
||||
"Age": 59,
|
||||
"Country": 2,
|
||||
"Address": "Ap #577-7690 Sem Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Dillon Ford",
|
||||
"Age": 60,
|
||||
"Country": 1,
|
||||
"Address": "Ap #885-9289 A, Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Hannah Juarez",
|
||||
"Age": 61,
|
||||
"Country": 2,
|
||||
"Address": "4744 Sapien, Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Vincent Shaffer",
|
||||
"Age": 25,
|
||||
"Country": 2,
|
||||
"Address": "9203 Nunc St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "George Holt",
|
||||
"Age": 27,
|
||||
"Country": 6,
|
||||
"Address": "4162 Cras Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Tobias Bartlett",
|
||||
"Age": 74,
|
||||
"Country": 4,
|
||||
"Address": "792-6145 Mauris St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Xavier Hooper",
|
||||
"Age": 35,
|
||||
"Country": 1,
|
||||
"Address": "879-5026 Interdum. Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Declan Dorsey",
|
||||
"Age": 31,
|
||||
"Country": 2,
|
||||
"Address": "Ap #926-4171 Aenean Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Clementine Tran",
|
||||
"Age": 43,
|
||||
"Country": 4,
|
||||
"Address": "P.O. Box 176, 9865 Eu Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Pamela Moody",
|
||||
"Age": 55,
|
||||
"Country": 6,
|
||||
"Address": "622-6233 Luctus Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Julie Leon",
|
||||
"Age": 43,
|
||||
"Country": 6,
|
||||
"Address": "Ap #915-6782 Sem Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Shana Nolan",
|
||||
"Age": 79,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 603, 899 Eu St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Vaughan Moody",
|
||||
"Age": 37,
|
||||
"Country": 5,
|
||||
"Address": "880 Erat Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Randall Reeves",
|
||||
"Age": 44,
|
||||
"Country": 3,
|
||||
"Address": "1819 Non Street",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Dominic Raymond",
|
||||
"Age": 68,
|
||||
"Country": 1,
|
||||
"Address": "Ap #689-4874 Nisi Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lev Pugh",
|
||||
"Age": 69,
|
||||
"Country": 5,
|
||||
"Address": "Ap #433-6844 Auctor Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Desiree Hughes",
|
||||
"Age": 80,
|
||||
"Country": 4,
|
||||
"Address": "605-6645 Fermentum Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Idona Oneill",
|
||||
"Age": 23,
|
||||
"Country": 7,
|
||||
"Address": "751-8148 Aliquam Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lani Mayo",
|
||||
"Age": 76,
|
||||
"Country": 1,
|
||||
"Address": "635-2704 Tristique St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Cathleen Bonner",
|
||||
"Age": 40,
|
||||
"Country": 1,
|
||||
"Address": "916-2910 Dolor Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Sydney Murray",
|
||||
"Age": 44,
|
||||
"Country": 5,
|
||||
"Address": "835-2330 Fringilla St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Brenna Rodriguez",
|
||||
"Age": 77,
|
||||
"Country": 6,
|
||||
"Address": "3687 Imperdiet Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Alfreda Mcdaniel",
|
||||
"Age": 38,
|
||||
"Country": 7,
|
||||
"Address": "745-8221 Aliquet Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Zachery Atkins",
|
||||
"Age": 30,
|
||||
"Country": 1,
|
||||
"Address": "549-2208 Auctor. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Amelia Rich",
|
||||
"Age": 56,
|
||||
"Country": 4,
|
||||
"Address": "P.O. Box 734, 4717 Nunc Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kiayada Witt",
|
||||
"Age": 62,
|
||||
"Country": 3,
|
||||
"Address": "Ap #735-3421 Malesuada Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lysandra Pierce",
|
||||
"Age": 36,
|
||||
"Country": 1,
|
||||
"Address": "Ap #146-2835 Curabitur St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Cara Rios",
|
||||
"Age": 58,
|
||||
"Country": 4,
|
||||
"Address": "Ap #562-7811 Quam. Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Austin Andrews",
|
||||
"Age": 55,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 274, 5505 Sociis Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lillian Peterson",
|
||||
"Age": 39,
|
||||
"Country": 2,
|
||||
"Address": "6212 A Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Adria Beach",
|
||||
"Age": 29,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 183, 2717 Nunc Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Oleg Durham",
|
||||
"Age": 80,
|
||||
"Country": 4,
|
||||
"Address": "931-3208 Nunc Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Casey Reese",
|
||||
"Age": 60,
|
||||
"Country": 4,
|
||||
"Address": "383-3675 Ultrices, St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kane Burnett",
|
||||
"Age": 80,
|
||||
"Country": 1,
|
||||
"Address": "759-8212 Dolor. Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Stewart Wilson",
|
||||
"Age": 46,
|
||||
"Country": 7,
|
||||
"Address": "718-7845 Sagittis. Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Charity Holcomb",
|
||||
"Age": 31,
|
||||
"Country": 6,
|
||||
"Address": "641-7892 Enim. Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kyra Cummings",
|
||||
"Age": 43,
|
||||
"Country": 4,
|
||||
"Address": "P.O. Box 702, 6621 Mus. Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Stuart Wallace",
|
||||
"Age": 25,
|
||||
"Country": 7,
|
||||
"Address": "648-4990 Sed Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Carter Clarke",
|
||||
"Age": 59,
|
||||
"Country": 6,
|
||||
"Address": "Ap #547-2921 A Street",
|
||||
"Married": false
|
||||
}
|
||||
];
|
||||
|
||||
db.users = [
|
||||
{
|
||||
"ID": "x",
|
||||
"Account": "A758A693-0302-03D1-AE53-EEFE22855556",
|
||||
"Name": "Carson Kelley",
|
||||
"RegisterDate": "2002-04-20T22:55:52-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
|
||||
"Name": "Prescott Griffin",
|
||||
"RegisterDate": "2011-02-22T05:59:55-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
|
||||
"Name": "Amir Saunders",
|
||||
"RegisterDate": "2014-08-13T09:17:49-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
|
||||
"Name": "Derek Thornton",
|
||||
"RegisterDate": "2012-02-27T01:31:07-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
|
||||
"Name": "Fletcher Romero",
|
||||
"RegisterDate": "2010-06-25T15:49:54-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
|
||||
"Name": "Thaddeus Stein",
|
||||
"RegisterDate": "2013-11-10T07:29:41-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "658DBF5A-176E-569A-9273-74FB5F69FA42",
|
||||
"Name": "Nash Knapp",
|
||||
"RegisterDate": "2005-06-24T09:11:19-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "76D2EE4B-7A73-1212-F6F2-957EF8C1F907",
|
||||
"Name": "Quamar Vega",
|
||||
"RegisterDate": "2011-04-13T20:06:29-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "00E46809-A595-CE82-C5B4-D1CAEB7E3E58",
|
||||
"Name": "Philip Galloway",
|
||||
"RegisterDate": "2008-08-21T18:59:38-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "C196781C-DDCC-AF83-DDC2-CA3E851A47A0",
|
||||
"Name": "Mason French",
|
||||
"RegisterDate": "2000-11-15T00:38:37-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "5911F201-818A-B393-5888-13157CE0D63F",
|
||||
"Name": "Ross Cortez",
|
||||
"RegisterDate": "2010-05-27T17:35:32-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "B8BB78F9-E1A1-A956-086F-E12B6FE168B6",
|
||||
"Name": "Logan King",
|
||||
"RegisterDate": "2003-07-08T16:58:06-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "06F636C3-9599-1A2D-5FD5-86B24ADDE626",
|
||||
"Name": "Cedric Leblanc",
|
||||
"RegisterDate": "2011-06-30T14:30:10-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "FE880CDD-F6E7-75CB-743C-64C6DE192412",
|
||||
"Name": "Simon Sullivan",
|
||||
"RegisterDate": "2013-06-11T16:35:07-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "BBEDD673-E2C1-4872-A5D3-C4EBD4BE0A12",
|
||||
"Name": "Jamal West",
|
||||
"RegisterDate": "2001-03-16T20:18:29-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "19BC22FA-C52E-0CC6-9552-10365C755FAC",
|
||||
"Name": "Hector Morales",
|
||||
"RegisterDate": "2012-11-01T01:56:34-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "A8292214-2C13-5989-3419-6B83DD637D6C",
|
||||
"Name": "Herrod Hart",
|
||||
"RegisterDate": "2008-03-13T19:21:04-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "0285564B-F447-0E7F-EAA1-7FB8F9C453C8",
|
||||
"Name": "Clark Maxwell",
|
||||
"RegisterDate": "2004-08-05T08:22:24-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "EA78F076-4F6E-4228-268C-1F51272498AE",
|
||||
"Name": "Reuben Walter",
|
||||
"RegisterDate": "2011-01-23T01:55:59-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "6A88C194-EA21-426F-4FE2-F2AE33F51793",
|
||||
"Name": "Ira Ingram",
|
||||
"RegisterDate": "2008-08-15T05:57:46-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "4275E873-439C-AD26-56B3-8715E336508E",
|
||||
"Name": "Damian Morrow",
|
||||
"RegisterDate": "2015-09-13T01:50:55-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "A0D733C4-9070-B8D6-4387-D44F0BA515BE",
|
||||
"Name": "Macon Farrell",
|
||||
"RegisterDate": "2011-03-14T05:41:40-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "B3683DE8-C2FA-7CA0-A8A6-8FA7E954F90A",
|
||||
"Name": "Joel Galloway",
|
||||
"RegisterDate": "2003-02-03T04:19:01-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "01D95A8E-91BC-2050-F5D0-4437AAFFD11F",
|
||||
"Name": "Rigel Horton",
|
||||
"RegisterDate": "2015-06-20T11:53:11-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "F0D12CC0-31AC-A82E-FD73-EEEFDBD21A36",
|
||||
"Name": "Sylvester Gaines",
|
||||
"RegisterDate": "2004-03-12T09:57:13-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "874FCC49-9A61-71BC-2F4E-2CE88348AD7B",
|
||||
"Name": "Abbot Mckay",
|
||||
"RegisterDate": "2008-12-26T20:42:57-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "B8DA1912-20A0-FB6E-0031-5F88FD63EF90",
|
||||
"Name": "Solomon Green",
|
||||
"RegisterDate": "2013-09-04T01:44:47-07:00"
|
||||
}
|
||||
];
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
color: #262626;
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 16px 0 8px 0;
|
||||
font-size: 18px;
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2ba6cb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #258faf;
|
||||
}
|
||||
|
||||
input, button, select {
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.navigation li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.demo-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
iframe[name='demo'] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - External Pager Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
|
||||
<style>
|
||||
.external-pager {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.external-pager .jsgrid-pager-current-page {
|
||||
background: #c4e2ff;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>External Customized Pager</h1>
|
||||
<div id="externalPager" class="external-pager"></div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
paging: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
pagerContainer: "#externalPager",
|
||||
pagerFormat: "current page: {pageIndex} {first} {prev} {pages} {next} {last} total pages: {pageCount} total items: {itemCount}",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
pageNavigatorNextText: "…",
|
||||
pageNavigatorPrevText: "…",
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
],
|
||||
data: db.clients
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Simple jQuery DataGrid - Demos</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navigation">
|
||||
<h1>jsGrid Demos</h1>
|
||||
<ul>
|
||||
<li><a href="basic.html" target="demo">Basic Scenario</a></li>
|
||||
<li><a href="static-data.html" target="demo">Static Data</a></li>
|
||||
<li><a href="odata-service.html" target="demo">OData Service</a></li>
|
||||
<li><a href="data-manipulation.html" target="demo">Data Manipulation</a></li>
|
||||
<li><a href="validation.html" target="demo">Validation</a></li>
|
||||
<li><a href="sorting.html" target="demo">Sorting</a></li>
|
||||
<li><a href="loading-by-page.html" target="demo">Loading by Page</a></li>
|
||||
<li><a href="custom-view.html" target="demo">Custom View</a></li>
|
||||
<li><a href="custom-row-renderer.html" target="demo">Custom Row Renderer</a></li>
|
||||
<li><a href="external-pager.html" target="demo">External Pager</a></li>
|
||||
<li><a href="custom-grid-field.html" target="demo">Custom Grid Field</a></li>
|
||||
<li><a href="localization.html" target="demo">Localization</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="demo-frame">
|
||||
<iframe name="demo" src="basic.html"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Loading Data by Page Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
|
||||
<style>
|
||||
.pager-panel {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e9e9e9;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Loading Data by Page</h1>
|
||||
<div class="pager-panel">
|
||||
<label>Page:
|
||||
<select id="pager">
|
||||
<option>1</option>
|
||||
<option selected>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
paging: true,
|
||||
pageLoading: true,
|
||||
pageSize: 15,
|
||||
pageIndex: 2,
|
||||
controller: {
|
||||
loadData: function(filter) {
|
||||
var startIndex = (filter.pageIndex - 1) * filter.pageSize;
|
||||
return {
|
||||
data: db.clients.slice(startIndex, startIndex + filter.pageSize),
|
||||
itemsCount: db.clients.length
|
||||
};
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
]
|
||||
});
|
||||
|
||||
$("#pager").on("change", function() {
|
||||
var page = parseInt($(this).val(), 10);
|
||||
$("#jsGrid").jsGrid("openPage", page);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Localization (FR)</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.validation.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
<script src="../src/i18n/fr.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Localization (FR)</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
jsGrid.locale("fr");
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
inserting: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", title: "Nom", type: "text", width: 150, validate: "required" },
|
||||
{ name: "Age", title: "Âge", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
|
||||
{ name: "Address", title: "Adresse", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
|
||||
{ name: "Country", title: "Pays", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", title: "Marié", type: "checkbox", sorting: false },
|
||||
{ type: "control" }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - OData Service Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.textarea.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
|
||||
<style>
|
||||
.rating {
|
||||
color: #F8CA03;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>OData Service</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "auto",
|
||||
width: "auto",
|
||||
sorting: true,
|
||||
paging: false,
|
||||
autoload: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
var d = $.Deferred();
|
||||
|
||||
$.ajax({
|
||||
url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
|
||||
dataType: "json"
|
||||
}).done(function(response) {
|
||||
d.resolve(response.value);
|
||||
});
|
||||
|
||||
return d.promise();
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 100 },
|
||||
{ name: "Description", type: "textarea", width: 200 },
|
||||
{ name: "Rating", type: "number", width: 150, align: "center",
|
||||
itemTemplate: function(value) {
|
||||
return $("<div>").addClass("rating").append(Array(value + 1).join("★"));
|
||||
}
|
||||
},
|
||||
{ name: "Price", type: "number", width: 100,
|
||||
itemTemplate: function(value) {
|
||||
return value.toFixed(2) + "$"; }
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Rows Reordering Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Rows Reordering Scenario</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
|
||||
rowClass: function(item, itemIndex) {
|
||||
return "client-" + itemIndex;
|
||||
},
|
||||
|
||||
controller: {
|
||||
loadData: function() {
|
||||
return db.clients.slice(0, 15);
|
||||
}
|
||||
},
|
||||
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false }
|
||||
],
|
||||
|
||||
onRefreshed: function() {
|
||||
var $gridData = $("#jsGrid .jsgrid-grid-body tbody");
|
||||
|
||||
$gridData.sortable({
|
||||
update: function(e, ui) {
|
||||
// array of indexes
|
||||
var clientIndexRegExp = /\s*client-(\d+)\s*/;
|
||||
var indexes = $.map($gridData.sortable("toArray", { attribute: "class" }), function(classes) {
|
||||
return clientIndexRegExp.exec(classes)[1];
|
||||
});
|
||||
alert("Reordered indexes: " + indexes.join(", "));
|
||||
|
||||
// arrays of items
|
||||
var items = $.map($gridData.find("tr"), function(row) {
|
||||
return $(row).data("JSGridItem");
|
||||
});
|
||||
console && console.log("Reordered items", items);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Sorting Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
|
||||
<style>
|
||||
.sort-panel {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e9e9e9;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sorting</h1>
|
||||
<div class="sort-panel">
|
||||
<label>Sorting Field:
|
||||
<select id="sortingField">
|
||||
<option>Name</option>
|
||||
<option>Age</option>
|
||||
<option>Address</option>
|
||||
<option>Country</option>
|
||||
<option>Married</option>
|
||||
</select>
|
||||
<button type="button" id="sort">Sort</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
selecting: false,
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
]
|
||||
});
|
||||
|
||||
$("#sort").click(function() {
|
||||
var field = $("#sortingField").val();
|
||||
$("#jsGrid").jsGrid("sort", field);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Static Data Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Static Data</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
sorting: true,
|
||||
paging: true,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
],
|
||||
data: db.clients
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Validation</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.validation.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Validation</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
inserting: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
deleteConfirm: "Do you really want to delete the client?",
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150, validate: "required" },
|
||||
{ name: "Age", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
|
||||
{ name: "Address", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name",
|
||||
validate: { message: "Country should be specified", validator: function(value) { return value > 0; } } },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{ type: "control" }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.de = {
|
||||
grid: {
|
||||
noDataContent: "Die Daten konnten nicht gefunden werden",
|
||||
deleteConfirm: "Möchten Sie die Daten unwiederruflich löschen?",
|
||||
pagerFormat: "Seiten: {first} {prev} {pages} {next} {last} {pageIndex} von {pageCount}",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
loadMessage: "Bitte warten...",
|
||||
invalidMessage: "Ihre Eingabe ist nicht zulässig!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Lädt..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Suche",
|
||||
insertModeButtonTooltip: "Eintrag hinzufügen",
|
||||
editButtonTooltip: "Bearbeiten",
|
||||
deleteButtonTooltip: "Löschen",
|
||||
searchButtonTooltip: "Eintrag finden",
|
||||
clearFilterButtonTooltip: "Filter zurücksetzen",
|
||||
insertButtonTooltip: "Hinzufügen",
|
||||
updateButtonTooltip: "Speichern",
|
||||
cancelEditButtonTooltip: "Abbrechen"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Dies ist ein Pflichtfeld" },
|
||||
rangeLength: { message: "Die Länge der Eingabe liegt außerhalb des zulässigen Bereichs" },
|
||||
minLength: { message: "Die Eingabe ist zu kurz" },
|
||||
maxLength: { message: "Die Eingabe ist zu lang" },
|
||||
pattern: { message: "Die Eingabe entspricht nicht dem gewünschten Muster" },
|
||||
range: { message: "Der eingegebene Wert liegt außerhalb des zulässigen Bereichs" },
|
||||
min: { message: "Der eingegebene Wert ist zu niedrig" },
|
||||
max: { message: "Der eingegebene Wert ist zu hoch" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.es = {
|
||||
grid: {
|
||||
noDataContent: "No encontrado",
|
||||
deleteConfirm: "¿Está seguro?",
|
||||
pagerFormat: "Paginas: {first} {prev} {pages} {next} {last} {pageIndex} de {pageCount}",
|
||||
pagePrevText: "Anterior",
|
||||
pageNextText: "Siguiente",
|
||||
pageFirstText: "Primero",
|
||||
pageLastText: "Ultimo",
|
||||
loadMessage: "Por favor, espere...",
|
||||
invalidMessage: "¡Datos no válidos!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Cargando..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Cambiar a búsqueda",
|
||||
insertModeButtonTooltip: "Cambiar a inserción",
|
||||
editButtonTooltip: "Editar",
|
||||
deleteButtonTooltip: "Suprimir",
|
||||
searchButtonTooltip: "Buscar",
|
||||
clearFilterButtonTooltip: "Borrar filtro",
|
||||
insertButtonTooltip: "Insertar",
|
||||
updateButtonTooltip: "Actualizar",
|
||||
cancelEditButtonTooltip: "Cancelar edición"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Campo requerido" },
|
||||
rangeLength: { message: "La longitud del valor está fuera del intervalo definido" },
|
||||
minLength: { message: "La longitud del valor es demasiado corta" },
|
||||
maxLength: { message: "La longitud del valor es demasiado larga" },
|
||||
pattern: { message: "El valor no se ajusta al patrón definido" },
|
||||
range: { message: "Valor fuera del rango definido" },
|
||||
min: { message: "Valor demasiado bajo" },
|
||||
max: { message: "Valor demasiado alto" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.fr = {
|
||||
grid: {
|
||||
noDataContent: "Pas de données",
|
||||
deleteConfirm: "Êtes-vous sûr ?",
|
||||
pagerFormat: "Pages: {first} {prev} {pages} {next} {last} {pageIndex} de {pageCount}",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
loadMessage: "Chargement en cours...",
|
||||
invalidMessage: "Des données incorrectes sont entrés !"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Chargement en cours..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Recherche",
|
||||
insertModeButtonTooltip: "Ajouter une entrée",
|
||||
editButtonTooltip: "Changer",
|
||||
deleteButtonTooltip: "Effacer",
|
||||
searchButtonTooltip: "Trouve",
|
||||
clearFilterButtonTooltip: "Effacer",
|
||||
insertButtonTooltip: "Ajouter",
|
||||
updateButtonTooltip: "Sauvegarder",
|
||||
cancelEditButtonTooltip: "Annuler"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Champ requis" },
|
||||
rangeLength: { message: "Longueur de la valeur du champ est hors de la plage définie" },
|
||||
minLength: { message: "La valeur du champ est trop court" },
|
||||
maxLength: { message: "La valeur du champ est trop long" },
|
||||
pattern: { message: "La valeur du champ ne correspond pas à la configuration définie" },
|
||||
range: { message: "La valeur du champ est hors de la plage définie" },
|
||||
min: { message: "La valeur du champ est trop petit" },
|
||||
max: { message: "La valeur du champ est trop grande" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.he = {
|
||||
grid: {
|
||||
noDataContent: "לא נמצא",
|
||||
deleteConfirm: "האם אתה בטוח?",
|
||||
pagerFormat: "עמודים: {first} {prev} {pages} {next} {last} {pageIndex} מתוך {pageCount}",
|
||||
pagePrevText: "הקודם",
|
||||
pageNextText: "הבא",
|
||||
pageFirstText: "ראשון",
|
||||
pageLastText: "אחרון",
|
||||
loadMessage: "אנא המתן ...",
|
||||
invalidMessage: "נתונים לא חוקיים!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "טוען..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "ביצוע חיפוש",
|
||||
insertModeButtonTooltip: "ביצוע עריכת שורה",
|
||||
editButtonTooltip: "עריכה",
|
||||
deleteButtonTooltip: "מחיקה",
|
||||
searchButtonTooltip: "חיפוש",
|
||||
clearFilterButtonTooltip: "ניקוי מסנן",
|
||||
insertButtonTooltip: "הכנסה",
|
||||
updateButtonTooltip: "עדכון",
|
||||
cancelEditButtonTooltip: "ביטול עריכה"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "שדה נדרש" },
|
||||
rangeLength: { message: "אורכו של הערך הוא מחוץ לטווח המוגדר" },
|
||||
minLength: { message: "אורכו של הערך קצר מדי" },
|
||||
maxLength: { message: "אורכו של הערך ארוך מדי" },
|
||||
pattern: { message: "אורכו של הערך ארוך מדי" },
|
||||
range: { message: "ערך מחוץ לטווח" },
|
||||
min: { message: "ערך נמוך מדי" },
|
||||
max: { message: "גבוה מדי" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.ja = {
|
||||
grid: {
|
||||
noDataContent: "データが見つかりません。",
|
||||
deleteConfirm: "削除しますよろしですか。",
|
||||
pagerFormat: "頁: {first} {prev} {pages} {next} {last} 【{pageIndex}／{pageCount}】",
|
||||
pagePrevText: "前",
|
||||
pageNextText: "次",
|
||||
pageFirstText: "最初",
|
||||
pageLastText: "最後",
|
||||
loadMessage: "しばらくお待ちください…",
|
||||
invalidMessage: "入力されたデータが不正です。"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "処理中…"
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "検索モードへ",
|
||||
insertModeButtonTooltip: "登録モードへ",
|
||||
editButtonTooltip: "編集",
|
||||
deleteButtonTooltip: "削除",
|
||||
searchButtonTooltip: "フィルター",
|
||||
clearFilterButtonTooltip: "クリア",
|
||||
insertButtonTooltip: "登録",
|
||||
updateButtonTooltip: "更新",
|
||||
cancelEditButtonTooltip: "編集戻す"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "項目が必要です。" },
|
||||
rangeLength: { message: "項目の桁数が範囲外です。" },
|
||||
minLength: { message: "項目の桁数が超過しています。" },
|
||||
maxLength: { message: "項目の桁数が不足しています。" },
|
||||
pattern: { message: "項目の値がパターンに一致しません。" },
|
||||
range: { message: "項目の値が範囲外です。" },
|
||||
min: { message: "項目の値が超過しています。" },
|
||||
max: { message: "項目の値が不足しています。" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.ka = {
|
||||
grid: {
|
||||
noDataContent: "მონაცემები ცარიელია.",
|
||||
deleteConfirm: "ნამდვილად გსურთ ჩანაწერის წაშლა?",
|
||||
pagerFormat: "გვერდები: {first} {prev} {pages} {next} {last} {pageIndex} - {pageCount} დან.",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
loadMessage: "გთხოვთ დაიცადოთ...",
|
||||
invalidMessage: "შეყვანილია არასწორი მონაცემები!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "მიმდინარეობს ჩატვირთვა..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "ძებნა",
|
||||
insertModeButtonTooltip: "ჩანაწერის დამატება",
|
||||
editButtonTooltip: "შესწორება",
|
||||
deleteButtonTooltip: "წაშლა",
|
||||
searchButtonTooltip: "ძებნა",
|
||||
clearFilterButtonTooltip: "ფილტრის გასუფთავება",
|
||||
insertButtonTooltip: "დამატება",
|
||||
updateButtonTooltip: "შენახვა",
|
||||
cancelEditButtonTooltip: "გაუქმება"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "ველი აუცილებელია შესავსებად." },
|
||||
rangeLength: { message: "შეყვანილი ჩანაწერის ზომა არ ექვემდებარება დიაპაზონს." },
|
||||
minLength: { message: "შეყვანილი ჩანაწერის ზომა საკმაოდ პატარა არის." },
|
||||
maxLength: { message: "შეყვანილი ჩანაწერის ზომა საკმაოდ დიდი არის." },
|
||||
pattern: { message: "შეყვანილი მნიშვნელობა არ ემთხვევა მითითებულ შაბლონს." },
|
||||
range: { message: "შეყვანილი ინფორმაცია არ ჯდება დიაპაზონში." },
|
||||
min: { message: "შეყვანილი ინფორმაციის ზომა საკმაოდ პატარა არის." },
|
||||
max: { message: "შეყვანილი ინფორმაციის ზომა საკმაოდ დიდი არის." }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.pl = {
|
||||
grid: {
|
||||
noDataContent: "Nie znaleziono",
|
||||
deleteConfirm: "Czy jesteś pewien?",
|
||||
pagerFormat: "Strony: {first} {prev} {pages} {next} {last} {pageIndex} z {pageCount}",
|
||||
pagePrevText: "Poprzednia",
|
||||
pageNextText: "Następna",
|
||||
pageFirstText: "Pierwsza",
|
||||
pageLastText: "Ostatnia",
|
||||
loadMessage: "Proszę czekać...",
|
||||
invalidMessage: "Wprowadzono nieprawidłowe dane!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Ładowanie..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Wyszukiwanie",
|
||||
insertModeButtonTooltip: "Dodawanie",
|
||||
editButtonTooltip: "Edytuj",
|
||||
deleteButtonTooltip: "Usuń",
|
||||
searchButtonTooltip: "Szukaj",
|
||||
clearFilterButtonTooltip: "Wyczyść filtr",
|
||||
insertButtonTooltip: "Dodaj",
|
||||
updateButtonTooltip: "Aktualizuj",
|
||||
cancelEditButtonTooltip: "Anuluj edytowanie"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: {
|
||||
message: "Pole jest wymagane"
|
||||
},
|
||||
rangeLength: {
|
||||
message: "Długość wartości pola znajduje się poza zdefiniowanym zakresem"
|
||||
},
|
||||
minLength: {
|
||||
message: "Wartość pola jest zbyt krótka"
|
||||
},
|
||||
maxLength: {
|
||||
message: "Wartość pola jest zbyt długa"
|
||||
},
|
||||
pattern: {
|
||||
message: "Wartość pola nie zgadza się ze zdefiniowanym wzorem"
|
||||
},
|
||||
range: {
|
||||
message: "Wartość pola znajduje się poza zdefiniowanym zakresem"
|
||||
},
|
||||
min: {
|
||||
message: "Wartość pola jest zbyt mała"
|
||||
},
|
||||
max: {
|
||||
message: "Wartość pola jest zbyt duża"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales["pt-br"] = {
|
||||
grid: {
|
||||
noDataContent: "Não encontrado",
|
||||
deleteConfirm: "Você tem certeza que deseja remover este item?",
|
||||
pagerFormat: "Páginas: {first} {prev} {pages} {next} {last} {pageIndex} de {pageCount}",
|
||||
pagePrevText: "Anterior",
|
||||
pageNextText: "Seguinte",
|
||||
pageFirstText: "Primeira",
|
||||
pageLastText: "Última",
|
||||
loadMessage: "Por favor, espere...",
|
||||
invalidMessage: "Dados inválidos!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Carregando..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Mudar para busca",
|
||||
insertModeButtonTooltip: "Mudar para inserção",
|
||||
editButtonTooltip: "Editar",
|
||||
deleteButtonTooltip: "Remover",
|
||||
searchButtonTooltip: "Buscar",
|
||||
clearFilterButtonTooltip: "Remover filtro",
|
||||
insertButtonTooltip: "Adicionar",
|
||||
updateButtonTooltip: "Atualizar",
|
||||
cancelEditButtonTooltip: "Cancelar Edição"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Campo obrigatório" },
|
||||
rangeLength: { message: "O valor esta fora do intervaldo definido" },
|
||||
minLength: { message: "O comprimento do valor é muito curto" },
|
||||
maxLength: { message: "O comprimento valor é muito longo" },
|
||||
pattern: { message: "O valor informado não é compatível com o padrão" },
|
||||
range: { message: "O valor informado esta fora do limite definido" },
|
||||
min: { message: "O valor é muito curto" },
|
||||
max: { message: "O valor é muito longo" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.pt = {
|
||||
grid: {
|
||||
noDataContent: "Não encontrado",
|
||||
deleteConfirm: "Você tem certeza que deseja remover este item?",
|
||||
pagerFormat: "Páginas: {first} {prev} {pages} {next} {last} {pageIndex} de {pageCount}",
|
||||
pagePrevText: "Anterior",
|
||||
pageNextText: "Seguinte",
|
||||
pageFirstText: "Primeira",
|
||||
pageLastText: "Última",
|
||||
loadMessage: "Por favor, espere...",
|
||||
invalidMessage: "Dados inválidos!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Carregando..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Mudar para busca",
|
||||
insertModeButtonTooltip: "Mudar para inserção",
|
||||
editButtonTooltip: "Editar",
|
||||
deleteButtonTooltip: "Remover",
|
||||
searchButtonTooltip: "Buscar",
|
||||
clearFilterButtonTooltip: "Remover filtro",
|
||||
insertButtonTooltip: "Adicionar",
|
||||
updateButtonTooltip: "Atualizar",
|
||||
cancelEditButtonTooltip: "Cancelar Edição"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Campo obrigatório" },
|
||||
rangeLength: { message: "O valor esta fora do intervaldo definido" },
|
||||
minLength: { message: "O comprimento do valor é muito curto" },
|
||||
maxLength: { message: "O comprimento valor é muito longo" },
|
||||
pattern: { message: "O valor informado não é compatível com o padrão" },
|
||||
range: { message: "O valor informado esta fora do limite definido" },
|
||||
min: { message: "O valor é muito curto" },
|
||||
max: { message: "O valor é muito longo" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.ru = {
|
||||
grid: {
|
||||
noDataContent: "Данных не найдено",
|
||||
deleteConfirm: "Вы действительно хотите удалить запись?",
|
||||
pagerFormat: "Страницы: {first} {prev} {pages} {next} {last} {pageIndex} из {pageCount}",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
loadMessage: "Пожалуйста, подождите...",
|
||||
invalidMessage: "Введены неверные данные!"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Загрузка..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Поиск",
|
||||
insertModeButtonTooltip: "Добавить запись",
|
||||
editButtonTooltip: "Изменить",
|
||||
deleteButtonTooltip: "Удалить",
|
||||
searchButtonTooltip: "Найти",
|
||||
clearFilterButtonTooltip: "Очистить фильтр",
|
||||
insertButtonTooltip: "Добавить",
|
||||
updateButtonTooltip: "Сохранить",
|
||||
cancelEditButtonTooltip: "Отменить"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Поле обязательно для заполения" },
|
||||
rangeLength: { message: "Длинна введенного значения вне допустимого диапазона" },
|
||||
minLength: { message: "Введенное значение слишком короткое" },
|
||||
maxLength: { message: "Введенное значение слишком длинное" },
|
||||
pattern: { message: "Введенное значение не соответствует заданному шаблону" },
|
||||
range: { message: "Введенное значение вне допустимого диапазона" },
|
||||
min: { message: "Введенное значение слишком маленькое" },
|
||||
max: { message: "Введенное значение слишком большое" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales.tr = {
|
||||
grid: {
|
||||
noDataContent: "Kayıt Bulunamadı",
|
||||
deleteConfirm: "Emin misiniz ?",
|
||||
pagerFormat: "Sayfalar: {first} {prev} {pages} {next} {last} {pageIndex} / {pageCount}",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
loadMessage: "Lütfen bekleyiniz...",
|
||||
invalidMessage: "Geçersiz veri girişi !"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "Yükleniyor..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "Arama moduna geç",
|
||||
insertModeButtonTooltip: "Yeni kayıt moduna geç",
|
||||
editButtonTooltip: "Değiştir",
|
||||
deleteButtonTooltip: "Sil",
|
||||
searchButtonTooltip: "Bul",
|
||||
clearFilterButtonTooltip: "Filtreyi temizle",
|
||||
insertButtonTooltip: "Ekle",
|
||||
updateButtonTooltip: "Güncelle",
|
||||
cancelEditButtonTooltip: "Güncelleme iptali"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "Gerekli alandır" },
|
||||
rangeLength: { message: "Alan değerinin uzunluğu tanımlanan aralık dışındadır" },
|
||||
minLength: { message: "Alan değeri çok kısadır" },
|
||||
maxLength: { message: "Alan değeri çok uzundur" },
|
||||
pattern: { message: "Alan değeri tanımlanan şablon ile eşleşmiyor" },
|
||||
range: { message: "Alan değeri tanımlı aralığın dışındadır" },
|
||||
min: { message: "Alan değeri çok küçüktür" },
|
||||
max: { message: "Alan değeri çok büyüktür" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales["zh-cn"] = {
|
||||
grid: {
|
||||
noDataContent: "暂无数据",
|
||||
deleteConfirm: "确认删除？",
|
||||
pagerFormat: "页码: {first} {prev} {pages} {next} {last} {pageIndex} / {pageCount}",
|
||||
pagePrevText: "上一页",
|
||||
pageNextText: "下一页",
|
||||
pageFirstText: "第一页",
|
||||
pageLastText: "最后页",
|
||||
loadMessage: "请稍后...",
|
||||
invalidMessage: "数据有误！"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "载入中..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "切换为搜索",
|
||||
insertModeButtonTooltip: "切换为新增",
|
||||
editButtonTooltip: "编辑",
|
||||
deleteButtonTooltip: "删除",
|
||||
searchButtonTooltip: "搜索",
|
||||
clearFilterButtonTooltip: "清空过滤",
|
||||
insertButtonTooltip: "插入",
|
||||
updateButtonTooltip: "更新",
|
||||
cancelEditButtonTooltip: "取消编辑"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "字段必填" },
|
||||
rangeLength: { message: "字段值长度超过定义范围" },
|
||||
minLength: { message: "字段长度过短" },
|
||||
maxLength: { message: "字段长度过长" },
|
||||
pattern: { message: "字段值不符合定义规则" },
|
||||
range: { message: "字段值超过定义范围" },
|
||||
min: { message: "字段值太小" },
|
||||
max: { message: "字段值太大" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(jsGrid) {
|
||||
|
||||
jsGrid.locales["zh-tw"] = {
|
||||
grid: {
|
||||
noDataContent: "暫無資料",
|
||||
deleteConfirm: "確認刪除？",
|
||||
pagerFormat: "頁碼: {first} {prev} {pages} {next} {last} {pageIndex} / {pageCount}",
|
||||
pagePrevText: "上一頁",
|
||||
pageNextText: "下一頁",
|
||||
pageFirstText: "第一頁",
|
||||
pageLastText: "最後一頁",
|
||||
loadMessage: "請稍候...",
|
||||
invalidMessage: "輸入資料不正確"
|
||||
},
|
||||
|
||||
loadIndicator: {
|
||||
message: "載入中..."
|
||||
},
|
||||
|
||||
fields: {
|
||||
control: {
|
||||
searchModeButtonTooltip: "切換為搜尋",
|
||||
insertModeButtonTooltip: "切換為新增",
|
||||
editButtonTooltip: "編輯",
|
||||
deleteButtonTooltip: "刪除",
|
||||
searchButtonTooltip: "搜尋",
|
||||
clearFilterButtonTooltip: "清除搜尋條件",
|
||||
insertButtonTooltip: "新增",
|
||||
updateButtonTooltip: "修改",
|
||||
cancelEditButtonTooltip: "取消編輯"
|
||||
}
|
||||
},
|
||||
|
||||
validators: {
|
||||
required: { message: "欄位必填" },
|
||||
rangeLength: { message: "欄位字串長度超出範圍" },
|
||||
minLength: { message: "欄位字串長度太短" },
|
||||
maxLength: { message: "欄位字串長度太長" },
|
||||
pattern: { message: "欄位字串不符合規則" },
|
||||
range: { message: "欄位數值超出範圍" },
|
||||
min: { message: "欄位數值太小" },
|
||||
max: { message: "欄位數值太大" }
|
||||
}
|
||||
};
|
||||
|
||||
}(jsGrid, jQuery));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
* jsGrid v1.5.3 (http://js-grid.com)
|
||||
* (c) 2016 Artem Tabalin
|
||||
* Licensed under MIT (https://github.com/tabalinas/jsgrid/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
.jsgrid {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.jsgrid, .jsgrid *, .jsgrid *:before, .jsgrid *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jsgrid input,
|
||||
.jsgrid textarea,
|
||||
.jsgrid select {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.jsgrid-grid-header {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.jsgrid-grid-body {
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.jsgrid-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.jsgrid-cell {
|
||||
padding: 0.5em 0.5em;
|
||||
}
|
||||
|
||||
.jsgrid-сell,
|
||||
.jsgrid-header-cell {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jsgrid-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jsgrid-align-center,
|
||||
.jsgrid-align-center input,
|
||||
.jsgrid-align-center textarea,
|
||||
.jsgrid-align-center select {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jsgrid-align-right,
|
||||
.jsgrid-align-right input,
|
||||
.jsgrid-align-right textarea,
|
||||
.jsgrid-align-right select {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.jsgrid-header-cell {
|
||||
padding: .5em .5em;
|
||||
}
|
||||
|
||||
.jsgrid-filter-row input,
|
||||
.jsgrid-filter-row textarea,
|
||||
.jsgrid-filter-row select,
|
||||
.jsgrid-edit-row input,
|
||||
.jsgrid-edit-row textarea,
|
||||
.jsgrid-edit-row select,
|
||||
.jsgrid-insert-row input,
|
||||
.jsgrid-insert-row textarea,
|
||||
.jsgrid-insert-row select {
|
||||
width: 100%;
|
||||
padding: .3em .5em;
|
||||
}
|
||||
|
||||
.jsgrid-filter-row input[type='checkbox'],
|
||||
.jsgrid-edit-row input[type='checkbox'],
|
||||
.jsgrid-insert-row input[type='checkbox'] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.jsgrid-selected-row .jsgrid-cell {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jsgrid-nodata-row .jsgrid-cell {
|
||||
padding: .5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jsgrid-header-sort {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jsgrid-pager {
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
.jsgrid-pager-nav-button {
|
||||
padding: .2em .6em;
|
||||
}
|
||||
|
||||
.jsgrid-pager-nav-inactive-button {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jsgrid-pager-page {
|
||||
padding: .2em .6em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,7 @@
|
|||
/*
|
||||
* jsGrid v1.5.3 (http://js-grid.com)
|
||||
* (c) 2016 Artem Tabalin
|
||||
* Licensed under MIT (https://github.com/tabalinas/jsgrid/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
.jsgrid{position:relative;overflow:hidden;font-size:1em}.jsgrid,.jsgrid *,.jsgrid :after,.jsgrid :before{box-sizing:border-box}.jsgrid input,.jsgrid select,.jsgrid textarea{font-size:1em}.jsgrid-grid-header{overflow-x:hidden;overflow-y:scroll;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.jsgrid-grid-body{overflow-x:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch}.jsgrid-table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0}.jsgrid-cell{padding:.5em}.jsgrid-header-cell,.jsgrid-сell{box-sizing:border-box}.jsgrid-align-left{text-align:left}.jsgrid-align-center,.jsgrid-align-center input,.jsgrid-align-center select,.jsgrid-align-center textarea{text-align:center}.jsgrid-align-right,.jsgrid-align-right input,.jsgrid-align-right select,.jsgrid-align-right textarea{text-align:right}.jsgrid-header-cell{padding:.5em}.jsgrid-edit-row input,.jsgrid-edit-row select,.jsgrid-edit-row textarea,.jsgrid-filter-row input,.jsgrid-filter-row select,.jsgrid-filter-row textarea,.jsgrid-insert-row input,.jsgrid-insert-row select,.jsgrid-insert-row textarea{width:100%;padding:.3em .5em}.jsgrid-edit-row input[type=checkbox],.jsgrid-filter-row input[type=checkbox],.jsgrid-insert-row input[type=checkbox]{width:auto}.jsgrid-selected-row .jsgrid-cell{cursor:pointer}.jsgrid-nodata-row .jsgrid-cell{padding:.5em 0;text-align:center}.jsgrid-header-sort{cursor:pointer}.jsgrid-pager{padding:.5em 0}.jsgrid-pager-nav-button{padding:.2em .6em}.jsgrid-pager-nav-inactive-button{display:none;pointer-events:none}.jsgrid-pager-page{padding:.2em .6em}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue