Comments
If you intend to purchase this script or already purchased it, please leave your comment(s) on CodeCanyon.
21 comments | 
Add
a comment
Premium support
Premium support
If you intend to purchase this script or already purchased it, please leave your comment(s) on CodeCanyon.
Premium support
1 . 2024-04-08 08:21:14
Hi, Dear Author,
I am wondering the custom layout example, the cell editor select option, whether it supports option/value pattern, I saw it is option only, from my potential usage, option/value is needed, I am new to JS.
Thanks
Eric Xin
Email : ericx148 AT gmail DOT com
0 Reply
2 . 2019-04-19 09:51:47
ciao,
sto testando il codice per il custom layout, ma non riesco a configurare il select editor per l'ultima colonna della mia tabella, è come se non leggesse tutta la parte di cell_editors e tutte le celle rimangono modificabii.
Questo è il codice:
var tfConfig = {
base_path: 'TableFilter/',
linked_filters: true,
alternate_rows: true,
btn_reset: {
target_id: 'reset'
},
rows_counter: {
target_id: 'rows',
},
state: {
//types: ['local storage'],
filters: true,
page_number: true,
page_length: true,
sort: true
},
loader: true,
status_bar: true,
//grid_layout: true,
grid_layout: {
width: '20%',
},
paging: {
target_id: 'paging',
results_per_page: ['Records: ', [10, 25, 50, 100]]
},
auto_filter: {
delay: 5000 //milliseconds
},
mark_active_columns: {
highlight_column: true
},
highlight_keywords: true,
no_results_message: true,
col_0: 'none',
extensions:[
{
name: 'advancedGrid',
// For the purpose of this demo, ezEditTable dependency
// is loaded from its own website which is not a CDN.
// This dependency also requires a licence therefore
// DO NOT import it in this way in your projects.
filename: 'ezEditTable_min.js',
vendor_path: 'ezEditTable/',
//load_stylesheet: true,
//stylesheet: 'ezEditTable/ezEditableTable.css',
// Once ezEditTable dependency is installed in your
// project import it by pointing to a local path:
// vendor_path: 'path/to/ezEditTable'
// Below ezEditTable options for activating:
// - row/cells selection
// - cell inline edition
editable: true,
auto_save: false,
selection_model: "multiple",
default_selection: "both",
//editor_model: "cell",
table_css:"ezEdit/ezEditableTable", //table css clas
unselectable_css: "ezUnselectable", //makes the table unselectable (only for the latest browsers)
active_row_css: "ezActiveRow", //active row
selected_row_css: "ezSelectedRow", //selected row(s)
active_cell_css: "ezActiveCell", //active cell
modified_cell_css: "ezModifiedCell", //modified cell
input_editor_css: "ezInputEditor", //input editor
textarea_editor_css: "ezTextareaEditor", //textarea editor
select_editor_css: "ezSelectEditor", //select editor
activity_indicator_css : "ezOpacity",
cell_editors: [
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'select', style:'width:70px;', custom_slc_options:['FP', 'TP', 'NA'] }
] ,
Email : c DOT cortesi2 AT studenti DOT unibg DOT it
0 Reply
3 . 2018-09-28 03:17:21
http://wstarrsbar.com
Email : sdfa AT gmail DOT com
0 Reply
4 . 2018-09-28 03:16:35
http://wstarosbar.com/
Email : sdhf AT gmail DOT com
0 Reply
5 . 2018-09-28 03:14:29
http://wstarjbar.com/
Email : sfp AT gmail DOT com
0 Reply
6 . 2018-06-25 15:01:08
hi !
i have a serious problem using ezedittable.
updating rows in mysql is only possible for the two first coluns : (ref and description) see below
i really don't understand why he don't update the following colums. (all are VARCHAR in the DB)
help would be appreciated !! :)
This is the var table script :
------------------------------
<script language="javascript" type="text/javascript">
var table7_Config = {
editable: true,
ajax: true,
auto_save: true,
auto_save_model: 'row',
default_selection: 'both',
editor_model: 'cell',
editable_on_keystroke: true,
form_submit_interval: 999, //interval separating data submissions to prevent server`s overload security policy
cell_editors:[
{ type: 'none', css:'alignCenter' },
{ type: 'input', css:'alignLeft' },
{ type: 'input', css:'alignLeft' },
{ type: 'input', attributes:[['maxlength', 2], ['title', 'Max 2 caractères']], css:'alignCenter' },
{ type: 'input', css:'alignLeft' }
],
actions:{
'update': {
uri: 'updaterow.php', submit_method: 'form', form_method: 'POST',
param_names: ['id','ref','description','aspect','npc']},
},
};
var et7 = setEditTable("table7", table7_Config);
</script>
and updaterow.PHP code :
------------------------------
require_once("dbcontroller.php");
$db_handle = new DBController();
$lid = $_POST['id'];
$ref = $_POST['ref'];
$description = $_POST['description'];
$aspect = $_POST['aspect'];
$npc = $_POST['npc'];
$query = "UPDATE allrefs SET ref='$ref',description='$description',aspect='$aspect',npc='$npc' WHERE id='$lid'";
$db_handle->runQuery($query);
Email : didbugzero AT gmail DOT com
0 Reply
7 . 2016-09-01 08:42:54
Is i tpossible to implement grouping of rows at runtime and showing subtotals after groping on number columns?
Email : badalraut AT gmail DOT com
0 Reply
8 . 2013-07-18 22:44:53
Bonjour à vous,
Tout d'abord vraiment bravo pour votre script !
Je l'ai implémenté sur un tableau HTML (avec TableFilter), je peux éditer et "sauvegarder" des informations dans le tableau. Là dessus pas de soucis. Néanmoins si j'actualise la page, je peux constater que la sauvegarde est pas fait dans la BDD.
Ma config d'ezEditTable :
ezEditTable_config: {
default_selection: 'both',
editor_model: 'cell',
cell_editors:[
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'none' },
{ type: 'input', target: 'datePick' },
{ type: 'boolean' },
{ type: 'input' },
{ type: 'command',
buttons:{
enable: ['update', 'submit', 'cancel'],
'update': { title:'Edit row' },
'submit': { text:'Save', title:'Save' },
'cancel': { text:'Cancel', title:'Cancel' }
}
}
],
actions:{
'update': {
uri: 'php/sauvegarde_paye.php', submit_method: 'form', form_method: 'POST',
on_update_submit: function(o, rows){
o.config.exec_requests(o, rows, 'update');
},
param_names: ['numContainer','societe','prestataire','type','num_fact','montant','echeance','tc_paye','mode_paye']
}
},
...
Mon fichier sauvegarde_paye.php récupère avec des $_POST des param_names.
Mais je ne comprends pas comment ça fonctionne vraiment, j'ai peur que les paramètres ne passent en fait pas.
Une petite aide serait la bienvenue ! :)
Email : dev AT mii DOT re
1 Reply
1 . 2013-07-19 06:48:42
Salut,
En regardant le code que tu as soumis, je vois que tu delegues la mise a jour dans la BDD a la methode o.config.exec_requests, ceci m'indique que tu veux faire de l'AJAX. Assure toi d'avoir importe la librarie jQuery dans ta page. Si non le fonctionnnement est assez simple: le script effectue un appel POST a ta page PHP avec les parametres definis dans param_names . Tu peux voir l'appel dans ton navigateur dans les outils de development, l'onglet 'Reseaux'. A partir de la tu peux voir ce que le script soumet au serveur et te faire ainsi une idee plus precise de ce qui se passe.
A bientot
PS: Continuons cette discussion sur CodeCanyon
Email :
9 . 2013-04-13 16:01:05
Hi,
I have a bug when I use ezEditTable with jQueryCalendar (datapicker). IE says:
Message: Object doesn't support this property or method
Línea: 1512
Carácter: 44
Código: 0
URI: file:///C:/Users/Jo/Desktop/TableFilter/ezEditTable/ezEditTable.js
¿What could I do to fix it, please?
Thanks in advance
Jose
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="TableFilter/tablefilter.js" language="javascript" type="text/javascript"></script>
<script>
$(function() {
$( "#ini" ).datepicker();
$( "#fin" ).datepicker();
});
</script>
</head>
<body>
<div>Ini: <input type="text" id="ini" /> Fin: <input type="text" id="fin" /></div>
<br><br>
<br><br><br>
<table border="1" id="table1">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<tr>
<td>asd</td>
<td>1</td>
<td>5</td>
<td>0</td>
<td>100</td>
</tr>
<tr>
<td>csd</td>
<td>6</td>
<td>3</td>
<td>9</td>
<td>0</td>
</tr>
<tr>
<td>bsd</td>
<td>0</td>
<td>6</td>
<td>8</td>
<td>1</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
//<![CDATA[
var props ={
sort: true,
editable: true,
selectable: true
};
var tf1 = setFilterGrid("table1", props);
//]]>
</script>
</body>
</html>
Email : josepd AT gmail DOT com
1 Reply
1 . 2013-04-14 02:46:36
Hi,
Try to import the tablefilter_all.js file (all modules in 1 js document) instead of tablefilter.js and also the ezEditTable extension TableFilter/ezEditTable/ezEditTable.js:
<script src="TableFilter/ezEditTable/ezEditTable.js" language="javascript" type="text/javascript"></script>
This may help IE.
Please contact me via the CodeCanyon profile contact:
http://codecanyon.net/user/koalyptus
Cheers,
Max
Email :
10 . 2012-10-08 17:26:06
Hi,
i included the TableFilter with paging and filtering and it works fine. but during the loading of the page i get the following error message: "Failed to instantiate Edit Table object. "ezEdit Table" module may not be available."
the same error message appears on the demo pages at edittable.free.fr
any ideas?
kind regards
motti
Email : otterbach AT gmx DOT de
1 Reply
1 . 2012-10-09 00:10:41
Hi,
This means you are using the 'selectable' or 'editable' option in the TableFilter configuration object but the TF scripts cannot load the required ezEditTable module. Make sure you have downloaded and installed the ezEditTable script in the TableFilter folder as described in this page: http://tablefilter.free.fr/dwn.php.
Email :
11 . 2012-07-17 13:17:35
I cant figure out if there's a way to mark not only one but few rows on start. Thank's in advance
Email : martin85 AT abv DOT bg
1 Reply
1 . 2012-07-25 05:43:52
Hi there,
To select multiple rows at start first you need to set the selection_model option to 'multiple' and then you can use the SelectRowByIndex(rowIndex) public method to select rows:
var yourOptions = {
selection_model: 'multiple',
on_selection_initialized: function(o){
o.Selection.SelectRowByIndex(3);
o.Selection.SelectRowByIndex(4);
o.Selection.SelectRowByIndex(5);
}
};
Cheers
Email :
12 . 2012-04-23 09:30:50
hi,
first of all: thank you max for sharing this great tool - it's awesome!
this is my (simple) situation: i have a page including tablefilters with lets say
200 entries (no paging). by double-clicking a entry another page is loaded with multiple options
to change the data. when this is finished, a back-button loads the inital page with
the new values. my issue is, that i didn't find a way to scroll the respective row
into view again. i managed that the row is highlighted by using 'row_index_at_start'
and 'select_row_at_start' and i tried setting 'scroll_into_view' but obviously this is not the
right parameter because i'm always at the top of the table (div). have you got a hint for me
how to solve this?
many thanks!
martin
Email : mahu_001 AT hotmail DOT com
2 Replies
1 . 2012-04-28 15:25:03
i did not manage to get your code functioning.
but never mind. since i found out the name of the div, i'm using the
getelementbyid().scrolltop property (cookie) and this works fine.
thanks for your efforts!
Email : mahu_001 AT hotmail DOT com
2 . 2012-04-27 06:01:38
Thanks Martin.
What you could do, is to force the scroll_into_view behaviour when Selection object is instanciated by using the on_selection_initialized callback event:
var ezConfig = {
...
on_selection_initialized: function(o){
var selectedRow = o.Selection.GetActiveRow();
selectedRow.scrollIntoView(true);
}
...
};
I haven't tested the code above. Let me know...
Email :
13 . 2012-02-09 14:39:18
Bonjour Max,
Après plusieurs mois j'ai décidé de m'y remettre. Cette fois je suis parvenu à faire fonctionner ez_edit_table!
Enfin dans sa version non intégrée à table filter. Je ne sais pas pourquoi, mais en installent les deux scripts à la suite ça fonctionne. Pour commencer ça me va car je suis assez pressé, je reviendrais vers toi pour ça coté table filter.
Mais j'ai tout de même eu un probleme que j'ai solutionné d'une manière très brouillonne et ça me chagrine car j'ai peur que d'autres surviennent à un très mauvais moment (ez edit table va me servir comme editeur rapide pour les administrateurs lors de l'organisation d'une course à pied avec environ 1200personnes)
J'ai d'abord eu énormément de difficultés à maitriser un input qui contient des accents; Là j'ai compris que je ne gérais pas correctement les charsets et du coup je me retrouvais avec des carcatères bizaroïdes j'ai touché à l'encodage de ma base sql, fixé un peu partout, dans la balise head, le header en debut de php...rien n'y faisait jusqu'au moment ou, sur une info trouvée je ne sais plus ou, j'ai réencodé le texte de mes php dans le même : iso-8859-1. J'avoue que je ne comprend pas du tout pourquoi, mais ça a marché.
Mais ça ne s'arrête pas là. J'utilise aussi des select et, cette aussi il m'a fallu un bon moment pour comprendre pourquoi mes entrées ne fonctionnaient pas, car j'avais toujours le message qui me confirmait l'aboutissement de ma requête lors de la sauvegarde. Pourtant rien n'entrait dans la base.
D'une part sur une variable tous les caractères accentués qui s'y trouvaient se voyaient remplacés par leur equivalent exadecimal! rien que cela.
Curieux, parce que d'autre part, sur les autres qui sont toutes de type ('oui', 'non', '-' ), même il n'y avait pas de caractères accentués, cette fois d'autres caractères venaient s'ajouter en début de chaine : %0A%0A.
Ma variable sql étant trop courte je ne voyais que %0A%0 ...partout.
Une fois le probleme localisé je m'en suis sorti en filtrant mes chaines coté serveur. c'est à dire en convertissant les un et eliminant les autres. Mais bon il y a peut-être un peu plus efficace/élégant comme correction , a condition de comprendre ce que je fais de travers, car j'ai trictement pris modèle sur un de tes exemples, comme d'hab... :-)
Email :
0 Reply
14 . 2012-01-17 19:38:16
Hello Max,
Is it possible to add a "loading" image during server activity, e.g. if rows have been deleted?
Thanks, Clayton.
Email :
0 Reply
15 . 2012-01-06 13:17:09
Firstly, great work. REally comprehensive.
I have a query around fixed headers (and columns). I've seen your other post/site, but it doesn't seem to work in Chrome. Any suggestions?
Regards,
Clayton
Email : clayton AT timcke DOT co DOT za
4 Replies
1 . 2012-01-15 17:18:49
Fantastic! Thanks so much. Will have a look at it.
Email :
2 . 2012-01-12 15:10:53
Hi Clayton,
Please use the grid_layout property instead, this works also under Chrome:
http://tablefilter.free.fr/grid-layout.htm
The demo you found is actually deprecated...
Email :
3 . 2012-01-08 17:47:50
Hi Max,
Page URL is http://tablefilter.free.fr/fixed-headers2.htm
Any plans for this to be Chrome-ready?
Regards,
Clayton
Email :
4 . 2012-01-07 18:40:47
Hi Clayton,
Could you please tell me which demo page is not working under Chrome? and I also need to know which version.
Email :
16 . 2011-12-05 22:13:00
I am having difficulty getting my table to post changes to by DBO. I currently have it posting to an aspx which passes an SQL query to the table. Do I have to use PHP to run an Update query? If so how do I provide username password as I do through my aspx?
Thanks,
T
Email :
9 Replies
1 . 2011-12-15 22:18:04
I've definitely been fine tuning the table. Just so I am clear about what difficulties I have been facing:
scenario 1:
A field is blank.
I dblclick and add a value: "value"
I click save msg_submit_ok returns sucess message, refresh the page, and the value was properly sent to the database.
scenario 2:
A field has a value: "value"
I dblclick and add edit the value to : "new value"
I click save msg_submit_ok returns sucess message, refresh the page, and the value was not properly sent to the database. the cell still reads: "value"
Email :
2 . 2011-12-13 14:12:01
Thanks Thompa,
The problem is not server-side technology, is more to fine tune all the components.
If you want the blank values to be kept in the cell editors use the allow_empty_value property as displayed in this demo page: http://edittable.free.fr/demos.php#demo2
Also spaces are converted to %20, because values are url encoded for submitting purposes, you need to decode server-side those values with a urldecode instruction in VB .Net for example:
Dim DecodedString As String = Server.UrlDecode(EncodedString)
Email :
3 . 2011-12-09 22:20:23
an update:
I was able to get ...strTownAddressNumber = Request.Form("addnumber").tostring... to work...somewhat.
For some reason now the script is only allowing me to change the contents of cells that begin as blank values. Others simply retain their old value. Also spaces are converted to '&20'.
Max, just to let you know your script is amazing! With more time I will be able to make this work. Perhaps I should spend some time switching over to php and I will be able to avoid all of these other headaches.
Thanks again!
Email :
4 . 2011-12-09 20:27:01
i've tested my aspx page using a simple sql update statement and it does work. I believe the problem may lie in retreiving the params passed through ezedittable.js.
I have tried: strTownAddressNumber = Request.Form["addnumber"].ToString
strTownAddressNumber = Request.Form["addnumber"]
strTownAddressNumber = Request.Param["addnumber"].ToString
strTownAddressNumber = Request.Form["addnumber"]
and every iteration without " ' s.
How would I call the parameters passed through ezedittable.js using aspx?
Email :
5 . 2011-12-09 09:11:45
Hi Thompa,
Please make sure your aspx page is OK, that param names in aspx form correspond to param names sent by the ezEditTable object. By the way, in the code fragment I see
...
strCSID = Request.Form(id)
...
is id defined? Shouldn't be
strCSID = Request.Form("id")
instead?
Email :
6 . 2011-12-07 20:42:13
Sorry for bombarding the wall with posts, but I have since switched over to version 2.3 of table_filter.js which includes the ezedittable so i know that my last concern is not a problem. I am still unable to post changes to the database though.
possibly it is something incorrect with my asp:
<%@LANGUAGE="VBSCRIPT" Debug="true"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDB" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!--#include file="./dbconnection.aspx" -->
<%
Dim strSQL as String
Dim strTownAddressNumber as String
Dim strCSID as String
strCSID = Request.Form(id)
strTownAddressNumber = Request.Form(addnumber)
strSQL = "Update dbo.Control_Sheet Set Town_Assigned_Number = '" & strTownAddressNumber & "' WHERE Maintenance_ID = " & strCSID
Using adoCon as New SqlConnection(strConString_no_prov)
adoCon.Open
Dim myCommand as New SqlCommand(strSQL, adoCon)
myCommand.ExecuteNonQuery()
adoCon.Close
End Using
%>
thanks again.
Email :
7 . 2011-12-07 18:32:02
I forgot to mention in my last reply that I am also using your tablefilter.js.
I'm not sure if that is causing any problems.
Thanks again!
Also here is the javascript used for ezEditTable.js
...
actions:{
'update': {
uri: 'js_update_test.aspx', submit_method: 'form', form_method: 'POST',
param_names: ['id','pro','stat','townname','fieldrep','addnumber','a','b','c','d','e','f','g','h','i']
}},
...
Email :
8 . 2011-12-07 18:16:21
Thanks Max!
I have my asp page set up with a proper update query but am having difficulties sending the variables to the page now.
I'm using: <input type="button" value="save" name="save" title="Save created and modified records" onclick="et.Editable.SubmitEditedRows();"> to call the update function.
After making a change to a cell and then clicking the save button, I receive the message : "Modified rows were successfully submitted to server!" although upon refresh no changes were actually made. It doesn't seem to matter what I enter as the URI, as long as there is something.
What could I be missing here?
Thanks.
Email :
9 . 2011-12-06 21:33:36
Hi Thompa,
The script is not linked to a specific server-side technology, as long as you pass correctly the parameters by POST or GET methods to an aspx page, this is enough. Of course you need to implement your own logic in the server-side page in order to make an Update/Insert query in your DB. If you need to provide additional params such as username and login you can provide them as follows in your configuration objetc:
...
actions:{
'update': {
uri: 'mypage.aspx?user=user&login=login', submit_method: 'form', form_method: 'POST',
...
},
...
Email :
17 . 2011-08-19 09:11:41
Hi Max,
Thanks for a fantastic script and I'm really looking forward to when you merge this script with the tablefilter script :-)
I was looking at the Checkbox-example http://edittable.free.fr/checkbox_selection.php and I was just wondering if it could be possible to for instance get the selected id's and built an array of them? I'm not much into javascript yet so until now I'm just wondering :-)
Kind regards,
Mikkel
Email : mikkelek AT hotmail DOT com
3 Replies
1 . 2011-08-25 08:43:48
Hi Mikkel,
I am working on the merge when I can... it is almost done, hopefully in the next days, the 2 scripts will work together.
Email :
2 . 2011-08-24 12:45:14
Hi Max
Thanks for your reply - just what I was looking for! Looking even more forward to the merge with table filter!
Email : mikkelek AT hotmail DOT com
3 . 2011-08-19 20:53:44
Hi Mikkel,
Yes the script provides many public methods, you have the GetSelectedRows() or GetSelectedValues() methods to retrieve an array of html rows objects or values, refer to http://edittable.free.fr/doc_methods.php#ez_selection_methods documentation page
Email :
18 . 2011-08-06 15:23:09
Bonjour Max,
Après avoir implanté avec succès ton script TableFIlter Generator sur notre site (ça marche super bien) , j'essai de compléter la gestion des membres de notre club avec ton editeur comme outil de saisie rapide pour la validation des pré-inscriptions en ligne au club .
Tu te doutes que le programmeur du dimanche a trébuché à nouveau Cela eu été dommage que je comprenne du 1er coup n'est-ce pas?... Qu'ai-je zapé cette fois?
En fait "tout ce passe bien" jusqu'à l'appel des actions.
Là j'ai bien le message "Modified rows were successfully submitted to server!" Puis le navigateur reste attente car la page appelé n'arrive jamai. J'ai tout tenté. Je me suis replié sur un de tes exemples ("demoEmployee1") pour vérifier mais rien à faire , même symptome.
Encore une fois merci beaucoup Max pour ta disponibilité , ta patience et ce nouveau travail impressionnant!
Au cas ou ...j'ai installé ce bout de code "essai.html" dans le dossier ezEditTable lui même dans celui de tablefilter
comme le code n'est pas trop long le voici
<script language="javascript" type="text/javascript" src="ezEditTable_min.js"></script>
<link href="ezEditTable.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
@import "../filtergrid.css";
div#navmenu li a#lnk11{
color:#333; font-weight:bold;
border-top:2px solid #ff9900;
background:#fff;
}
.ezCommandEditor button{
margin:5px !imporant;
background-color:#f4f4f4;
font-size:12px !important;
}
.ezCommandEditor button img{ vertical-align:middle; margin:2px; }
</style>
<script language="javascript" type="text/javascript">
//ezEditTable configuration object
var demo1Config = {
editable: true,
default_selection: 'both',
editor_model: 'cell',
cell_editors:[
{ type: 'none' },
{ type: 'input', attributes:[['title', 'First name and last name']] },
{ type: 'input', attributes:[['title', 'email address']] },
{ type: 'input'},
{ type: 'input', attributes:[['maxLength', 10], ['title', '10 digits max.\n numbers with 2 decimal places only']], css:'alignRight' },
{ type: 'boolean' }
],
actions:{
'update': {
uri: 'update.php', submit_method: 'form', form_method: 'POST',
param_names: ['id','name','email','startdate','salary','active']
},
'insert': {
uri: 'update.php', submit_method: 'form', form_method: 'POST',
param_names: ['id','name','email','startdate','salary','active'],
default_record: ['', 'Employee name...', 'employee@email.com', '2011-01-01','0', '<input type="checkbox" checked>']
},
'delete': {
uri: 'update.php', submit_method: 'script', bulk_delete: false,
param_names: ['id']
}
}
}
</script>
........
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><button onclick="et1.Editable.AddNewRow();"><img src="themes/icn_add.gif" alt=""/> Add employee</button></td>
<td><button onclick="et1.Editable.SubmitDeletedRows();"><img src="themes/icn_del.gif" alt=""/>Delete employee</button></td>
<td><div class="floatLeft" style="margin:5px 5px 2px 20px; font-size:12px;">
<input id="chkRowEditor" name="chkRowEditor" type="checkbox"
onClick="et1.Editable.CloseRowEditor(); if(this.checked){ et1.editorModel = 'row'; } else { et1.editorModel = 'cell'; }" />
<label for="chkRowEditor">Row editor</label>
<input id="chkMultipleSlc" name="chkMultipleSlc" type="checkbox"
onClick="if(this.checked){ et1.bulkDelete = true; et1.selectionModel = 'multiple'; } else { et1.bulkDelete = false; et1.selectionModel = 'single'; }" />
<label for="chkMultipleSlc">Multiple selection</label>
</div>
</td><td>
<div class="floatRight">
<button title="Save created and modified records"
onclick="et1.Editable.CloseRowEditor(); et1.Editable.SubmitAddedRows(); et1.Editable.SubmitEditedRows();"><img src="themes/icn_save.gif" alt=""/> Save</button>
</div>
</td></tr></table>
<table id="demoEmployee1" cellspacing="0" width="100%">
<thead><tr id="tr589"><td>589</td><td>pouet pouet</td><td>max.guglielmi@email.com</td><td>1992-10-16</td><td align="right">5000.00</td><td><input type="checkbox" /></td></tr><tr id="tr588"><td>588</td><td>Cairo Foster</td><td>employee@email.com</td><td>1995-06-07</td><td align="right">432176.99</td><td><input type="checkbox" /></td></tr>
... les autres fiches...
</tbody></table>
<script language="javascript" type="text/javascript"> var et1 = setEditTable('demoEmployee1', demo1Config); </script>
Email : jpbonneDOTgmail DOT com
12 Replies
1 . 2011-08-31 14:04:52
Merci beaucoup pour ce petit bout de code, il à l'air de parfaitement marché
Cela va beaucoup m'aider.
J'ai remarqué une nouvelle erreur sur firefox qui est apparu hier chez moi (c'est assez étrange je ne sais pas si ca vient de mon firefox ou d'une mise a jour automatique mineur de leur pars).
Au moment d'envoyer des donnés (2 lignes ou plus à la fois) en cliquant sur "save" (le problème n'aparrait que pour un tableau sous la forme de la "demo 1") si ont passe par une méthode "form", cela ouvre une nouvelle fenetre blanche comportant le liens vers la page sql "http://edittable.free.fr/php/employeeInsert.php" par exemple (en fait comme un formulaire normal en html qui redirige l'utilisateur vers la page d'envoie des données <form action=''employeeInsert.php>).
J'ai essayer a partir de mon application et de celle proposer sur http://edittable.free.fr/demos.php DEMO 1, le problème apparait.
Par contre aucun souci sous opéra, ie, ou en utilisant la méthode "script" à la place de "form".
Le problème vient peut être de moi, il faudrait que je face le test sur un autre pc.
Merci encore pour le code
Email :
2 . 2011-08-30 21:37:44
Re-salut,
Finalement c moins embetant que j'maginais, il suffit de definir la callback on_before_submit pour chaque action et jouer un peu avec les objets ezDataRow renvoyés en argument à la callback:
var myConfig = {
...
actions:{
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso','name','printablename','iso3','code'],
on_before_submit: function(o, modifiedRows){ //modifiedRows = array of ezDataRow
for(var i=0; i<modifiedRows.length; i++){
// ezDataRow = [rowIndex, ezRow];
// ezRow = { values:[cellVal0, cellVal1... cellValn], urlParams: 'col_0=value&col_1=value...&col_n=value' }
var rObj = modifiedRows[i]; //ezDataRow object
var rowIndex = rObj[0]; //rowIndex
var row = rObj[1]; //ezRow
row.urlParams += '&toto=hello';
alert(row.urlParams);
}
},
on_submit_error: function(o, e, errDescription){ alert(errDescription); }
}
},
...
};
Une description (sommaire hélas) de cet object dataRow est dispo dans cette doc: http://edittable.free.fr/doc_methods.php#ez_editable_methods
Je pense que tu pourras parvenir à tes fins, tiens moi au courant.
Email :
3 . 2011-08-30 11:53:19
D'accord Merci, oui je veux bien être tenue au courant si tu te penche sur le problème.
Je vais aussi essayer de mon côter de tester la méthode on_before_submit, mje te tiens au courant si j'arrive a faire quelque chose avec.
Merci
Email :
4 . 2011-08-30 08:56:11
Oui, je pense que c faisable en utilisant la callback on_before_submit et en utilisant les propriétés du script mais je doute que toutes les propriétés et/ou méthodes à utiliser soient documentées ou publique... Je n ai pas encore essayé de le faire, mais je te tiens au courant si tu veux.
Email :
5 . 2011-08-25 16:59:19
D'accord merci,
J'ai une petite question, je me demandais si c'était possible d'envoyer d'autre variable (lorsque ont presse le bouton "save") qui n'ont rien avoir avec le tableau par les param_name ou un autre moyen ?
Par exemple j'ai une page avec mon tableau, plus quelque champs <input text> en dessous du tableau, et j'aimerais lorsque j'envoie mes données en appuyant sur "save" pourvoir lui transmettre mes champs supplémentaire.
Est-ce possible selon vous ?
En vous remerciant d'avance =)
Email :
6 . 2011-08-25 08:41:39
En fait, il ne peut pas y avoir de POST avec le submit par script, parce que cette méthode se base sur l'inclusion d'une balise script dans le head de la page et donc on ne peut que passer les paramètres au serveur en querystring...
Email :
7 . 2011-08-24 17:41:49
Merci de ta réponse rapide, me concernant je n'ai pas de problème sur l'insertion des données que ce sois avec 1 ou plusieurs ajouts, tu as peut être raison pour le "loader de firefox".
J'ai fait des tests avec les différents submit_method et form_method :
submit_method : form + POST = Loader bug
submit_method : form + GET = Loader Bug
Submit_method : script + GET = aucun problème tout marche
Submit_method : script + POST= J'ai lu dans le doc que "script" ne s'utilise que avec le GET, quelle est la particularité d'un submit_method en "script" ?
Merci beaucoup
Email :
8 . 2011-08-24 13:43:03
Hello à tous,
!
je vais essayer de régler ce pb avec FF dans la prochaine version, mais je ne sais pas encore quand est-ce que je vais bosser sur ce script, hélas. Il me semble que il s agit juste d un pb d affichage du loader de FF, les données sont envoyées normalement lors du POST, une seule fois, non? Merci de me clarifier ce point. Ou Est-ce que vous dites que ça boucle, que les paramétrés sont envoyés plusieurs fois pour une même ligne?
Si non je conseille aussi d essayer la submit_method: 'script' (methode GET) qui devrait éviter c type de pb sous FF ou carrément de faire de l AJAX, comme dans cette exemple montrant comment implémenter sa propre action serveur: http://edittable.free.fr/custom-actions.php
Merci de vos retours précieux, c ainsi qu on fait avancer le logiciel libre
Email :
9 . 2011-08-23 16:22:55
Concernant firefox j'ai constater que le problème apparaissait en faisant un "add rows" suivi d'une "save", mais par contre il n'apparait pas si je fais plusieurs "add rows" (en remplissant les paramètre) de suite, puis un "save"
Si d'autre personne ont le même problème ?
Merci
Email :
10 . 2011-08-22 20:54:02
Je poste un commentaire car j'ai constater le même problème que Jpat concernant le script qui ne s'arrette plus une fois que les paramètres sont envoyer (après un clic sur le bouton "save") pour les versions de firefox 5 et firefox 6 (je n'ai pas tester sous la version 4 et 3). Cependant cela n'empeche pas le script de fonctionner et les données sont bien modifiers dans la base de donnée pour mon cas.
Par contre aucun problème avec opéra ou internet explorer.
Il doit y avoir un problème dans le script qui est mal interpréter par les nouvelles versions de firefox, c'est dommage j'espère qu'une solution sera trouver =)
Merci
Email : richard DOT florian DOT 73700 AT gmail DOT com
11 . 2011-08-08 09:02:36
Bonjour JPat,
Content de voir que t'utilises ces scripts !
Alors quel est le pb exactement avec les actions ?
Est-ce que ta page coté serveur recoit bien les paramètres?
Comment tu lances ta page HTML, essai.html? Est-ce que tu passe par ton serveur web pour l executer (adresse web http://tonServeur/.../essai.html) ou est-ce que tu la lance localement sur ton serveur, cad en double-cliquant sur le fichier html pour le visualiser dans ton navigateur (\\monserveur...\essai.html ? Les pages serveurs php ne sont pas executees localement en fait...
Je vais bientot poster une demo montrant comment mettre en place ses propres actions grace aux fonctions deleguées fournies par le script. Peut-etre que ce sera plus clair et moins une boite noire eh eh! Visiblement, j ai des retours pas trop positifs à ce sujet
Email :
12 . 2011-08-06 15:38:18
J'oubliais une chose : le script (update.php pour les trois actions) se trouve dans le même dossier
s'il ne s'y trouve pas, pas d'erreur mais l'action est stoppée après le message et le Navigateur (Firefox 5.01) est libéré.
Email :
19 . 2011-08-03 11:30:18
Can I put custom select box (cell_editors)?
Cheers
Email : dragonlord888 AT hotmail DOT com
1 Reply
1 . 2011-08-04 12:41:11
Yes, you can configure custom options, have a look to this demo, Shipping column:
http://edittable.free.fr/custom_layout.php
and also the doc:
http://edittable.free.fr/doc.php#ez_cell_editors
the custom_slc_options property
Email :
20 . 2011-07-04 21:52:59
Very nice script. It does have a few issues though. They are all relevant to modification of the cells.
First, it does not allow to delete the content of the cell completely. The only way to do it is to select all the content and put "space" instead. Second, when trying to replace "empty" (i.e. cell with "space") with some content it puts too much in the cell.
Thanks,
Andrew.
Email : scherbakov AT bellsouth DOT net
7 Replies
1 . 2011-07-11 03:11:53
This is a great addition - but you probably need to enable this option in your demos - looks like none of them now allow empty cells except from demo2 :)
Thanks - great script!
Andrew.
Email :
2 . 2011-07-10 20:40:07
I have just posted a new version of the script allowing users to insert empty values if the allow_empty_value property is set to true, as you can see in this demo:
http://edittable.free.fr/demos.php#demo2
Cheers
Email :
3 . 2011-07-10 13:43:15
Max,
You are right, thank you.
Andrew.
Email :
4 . 2011-07-10 09:59:37
Yes, you can make a column read-only by setting the cell editor to 'none'. You have an example at
http://edittable.free.fr/ex.php#tbl7
Email :
5 . 2011-07-10 05:34:56
Thanks Max,
I will definitely try your fix.
I have one more question though. Quite often it makes sense to only allow user to edit some cells and not the whole table. Is it possible to exclude some columns and/or rows from scope of modifiable cells? Or, alternately, is it possible to specify what cells are editable (rather than whole table)?
Thanks,
Andrew.
Email :
6 . 2011-07-09 22:51:01
Andrew,
In order to correct the bug you pointed out 2 lines need to be changed, first open the ezEditTable.js document and locate the CloseCellEditor method (ln 529 of my editor). Replace this line (ln 543)
if(reg.test(cellHtml)) val = cellHtml.replace(reg, edtVal); //value to be written
by this one
if(reg.test(cellHtml) && cellVal!='') val = cellHtml.replace(reg, edtVal); //value to be written
and replace this line (ln 551)
this.activeCellEditor.innerHTML = val || cellHtml;
by
this.activeCellEditor.innerHTML = val;
These changes will allow blank cells and avoid the duplication of the text when a cell is empty.
Email :
7 . 2011-07-05 13:34:16
Thanks Andrew for pointing out these inconsistencies, especially the second one, which seems to be a bug.
I will have a look to the code whenever I have some time, I hope soon and, provide either a quick fix or a new release.
Cheers
Email :
21 . 2011-04-06 21:46:03
Welcome to the ezEditTable script comments area!
Email :
1 Reply
1 . 2012-01-16 13:57:03
Hi, is this Grid will support json ? kindly any one let me know
Email : sastry AT horasoft DOT in