├── README.md
├── example.png
├── example
├── advanced.html
├── advanced.js
├── basic.html
└── basic.js
└── js
└── dataTables.cellEdit.js
/README.md:
--------------------------------------------------------------------------------
1 | # CellEdit
2 | ##### A plugin for [DataTables.net](https://datatables.net)
3 | ## Overview
4 | This plugin allows cells within a [DataTable](https://datatables.net/) to be editable. When a cell is click on, an input field will appear. When focus is lost on the input and the underlying DataTable object will be updated and the table will be redrawn. The new value is passed to a callback function, along with it's row, allowing for easy server-side data updates.
5 |
6 | 
7 |
8 | ## Usage
9 | ### MakeCellsEditable(settings);
10 | ##### Settings { JSON Object }
11 | Property | Type | Default | Example | Details
12 | :------ | :------ | :------ | :-----| :------
13 | **onUpdate** | function | | ```function(cell, row, oldValue){ } ``` | The call back function to be executed. The updated **[cell](https://datatables.net/reference/api/cell())**, **[row](https://datatables.net/reference/api/row())**, and previous value in that cell are passed as arguments.
14 | **onValidate** _(optional)_ | function | none | ```function(cell, row, newValue){ } ``` | The call back function to be executed before updating the cell value. The relevant **[cell](https://datatables.net/reference/api/cell())**, **[row](https://datatables.net/reference/api/row())**, and new value in the editor are passed as arguments. The function should return `true` if the value is valid, or `false` if it does not pass validation logic.
15 | **inputCss** _(optional)_| string | none |```'my-css-class'```| A CSS class that will be applied to the input field
16 | **wrapperHtml** _(optional)_| string | none |```
{content}
```| HTML used to wrap the inline editor. Use `{content}` as the placeholder for the inline editor.
17 | **columns** _(optional)_| array | All columns |```[0,1,3,4]```| An array of column indexes defining the columns that you want to be editable.
18 | **allowNulls** _(optional)_| object | false | ```{ "columns": [4], "errorClass":"my-error"}``` | Determines which columns should allow null values to be entered and what CSS to apply if user input fails validation. If **errorClass** is null a default error class will be applied.
19 | **confirmationButton** _(optional)_| bool | object | false | ```{"confirmCss":"button"}``` | Will cause two links to appear after the input; _"Confirm"_ and _"Cancel"_. User input will not be accepted until _"Confirm"_ is clicked by the user. You can optionally pass in an object with **confirmCss** and **cancelCss** properties instead of boolean. These properties specify the CSS classes that should be applied to the _Confirm_ and _Cancel_ anchor tags. If you would like _Enter_ and _Escape_ keys to Confirm/Cancel also, add another property **listenToKeys** and set it to true.
20 | **inputTypes** _(optional)_ | object array | text | "inputTypes": [{"column":0, "type":"text", "options":null }] | Allows you to change the type of input that appears (IE dropdown or text). As different types of inputs are added I will update the advanced initialization example below with examples.
21 |
22 | ### Basic Initialization
23 | ```javascript
24 | var table = $('#myTable').DataTable();
25 |
26 | function myCallbackFunction (updatedCell, updatedRow, oldValue) {
27 | console.log("The new value for the cell is: " + updatedCell.data());
28 | console.log("The values for each cell in that row are: " + updatedRow.data());
29 | }
30 |
31 | table.MakeCellsEditable({
32 | "onUpdate": myCallbackFunction
33 | });
34 | ```
35 | ### Advanced Initialization
36 | ```javascript
37 | var table = $('#myAdvancedTable').DataTable();
38 |
39 | function myCallbackFunction(updatedCell, updatedRow, oldValue) {
40 | console.log("The new value for the cell is: " + updatedCell.data());
41 | console.log("The values for each cell in that row are: " + updatedRow.data());
42 | }
43 |
44 | table.MakeCellsEditable({
45 | "onUpdate": myCallbackFunction,
46 | "inputCss":'my-input-class',
47 | "columns": [0,1,2],
48 | "allowNulls": {
49 | "columns": [1],
50 | "errorClass": 'error'
51 | },
52 | "confirmationButton": {
53 | "confirmCss": 'my-confirm-class',
54 | "cancelCss": 'my-cancel-class'
55 | },
56 | "inputTypes": [
57 | {
58 | "column":0,
59 | "type":"text",
60 | "options":null
61 | },
62 | {
63 | "column":1,
64 | "type": "list",
65 | "options":[
66 | { "value": "1", "display": "Beaty" },
67 | { "value": "2", "display": "Doe" },
68 | { "value": "3", "display": "Dirt" }
69 | ]
70 | }
71 | ,{
72 | "column": 2,
73 | "type": "datepicker", // requires jQuery UI: http://http://jqueryui.com/download/
74 | "options": {
75 | "icon": "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" // Optional
76 | }
77 | }
78 | ]
79 | });
80 | ```
81 | ##### Destroy
82 | If you need to **[destroy](https://datatables.net/reference/api/destroy())** a table and then reinitialize it, you'll need to destroy the MakeCellsEditable configuration as well. You can do this by passing "destroy" to the method. An example of this can be found in the advanced example.
83 | ```javascript
84 | table.MakeCellsEditable("destroy");
85 | ```
86 |
--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ejbeaty/CellEdit/2bfc35f601dab6a7c572f64007dade2ddc8c1059/example.png
--------------------------------------------------------------------------------
/example/advanced.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
47 |
48 |
49 |