This time I will share jQuery Plugin and tutorial about jQuery Plugin For In-place Editing Of Table Cells – SimpleTableCellEditor, hope it will help you in programming stack.
| File Size: | 21.2 KB |
|---|---|
| Views Total: | 16273 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A simple, dynamic in-place table editor with jQuery that allows for table cells to be editable by clicking on them.
How to use it:
1. Include the minified version of the SimpleTableCellEditor plugin after loading jQuery library.
1 |
<script src="/path/to/jquery.slim.min.js"></script> |
2 |
<script src="SimpleTableCellEditor.js"></script> |
2. Initialize the table editor on your HTML table.
01 |
<table id="myTable"> |
02 |
<tr> |
03 |
<th>Company</th> |
04 |
<th>Contact</th> |
05 |
<th>Country</th> |
06 |
</tr> |
07 |
<tr> |
08 |
<td class="editMe">Alfreds Futterkiste</td> |
09 |
<td class="editMe">Maria Anders</td> |
10 |
<td class="editMe">Germany</td> |
11 |
</tr> |
12 |
</table> |
1 |
const editor = new SimpleTableCellEditor("myTable"); |
3. Specify the table cells to be editable.
01 |
editor.SetEditableClass("editMe",{ |
02 |
03 |
// method used to vali<a href="https://www.jqueryscript.net/time-clock/">date</a> new value |
04 |
validation : null, |
05 |
06 |
// method used to format new value |
07 |
formatter : null, |
08 |
09 |
// key codes |
10 |
keys : { |
11 |
validation: [13], |
12 |
cancellation: [27] |
13 |
} |
14 |
|
15 |
}); |
16 |
17 |
// or |
18 |
editor.SetEditable("td",{ |
19 |
20 |
// method used to validate new value |
21 |
validation : null, |
22 |
23 |
// method used to format new value |
24 |
formatter : null, |
25 |
26 |
// key codes |
27 |
keys : { |
28 |
validation: [13], |
29 |
cancellation: [27] |
30 |
} |
31 |
|
32 |
}); |
4. Available event handlers which will be triggered when the table cells are mofified.
01 |
editor.on("cell:edited", function (element, oldValue, newValue) { |
02 |
// after editer |
03 |
}); |
04 |
05 |
editor.on("cell:onEditEnter", function (element, oldValue) { |
06 |
// on edit mode |
07 |
}); |
08 |
09 |
editor.on("cell:onEditExit", function (element, oldValue) { |
10 |
// on edit mode |
11 |
}); |
12 |
13 |
editor.on("cell:onEditEntered", function (element) { |
14 |
// exit edit mode |
15 |
}); |
16 |
17 |
editor.on("cell:onEditExited", function (element, oldValue, newValue, isApplied) { |
18 |
// exit edit mode |
19 |
}); |
5. API methods.
01 |
/* tableCellEditorParams: |
02 |
inEditClass : class used to flag td in edit mode |
03 |
cellEditorParams |
04 |
validation : method used to validate new value |
05 |
formatter : method to format new value |
06 |
keys : keys handling validation and cancellation. Default value : { validation : [13], cancellation : [37] } |
07 |
*/ |
08 |
editor.constructor(tableId, tableCellEditorParams) |
09 |
editor.SetEditable(element, cellEditorParams) |
10 |
editor.SetEditableClass(className, cellEditorParams) |
11 |
editor.Toggle(toggled) |
6. Advanced usages (options).
01 |
// cellParams.behaviour |
02 |
behaviour: { |
03 |
04 |
// save the value when click outside the table |
05 |
outsideTableClickCauseCancellation: false, |
06 |
07 |
// save the value when click another cell |
08 |
anotherCellClickCauseCancellation: false |
09 |
10 |
} |
Changelog:
2020-02-16
- Added navigation toggle
2020-01-14
- Added toggling
2019-11-19
- Fixed bd ‘this’ usage
2019-06-18
- No formatting if value didn’t changed
2019-02-12
- Added behaviour parameters
2019-02-11
- Added more events
This awesome jQuery plugin is developed by unwild. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
