UNPKG

4.98 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Editable Grid Demo</title>
5 <!-- @import partials/style.html -->
6</head>
7<body>
8<h1>{NAME} v{VERSION}</h1>
9<h2>Editable grid demo</h2>
10
11<p>
12 To make the grid cells editable, you need to import the
13 {EZEDITTABLE_LINK} plugin, enable the <code>editable</code> property
14 and configure the <code>advancedGrid</code> with the {EZEDITTABLE_LINK}
15 options.
16</p>
17
18<p>
19 Instructions: Double-click on a row on or press <code>enter</code> key to
20 perform action.
21 <br><br>
22 NOTE: Data changes are not persisted in this demo.
23</p>
24<!-- @import partials/pre.html -->
25
26<div class="ezCommandEditor">
27 <button onclick="
28 var advancedGrid = tf.extension('advancedGrid');
29 var ezEditTable = advancedGrid._ezEditTable;
30 ezEditTable.Editable.Edit();">
31 <img src="http://edittable.free.fr/ezEditTable/themes/icn_edit.gif" alt="Edit record">
32 </button>
33 <button onclick="
34 var advancedGrid = tf.extension('advancedGrid');
35 var ezEditTable = advancedGrid._ezEditTable;
36 ezEditTable.Editable.AddNewRow();">
37 <img src="http://edittable.free.fr/ezEditTable/themes/icn_add.gif" alt="Add record">
38 </button>
39 <button onclick="
40 var advancedGrid = tf.extension('advancedGrid');
41 var ezEditTable = advancedGrid._ezEditTable;
42 ezEditTable.Editable.SubmitDeletedRows();">
43 <img src="http://edittable.free.fr/ezEditTable/themes/icn_del.gif" alt="Delete record">
44 </button>
45</div>
46<!-- @import partials/countries-table.html -->
47
48<!-- @import partials/tablefilter-script.html -->
49<script data-config>
50 var filtersConfig = {
51 base_path: '../dist/tablefilter/',
52 grid_layout: true,
53 grid_width: '900px',
54 alternate_rows: true,
55 btn_reset: true,
56 rows_counter: true,
57 loader: true,
58 status_bar: true,
59 col_1: 'select',
60 col_2: 'select',
61 col_widths: [
62 '150px', '90px', '70px',
63 '120px', '120px', '100px',
64 '100px', '100px', '100px'
65 ],
66 extensions:[
67 {
68 name: 'advancedGrid',
69 // For the purpose of this demo, ezEditTable dependency
70 // is loaded from its own website which is not a CDN.
71 // This dependency also requires a licence therefore
72 // DO NOT import it in this way in your projects.
73 filename: 'ezEditTable_min.js',
74 vendor_path: 'http://edittable.free.fr/ezEditTable/',
75 // Once ezEditTable dependency is installed in your
76 // project import it by pointing to a local path:
77 // vendor_path: 'path/to/ezEditTable'
78 editable: true,
79 selection: true,
80 default_selection: 'both',
81
82 editor_model: 'cell',
83 cell_editors: [
84 { type: 'textarea', attributes:[['title', 'Country name']]},
85 { type: 'input', attributes:[['title', 'ISO code']]},
86 { type: 'select', attributes:[['title', 'Year']]},
87 { type: 'input' },
88 { type: 'input' },
89 { type: 'input' },
90 { type: 'input' },
91 { type: 'input' },
92 { type: 'input' }
93 ],
94
95 actions:{
96 'update': {
97 uri: null,
98 submit_method: 'form',
99 form_method: 'POST'
100 },
101 'insert': {
102 uri: null,
103 submit_method: 'form',
104 form_method: 'POST',
105 default_record: [
106 'Country name',
107 'ISO code',
108 'Year',
109 'Population',
110 'XRAT',
111 'PPP',
112 'cgdp',
113 'cc',
114 'ci'
115 ]
116 },
117 'delete': {
118 uri: null,
119 submit_method: 'script',
120 bulk_delete: false
121 }
122 }
123 }, {
124 name: 'sort',
125 types: [
126 'string', 'string', 'number',
127 'number', 'number', 'number',
128 'number', 'number', 'number'
129 ]
130 }
131 ]
132 };
133
134 var tf = new TableFilter('demo', filtersConfig);
135 tf.init();
136</script>
137<!-- @import partials/pre-inline-script.html -->
138</body>
139</html>