Personnaliser son widget Grille Editable : changer le comportement d'une case de l'affichage d'une simple donné à l'affichage d'une liste de données

Submitted by maha.ezine on Tue, 04/28/2015 - 11:57
1
0
-1

Bonjour à tous , Actuellement, je travaille sur la version Open source de Bonita 6.4.2 pour la réalisation de mon projet de fin d'étude et je fais face à un problème auquel je trouve pas d'issu . En faite je dispose d'un formulaire contenant un widget Grille éditable dans laquelle l'utilisateur saisie des données qui seront transportées à une BD Mysql , à ce stade là tout marche à merveille rien que une nouvelle contrainte m'est survenu : je devrai peupler les cases de la première colonne d'une liste de valeurs depuis ma base de données de façon à ce que lorsqu'un utilisateur clique dessus cette liste se défile ( le même comportement que le widget Sélection ) mais à l'intérieure d'une table .

Merci d'avance pour vos idées Cordialement

1 answer

Submitted by yannick.lombardi on Tue, 04/28/2015 - 13:59
1
0
-1

Bonjour. J'ai eu le même problème lors de mon projet et j'ai opté pour une solution utilisant Javascript. J'ai abandonné l'idée d'utiliser le widget "Grid" de base car il ne permet pas de faire grand chose. Et du coup j'ai crée mon propre widget à partir d'un widget HTML. Pour cela j'ai utilisé la libraire javascript DataTables (mais elle sert surtout pour d'autres fonctionnalités) et j'ai ajouté ce bout de code :

<script>
        // Fonction permettant de modifier les donnees d'une case
        editer = function (td) {
                var OriginalContent = td.textContent;

                td.innerHTML="<input type='text' value='" + OriginalContent + "' onblur='onBlur($(this).context);' style='width: 100%;' />";
                td.firstChild.focus();

                // Change les données de la case lorsqu'on valide avec la touche "Entree"
                td.firstChild.onkeypress =function (e) {
                        if (e.which == 13) {
                                var newContent = td.firstChild.value;
                                td.innerHTML = newContent;
                                $('#tableauSujet').dataTable().fnUpdate( newContent, td.parentElement._DT_RowIndex, td.cellIndex );
                                parcours();
                        }
                };

                // Change les données de la case lorsqu'elle perd le focus
                onBlur = function(input) {
                        var newContent = input.value;
                        var tdParent = input.parentElement;
                        tdParent.innerHTML = newContent;
                        $('#tableauSujet').dataTable().fnUpdate( newContent, td.parentElement._DT_RowIndex, td.cellIndex );
                        parcours();
                };
        }
</script>

Il est appelé lorsque je fais un double-clique sur une case "td" de mon tableau.

J'ai ensuite une fonction "parcours" qui parcours le tableau pour en récupérer le contenu et le mettre dans un champ texte afin que je puisse le réutiliser dans mon processus.

EDIT : J'ai failli oublié la partie importante. Pour avoir une liste de donnée lorsque je modifie une case, il faut remplacer la ligne 6 par :

if(td.cellIndex == 1) {
                        td.innerHTML="<select onblur='onBlur($(this).context);'><option>PP</option><option>PT</option><option>EVF</option><option>EVT</option><option>BUG</option></select>";
                        td.firstChild.focus();
                }

Evidemment il est aussi possible de générer se script en utilisant du code Java de façon à remplir le tableau avec des données de Bonita.

Notifications