Skip to content

Added partial data rows, partial column names and type + data_changed event #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oscarlocatelli wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added partial data rows, partial column names and type + data_changed event #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e696b2b
shadow7853 feature: partial data rows, column names and column types
Sep 4, 2017
c98c59e
clean old code
Sep 4, 2017
bd95b28
added fixed_rows and fixed_cols options
Sep 4, 2017
1a6a01b
added data_changed event
Sep 5, 2017
b23e40a
fix doc
Sep 5, 2017
c92f000
trigger data_changed event on addrow and delrow
Sep 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions demo/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,9 @@
$(this).datepicker();
});

// Example 4
// Example 4 EDITED by shadow7853
// shadow7853: I've modified the code to enable headerCols, row_templates to be also partials (define templates for first cells, others will be 'text') and to not disable column adding.
// shadow7853: Also data rows could be partials, not all with the same length.
// Custom fields & validation
var mynewtable = $('#examplex').editTable({
field_templates: {
Expand Down Expand Up @@ -148,7 +150,8 @@
first_row: false,
data: [
[false,"01/30/2013","50,00 €","Lorem ipsum...\n\nDonec in dui nisl. Nam ac libero eget magna iaculis faucibus eu non arcu. Proin sed diam ut nisl scelerisque fermentum."],
[true,"02/28/2013","50,00 €",'This is a <textarea>','All']
[true,"02/28/2013","50,00 €",'This is a <textarea>','All', 'extra-dynamic-cell'],
[true,"partial row"]
],
validate_field: function (col_id, value, col_type, $element) {
if ( col_type === 'checkbox' ) {
Expand All @@ -159,6 +162,9 @@
}
}
return true;
},
data_changed: function (col_id, action, value, $element) {
$('#examplexlog').append('<div>col_id: ' + col_id + ', action: ' + action + ', value: ' + $('<div/>').text(value).html() + ', $element: ' + $element + '</div>');
},
tableClass: 'inputtable custom'
});
Expand Down Expand Up @@ -214,10 +220,19 @@
first_row: true, // First row should be highlighted?
row_template: false, // An array of column types set in field_templates
field_templates: false, // An array of custom field type objects
fixed_rows: false, // Hide add/remove row buttons
fixed_cols: false, // Hide add/remove column buttons

// Validate fields
validate_field: function (col_id, value, col_type, $element) {
return true;
},

// Data changed event (triggered on input, select, textarea change event and on enter keydown)
// action: data: col_id, value, $element
// addcol: col_id
// delcol: col_id
data_changed: function (col_id, action, value, $element) {
}
});
</pre>
Expand Down Expand Up @@ -444,7 +459,8 @@

<h3 id="e4">Example 4 - Custom field types &amp; validation</h3>
<form method="post" action="#output">
<textarea id="examplex" style="display: none;" name="myField"></textarea>
<textarea id="examplex" style="display: none;" name="myField"></textarea>
<div id="examplexlog"></div>
<a href="#examplexcode" class="showcode button">Show Code</a>
<a href="#" id="examplexconsole" class="button">Validate table</a>
</form>
Expand Down Expand Up @@ -511,7 +527,12 @@
}
}
return true;
},

data_changed: function (col_id, action, value, $element) {
$('#examplexlog').append('&lt;div&gt;col_id: ' + col_id + ', action: ' + action + ', value: ' + $('&lt;div/&gt;').text(value).html() + ', $element: ' + $element + '&lt;/div&gt;');
},

tableClass: 'inputtable custom'
});

Expand Down
296 changes: 296 additions & 0 deletions demo/shadow7853.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<title>jQuery editTable</title>
<meta name="description" content="jQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default input field for data tables.">
<link rel="stylesheet" href="main.css?v=0.2.0">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.edittable.js?v=0.2.0"></script>
<link rel="stylesheet" href="../jquery.edittable.css?v=0.2.0">
<script>
$(window).ready(function () {

// Example 4 EDITED by shadow7853
// Custom fields & validation
var mynewtable = $('#examplex').editTable({

fixed_rows: false,
fixed_cols: false,

field_templates: {
'checkbox' : {
html: '<input type="checkbox"/>',
getValue: function (input) {
return $(input).is(':checked');
},
setValue: function (input, value) {
if ( value ){
return $(input).attr('checked', true);
}
return $(input).removeAttr('checked');
}
},
'textarea' : {
html: '<textarea/>',
getValue: function (input) {
return $(input).val();
},
setValue: function (input, value) {
return $(input).text(value);
}
},
'select' : {
html: '<select><option value="">None</option><option>All</option></select>',
getValue: function (input) {
return $(input).val();
},
setValue: function (input, value) {
var select = $(input);
select.find('option').filter(function() {
return $(this).val() == value;
}).attr('selected', true);
return select;
}
}
},
row_template: ['checkbox', 'text', 'text', 'textarea', 'select'],
headerCols: ['Yes/No','Date','Value','Description', 'Which?'],
first_row: false,
data: [
[false,"01/30/2013","50,00 €","Lorem ipsum...\n\nDonec in dui nisl. Nam ac libero eget magna iaculis faucibus eu non arcu. Proin sed diam ut nisl scelerisque fermentum."],
[true,"02/28/2013","50,00 €",'This is a <textarea>','All', 'extra-dynamic-cell'],
[true,"partial row"]
],
validate_field: function (col_id, value, col_type, $element) {
if ( col_type === 'checkbox' ) {
$element.parent('td').animate({'background-color':'#fff'});
if ( value === false ){
$element.parent('td').animate({'background-color':'#DB4A39'});
return false;
}
}
return true;
},
data_changed: function (col_id, action, value, $element) {
$('#examplexlog').append('<div>col_id: ' + col_id + ', action: ' + action + ', value: ' + $('<div/>').text(value).html() + ', $element: ' + $element + '</div>');
},
tableClass: 'inputtable custom'
});

$('#examplexconsole').click(function(e) {
console.log(mynewtable.getData());
if ( !mynewtable.isValidated() ){
alert('Not validated');
}
e.preventDefault();
});

$('.showcode').click(function () {
$($(this).attr('href')).slideToggle(300);
return false;
});

});
</script>
</head>

<body>

<div class="container">

<h1>jQuery editTable <span>v0.2.0</span></h1>
<p>Edited by shadow7853</p>

<p>Based on original jQuery editTable, thank's to micc83: <a href="https://github.com/micc83/editTable">https://github.com/micc83/editTable</a></p>
<p>jQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default <strong>input field for data tables</strong>. jQuery editTable can be used both in ajax and/or HTTP POST contest and let you preset the title and number of columns or just let complete freedom to the user. You can even append custom behaviors to single column cells (ex. <strong>jQuery UI Datepicker</strong>). The only limit is your imagination! :)</p>

<p><b>I've modified the code to enable headerCols, row_templates to be also partials (define templates for first cells, others will be 'text') and to not disable column adding.</b></p>
<p><b>Also data rows could be partials, not all with the same length.</b></p>

<a href="https://github.com/shadow7853/editTable" class="download_button" style="display: inline-block">Go to MY version on GitHub</a>
<a href="https://github.com/micc83/editTable" class="download_button" style="display: inline-block">Go to original version on GitHub</a>

<p>To use it you just have to include jQuery and a copy of the plugin in your head or footer:</p>
<pre>
&#x3C;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x20;&#x74;&#x79;&#x70;&#x65;&#x3D;&#x22;&#x74;&#x65;&#x78;&#x74;&#x2F;&#x6A;&#x61;&#x76;&#x61;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x22;&#x20;&#x73;&#x72;&#x63;&#x3D;&#x22;&#x68;&#x74;&#x74;&#x70;&#x3A;&#x2F;&#x2F;&#x63;&#x6F;&#x64;&#x65;&#x2E;&#x6A;&#x71;&#x75;&#x65;&#x72;&#x79;&#x2E;&#x63;&#x6F;&#x6D;&#x2F;&#x6A;&#x71;&#x75;&#x65;&#x72;&#x79;&#x2D;&#x6C;&#x61;&#x74;&#x65;&#x73;&#x74;&#x2E;&#x6A;&#x73;&#x22;&#x3E;&#x3C;&#x2F;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x3E;
&#x3C;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x20;&#x74;&#x79;&#x70;&#x65;&#x3D;&#x22;&#x74;&#x65;&#x78;&#x74;&#x2F;&#x6A;&#x61;&#x76;&#x61;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x22;&#x20;&#x73;&#x72;&#x63;&#x3D;&#x22;&#x6A;&#x71;&#x75;&#x65;&#x72;&#x79;&#x2E;&#x65;&#x64;&#x69;&#x74;&#x74;&#x61;&#x62;&#x6C;&#x65;&#x2E;&#x6D;&#x69;&#x6E;&#x2E;&#x6A;&#x73;&#x22;&#x3E;&#x3C;&#x2F;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x3E;
&#x3C;&#x6C;&#x69;&#x6E;&#x6B;&#x20;&#x72;&#x65;&#x6C;&#x3D;&#x22;&#x73;&#x74;&#x79;&#x6C;&#x65;&#x73;&#x68;&#x65;&#x65;&#x74;&#x22;&#x20;&#x68;&#x72;&#x65;&#x66;&#x3D;&#x22;&#x6A;&#x71;&#x75;&#x65;&#x72;&#x79;&#x2E;&#x65;&#x64;&#x69;&#x74;&#x74;&#x61;&#x62;&#x6C;&#x65;&#x2E;&#x6D;&#x69;&#x6E;&#x2E;&#x63;&#x73;&#x73;&#x22;&#x3E;
</pre>

<p>Now you can trigger editTable on any textarea or block element (ex. div, article, section ...). In case you trigger it on a textarea, its content will be used as JSON source for the table. If the textarea is inside a form, on submit, its content will be updated with the new JSON data. Otherwise, if you trigger it on a block element the table will be appended to the element itself (ajax).</p>

<pre>
var mytable = $('#edittable').editTable({
data: [['']], // Fill the table with a js array (this is overridden by the textarea content if not empty)
tableClass: 'inputtable', // Table class, for styling
jsonData: false, // Fill the table with json data (this will override data property)
headerCols: false, // Fix columns number and names (array of column names)
maxRows: 999, // Max number of rows which can be added
first_row: true, // First row should be highlighted?
row_template: false, // An array of column types set in field_templates
field_templates: false, // An array of custom field type objects
fixed_rows: false, // Hide add/remove row buttons
fixed_cols: false, // Hide add/remove column buttons

// Validate fields
validate_field: function (col_id, value, col_type, $element) {
return true;
},

// Data changed event (triggered on input, select, textarea change event and on enter keydown)
// action: data: col_id, value, $element
// addcol: col_id
// delcol: col_id
data_changed: function (col_id, action, value, $element) {
}
});
</pre>

<p>There are of course many methods which can be used on the created table. Let's see...</p>

<pre>
mytable.loadData(dataArray); // Fill the table with js data
mytable.loadJsonData(jsonData); // Fill the table with JSON data
mytable.getData(); // Get a js array of the table data
mytable.getJsonData(); // Get JSON from the table data
mytable.reset(); // Reset the table to the initial set of data
mytable.isValidated() // Check if the table pass validation set with validate_field
</pre>

<p>To define a <strong>custom field type</strong> object (<a href="#e4">click here for a full example</a>):</p>
<pre>
[
'checkbox' : {

html: '&lt;input type="checkbox"/&gt;', // Input type html

// How to get the value from the custom input
getValue: function (input) {
return $(input).is(':checked');
},

// How to set the value of the custom input
setValue: function (input, value) {
if ( value ){
return $(input).attr('checked', true);
}
return $(input).removeAttr('checked');
}
}
]
</pre>

<p>That's it, now give a look to the following examples to understand how it works.</p>

<hr>

<h3 id="e4">Example 4 - Custom field types &amp; validation - EDITED by shadow7853</h3>
<form method="post" action="#output">
<textarea id="examplex" style="display: none;" name="myField"></textarea>
<div id="examplexlog"></div>
<a href="#examplexcode" class="showcode button">Show Code</a>
<a href="#" id="examplexconsole" class="button">Validate table</a>
</form>

<div id="examplexcode" style="display: none;" class="examplecode">

<span class="title">script.js</span>
<pre>
/**
* Example 4 - Custom field types & validation
*/
var mynewtable = $('#examplex').editTable({
field_templates: {
'checkbox' : {
html: '&lt;input type="checkbox"/&gt;',
getValue: function (input) {
return $(input).is(':checked');
},
setValue: function (input, value) {
if ( value ){
return $(input).attr('checked', true);
}
return $(input).removeAttr('checked');
}
},
'textarea' : {
html: '&lt;textarea/&gt;',
getValue: function (input) {
return $(input).val();
},
setValue: function (input, value) {
return $(input).text(value);
}
},
'select' : {
html: '&lt;select&gt;&lt;option value=""&gt;None&lt;/option&gt;&lt;option&gt;All&lt;/option&gt;&lt;/select&gt;',
getValue: function (input) {
return $(input).val();
},
setValue: function (input, value) {
var select = $(input);
select.find('option').filter(function() {
return $(this).val() == value;
}).attr('selected', true);
return select;
}
}
},
row_template: ['checkbox', 'text', 'text', 'textarea', 'select'],
headerCols: ['Yes/No','Date','Value','Description', 'Which?'],
first_row: false,
data: [
[false,"01/30/2013","50,00 €","Lorem ipsum...\n\nDonec in dui nisl. Nam ac libero eget magna iaculis faucibus eu non arcu. Proin sed diam ut nisl scelerisque fermentum."],
[true,"02/28/2013","50,00 €",'This is a &lt;textarea&gt;','All']
],

// Checkbox validation
validate_field: function (col_id, value, col_type, $element) {
if ( col_type === 'checkbox' ) {
$element.parent('td').animate({'background-color':'#fff'});
if ( value === false ){
$element.parent('td').animate({'background-color':'#DB4A39'});
return false;
}
}
return true;
},

data_changed: function (col_id, action, value, $element) {
$('#examplexlog').append('&lt;div&gt;col_id: ' + col_id + ', action: ' + action + ', value: ' + $('&lt;div/&gt;').text(value).html() + ', $element: ' + $element + '&lt;/div&gt;');
},

tableClass: 'inputtable custom'
});

// Trigger event
$('#examplexconsole').click(function(e) {

// Get data
console.log(mynewtable.getData());

// Check if data are valid
if ( !mynewtable.isValidated() ){
alert('Not validated');
}

e.preventDefault();
});
</pre>

</div>

<hr>

<h2>Credits and contacts</h2>

<p><strong>editTable</strong> has been made by <a href="http://codeb.it" target="_blank">me</a>. You can contact me at <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/Micc1983" target="_blank">twitter</a> for any issue or feauture request.</p>

</div>

</body>
</html>
2 changes: 1 addition & 1 deletion jquery.edittable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ table.inputtable a.icon-button.disabled {
background-color: #eee;
}
/* Row last cel */
table.inputtable td:last-child, table.inputtable th:last-child{
table.inputtable:not(.fr) td:last-child, table.inputtable:not(.fr) th:last-child{
background-color: #f8f8f8;width: 54px;border: none;
}
/* Table single cells */
Expand Down
Loading