web-dev-qa-db-fra.com

Montage en ligne datatable sans plugin éditeur

J'utilisais le plugin 'editor' pour la table de données et voici le code:

Éditeur de table de données défini comme suit: 

        editor = new $.fn.dataTable.Editor( {
        ajax: '/contact/' + Contact.id,
        table: "#contact-datatable",
        fields: [ {
                    name: "id",
                  }, {
                    name: "category",
                    type: "check",
                    options: [
                              { label: 'Science', value: "Science" },
                              { label: 'Maths', value: 'Maths' },
                              { label: 'Economics', value: 'Economics' },
                             ]
                 }
                    ................
              ]
    });

.....

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
            } );

Joindre la page avec ceci: Lorsque nous cliquons sur Catégorie, un menu déroulant s’affiche pour le modifier (à l’aide du plugin éditeur).

Mais le problème est que le plug-in d'éditeur de datatables n'est pas opensource et que mon projet n'autorise aucun plugin payant.

Quelqu'un peut-il m'aider s'il vous plaît pour l'édition en ligne dans des tables de données avec notre plugin 'editor'?

Voici le code que j'ai écrit sans éditeur:

Contact.dataTable = $('#contact-datatable').dataTable( {
        "ajax": {
                "url" : '/Contact/list/' + Contact.id,
                "dataSrc": function(check) {
                   check.id = Contact.id;
                   return json.check;
                  },
                },
            "responsive": true,
            "order": [],
            "columns": [
                { "data": "id"},
                { "data": "category" },
                { "data": "course" },
                ]
        } );

La catégorie et le cours seront une liste déroulante - et ceci doit être édité en ligne. Ci-dessous, un exemple de page.

J'ai besoin de 'Catégorie' en tant que liste déroulante d'éditeur en ligne, puis il y aura un bouton pour enregistrer  enter image description here

 enter image description here

javascriptdrop-down-menudatatableseditor
17
Futuregeek

Rock datatables! Et SpryMedia nous a laissé jouer avec elle gratuitement! Je ne suis pas tout à fait sûr d'avoir utilisé le plugin Editor en dépit de l'avoir acheté, mais je suis heureux d'avoir contribué à son développement d'une manière ou d'une autre. L'une des principales raisons pour lesquelles je n'ai pas utilisé le plugin, c'est parce que j'étais trop superficielle pour le payer pendant un moment, alors j'ai écrit mes propres versions et ce n'est vraiment pas si difficile. Les étapes sont assez simples:

  • Détecter un clic sur la ligne (c'est déjà fait)
  • Récupère les données de la ligne (pas du tout difficile)
  • Remplir un formulaire avec ces données (probablement dans un modal)
  • Mettre à jour le serveur avec les nouvelles valeurs une fois le formulaire soumis
  • Mettre à jour la ligne une fois le serveur mis à jour

Le plugin facilite tout cela et vous permet également de comprendre le backend. Les étapes ci-dessus ne sont pas si difficiles, mais je n'ai rien trouvé qui fasse tout pour vous, à l'exception du plug-in Editor. Suivez les étapes et vous y arriverez.

20
annoyingmouse

J'ai écrit mon propre code pour l'édition en ligne et l'ai conçu de sorte que vous puissiez éditer la ligne complète et définir les colonnes que vous souhaitez modifier par l'utilisateur.

ici: https://github.com/sinhashubh/datatable-examples

Étapes à suivre:

  1. Gérez le clic même sur la ligne/cellule sur laquelle vous avez cliqué.

               $("#dtexample tbody").on('click', 'tr td', function (e) {
                RoweditMode($(this).parent());
            });

        function RoweditMode(rowid) {
            var prevRow;
            var rowIndexVlaue = parseInt(rowid.attr("indexv"));
            if (editIndexTable == -1) {
                saveRowIntoArray(rowid);
                rowid.attr("editState", "editState");
                editIndexTable = rowid.rowIndex;
                setEditStateValue(rowid, rowIndexVlaue + 2);
            }
            else {
                prevRow = $("[editState=editState]");
                prevRow.attr("editState", "");
                rowid.attr("editState", "editState");
                editIndexTable = rowIndexVlaue;
                saveArrayIntoRow(prevRow);
                saveRowIntoArray(rowid);
                setEditStateValue(rowid, rowIndexVlaue + 2);
            }
        }
       function saveRowIntoArray(cureentCells) {
            $.each(ColumnData, function (index, element) {
                if (element.Editable == true) {
                    var htmlVal = $($(cureentCells).children('.' + element.Name)[0]).html();
                    EditRowData[element.Name] = htmlVal;
                }
            });
        }
        function setEditStateValue(td1, indexRow) {
            for (var k in EditRowData) {
                $($(td1).children('.' + k)[0]).html('<input value="' + EditRowData[k] + '" class="userinput"  style="width: 99% " />');
            }
        }

  2. En appuyant sur Entrée après avoir entré quoi que ce soit, reliez entrée entrée (vous pouvez le changer pour éventuellement un bouton de sauvegarde à votre guise).

        $("#dtexample tbody").on('keyup', 'input.userinput', function (e) {
                if (e.keyCode == 13) {
                         updateRowData(this.parentNode.parentNode);
                }
            });

  3. Fonction de mise à jour pour appeler le serveur avec des paramètres.

             function updateRowData(currentCells) {
            var table = $("#dtexample").DataTable();
            var row = table.row(currentCells);
            rowid = currentCells.getAttribute('id');
            var UpdateRowData = [];
            $.each(ColumnData, function (index, element) {
                if (element.Editable==true) {
                    UpdateRowData.Push({
                        'pname': element.Name , 'pvalue': $($($(currentCells).children('.' + element.Name)).children('input')[0]).val()
                    });
                }
            });
            console.log(UpdateRowData);
            UpdateRowData.Push({ 'pname': 'rowid', 'pvalue': rowid });
            var parameter = "";
            for (i = 0; i < UpdateRowData.length; i++) {
                if (i == UpdateRowData.length - 1)
                    parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue;
                else
                    parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue + "&";
            }
            $.ajax({
                type: 'POST',
                url: '/WebService.asmx/UpdateTableData',
                data: parameter,
                success: function (data) {
                    var table = $('#dtexample').DataTable();
                    table.draw('page');
                }
            });
        }
0
shubham