1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - Editable Grid Demo</title>
|
5 |
|
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 |
|
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 |
|
47 |
|
48 |
|
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 |
|
71 |
|
72 |
|
73 |
|
74 | filename: 'ezEditTable_min.js',
|
75 | vendor_path: 'http://edittable.free.fr/ezEditTable/',
|
76 |
|
77 |
|
78 |
|
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 |
|
139 | </body>
|
140 | </html>
|