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: {
53 width: '900px'
54 },
55 alternate_rows: true,
56 btn_reset: true,
57 rows_counter: true,
58 loader: true,
59 status_bar: true,
60 col_1: 'select',
61 col_2: 'select',
62 col_widths: [
63 '150px', '90px', '70px',
64 '120px', '120px', '100px',
65 '100px', '100px', '100px'
66 ],
67 extensions:[
68 {
69 name: 'advancedGrid',
70 // For the purpose of this demo, ezEditTable dependency
71 // is loaded from its own website which is not a CDN.
72 // This dependency also requires a licence therefore
73 // DO NOT import it in this way in your projects.
74 filename: 'ezEditTable_min.js',
75 vendor_path: 'http://edittable.free.fr/ezEditTable/',
76 // Once ezEditTable dependency is installed in your
77 // project import it by pointing to a local path:
78 // vendor_path: 'path/to/ezEditTable'
79 editable: true,
80 selection: true,
81 default_selection: 'both',
82
83 editor_model: 'cell',
84 cell_editors: [
85 { type: 'textarea', attributes:[['title', 'Country name']]},
86 { type: 'input', attributes:[['title', 'ISO code']]},
87 { type: 'select', attributes:[['title', 'Year']]},
88 { type: 'input' },
89 { type: 'input' },
90 { type: 'input' },
91 { type: 'input' },
92 { type: 'input' },
93 { type: 'input' }
94 ],
95
96 actions:{
97 'update': {
98 uri: null,
99 submit_method: 'form',
100 form_method: 'POST'
101 },
102 'insert': {
103 uri: null,
104 submit_method: 'form',
105 form_method: 'POST',
106 default_record: [
107 'Country name',
108 'ISO code',
109 'Year',
110 'Population',
111 'XRAT',
112 'PPP',
113 'cgdp',
114 'cc',
115 'ci'
116 ]
117 },
118 'delete': {
119 uri: null,
120 submit_method: 'script',
121 bulk_delete: false
122 }
123 }
124 }, {
125 name: 'sort',
126 types: [
127 'string', 'string', 'number',
128 'number', 'number', 'number',
129 'number', 'number', 'number'
130 ]
131 }
132 ]
133 };
134
135 var tf = new TableFilter('demo', filtersConfig);
136 tf.init();
137</script>
138<!-- @import partials/pre-inline-script.html -->
139</body>
140</html>