1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - Selection Grid Demo</title>
|
5 |
|
6 | </head>
|
7 | <body>
|
8 | <h1>{NAME} v{VERSION}</h1>
|
9 | <h2>Selection grid demo</h2>
|
10 |
|
11 | <p>
|
12 | To make the grid rows selectable, you need to import the
|
13 | {EZEDITTABLE_LINK} plugin, enable the <code>selection</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. Enable multiple rows selection by checking the <b>Multiple
|
21 | selection</b> checkbox. Keep <code>Ctrl/Cmd</code> or <code>Shift</code> key
|
22 | pressed to select multiple rows.
|
23 | </p>
|
24 |
|
25 |
|
26 | <div class="ezCommandEditor">
|
27 | <input onclick="var ezEditTable = tf.extension('advancedGrid')._ezEditTable;
|
28 | if(this.checked){
|
29 | ezEditTable.selectionModel = 'multiple';
|
30 | } else {
|
31 | ezEditTable.selectionModel = 'single';
|
32 | }" name="chkMultipleSlc" id="chkMultipleSlc" type="checkbox">
|
33 | <label for="chkMultipleSlc">Multiple selection</label>
|
34 | </div>
|
35 |
|
36 | <div class="ezCommandEditor">
|
37 | <button onclick="alert( tf.extension('advancedGrid')._ezEditTable.Selection.GetActiveRowValues() );">Active row data</button>
|
38 | <button onclick="alert( tf.extension('advancedGrid')._ezEditTable.Selection.GetSelectedValues() );">Selected rows data</button>
|
39 | <button onclick="tf.extension('advancedGrid')._ezEditTable.Selection.ClearSelections();">Clear Selection</button>
|
40 | </div>
|
41 |
|
42 |
|
43 | <script data-config>
|
44 | var filtersConfig = {
|
45 | base_path: '../dist/tablefilter/',
|
46 | grid_layout: true,
|
47 | alternate_rows: true,
|
48 | btn_reset: true,
|
49 | rows_counter: true,
|
50 | loader: true,
|
51 | status_bar: true,
|
52 | col_1: 'select',
|
53 | col_2: 'select',
|
54 | col_widths: [
|
55 | "150px", "70px", "70px",
|
56 | "120px", "120px", "100px",
|
57 | "100px", "100px", "100px"
|
58 | ],
|
59 | extensions:[
|
60 | {
|
61 | name: 'advancedGrid',
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | filename: 'ezEditTable_min.js',
|
67 | vendor_path: 'http://edittable.free.fr/ezEditTable/',
|
68 |
|
69 |
|
70 |
|
71 | selection: true,
|
72 | default_selection: 'both',
|
73 | on_validate_row: function(o, row){
|
74 | var country = o.Selection.GetActiveRowValues()[0];
|
75 | alert('Chosen record: ' + country);
|
76 | }
|
77 | }, {
|
78 | name: 'sort',
|
79 | types: [
|
80 | 'string', 'string', 'number',
|
81 | 'number', 'number', 'number',
|
82 | 'number', 'number', 'number'
|
83 | ]
|
84 | }
|
85 | ]
|
86 | };
|
87 |
|
88 | var tf = new TableFilter('demo', filtersConfig);
|
89 | tf.init();
|
90 | </script>
|
91 |
|
92 | </body>
|
93 | </html>
|