Ajouter l'add-on timepicker au datepicker jquery dans editablegrid.js

**zazze69** · 03/07/2013, 00h00

Bonjour à tous,

J'aurais besoin d'une aide pour l'intégration de timepicker dans un tableau réalisé avec Editablegrid.

En fait le code Editablegrid détecte si le datatype d'une colonne est "date" et lui attribue automatiquement le datepicker de jquery.

Voici le code js:
fichier trop long alors je poste un lien vers le fichier js ici

Mais si je ne sais pas comment faire pour qu'une de mes colonnes comportant un datepicker ait aussi l' add-on timepicker.

j'ai essayé beaucoup de chose et le résultat est....nul

J'ai demandé de l'aide sur github à l'auteur de Editablegrid, qui pour des raisons compréhensibles, ne peut me venir en aide faute de temps.

Mais il a quand même essayé de me mettre sur la voie :

Le plus simple est de créer un nouveau CellEditor (en s'inspirant de DateCellEditor) et de l'utiliser pour l'édition de la colonne qui doit utiliser un timepicker.

Ensuite, il faut l'utiliser pour la colonne spécifiée : grid.setCellEditor("datetime_column", new DateTimeCellEditor() );

Mais je n'ai pas réussi.
Par avance je remercie quiconque voudras se pencher sur mon problème car je ne maitrise pas du tout javascript.

**zazze69** · 04/07/2013, 22h24

Bonsoir,

Bon ben j'ai essayé ça:

ajouté dans etitablegrid.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function DateTimeCellEditor(a) {
    this.init(a)
}
DateTimeCellEditor.prototype = new TextCellEditor();
DateTimeCellEditor.prototype.displayEditor = function (a, b) {
    TextCellEditor.prototype.displayEditor.call(this, a, b);
    $(b).datetimepicker({
        dateFormat: this.editablegrid.dateFormat == "EU" ? "dd/mm/yy" : "mm/dd/yy",
        beforeShow: function () {
            this.onblur_backup = this.onblur;
            this.onblur = null
        },
        onClose: function (c) {
            if (c != "") {
                this.celleditor.applyEditing(b.element, c)
            } else {
                if (this.onblur_backup != null) {
                    this.onblur_backup()
                }
            }
        }
    }).datetimepicker("show")
};

ET

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    a.cellRenderer = a.enumProvider ? new EnumCellRenderer() : a.datatype == "integer" || a.datatype == "double" ? new NumberCellRenderer() : a.datatype == "boolean" ? new CheckboxCellRenderer() : a.datatype == "email" ? new EmailCellRenderer() : a.datatype == "website" || a.datatype == "url" ? new WebsiteCellRenderer() : a.datatype == "datetime" ? new DateTimeCellEditor() : new CellRenderer();

Dans mon fichier php j'ai mis :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$grid->addColumn('Date_instal', 'Installation', 'datetime');

et dans mon html j'ai:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>			
		<script src="javascript/jquery-ui-timepicker-addon.js"></script>
		<script src="javascript/editablegrid.js"></script>
</head>
<body>
<script src="javascript/demo.js" ></script>	
<script type="text/javascript">
                window.onload = function() {            editableGrid.onloadXML("datasource/status_admin.php?id_status=<?php echo $id_status; ?>"); 
                }; 
                
</script>

Mais ça ne fonctionne pas, dans la console firebug j'ai une erreur:

TypeError: columns[j].cellRenderer._render is not a function
[Stopper sur une erreur]

columns[j].cellRenderer._render(i, j, td, getValueAt(i, j))

Mais en ait je me demande si seulement cela est possible car dans la notice de timepicker il faut ajouter ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#basic_example_1').datetimepicker();

Ce qui insinue que le script est lié à l'id de mon input. Or je ne sais pas comment nommé l'id de l'input puisque c'est un tableau dont les cellules se transforme en input au clic???
Bref, si quelqu'un pouvait me venir en aide parceque là ça devient vraiment trop gros pour moi...

Mille merci

**BaBeuH** · 05/07/2013, 12h29

Salut,

Je n'ai pas plongé profondément dans le code, mais ta piste semble correcte, je pense que le problème est que tu dois définir un "CellEditor", ce que tu as fait en créant ton DateTimeCellEditor, mais tu dois également définir un "CellRenderer".

Je pense que tu as fait une erreur dans la ligne suivante que tu as modifiée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    a.cellRenderer = a.enumProvider ? new EnumCellRenderer() : a.datatype == "integer" || a.datatype == "double" ? new NumberCellRenderer() : a.datatype == "boolean" ? new CheckboxCellRenderer() : a.datatype == "email" ? new EmailCellRenderer() : a.datatype == "website" || a.datatype == "url" ? new WebsiteCellRenderer() : a.datatype == "datetime" ? new DateTimeCellEditor() : new CellRenderer();

Tu affectes au renderer un DateTimeCellEditor, qui ne possède pas de fonction render, d'où l'erreur que tu obtiens.

Idéalement, il faut que tu définisses un DateTimeCellRenderer, et que tu l'affectes correctement dans la ligne précédente.

A+

**zazze69** · 05/07/2013, 18h19

Bonjour,

Merci pour la réponse !

j'ai ajouter ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function DateTimeCellRenderer(a) {
    this.init(a)
}
DateTimeCellRenderer.prototype = new CellRenderer;
DateTimeCellRenderer.prototype.render = function (a, c) {
    var b = this.editablegrid.checkDate(c);
    if (typeof b == "object") {
        a.innerHTML = b.formattedDate
    } else {
        a.innerHTML = c
    }
};

Je n'ai plus l'erreur mais ça ne fonctionne pas plus. Quand je clique dans la cellule, c'est comme si c'était un input simple, je n'ai même pas le datepicker.

Merci.

Ajouter l'add-on timepicker au datepicker jquery dans editablegrid.js

jQuery

Vue hybride

Discussions similaires

Partager

Partager