Edición en línea de Datatable sin complemento de editor

Nuestro grupo especializado despúes de varios días de trabajo y de recopilar de datos, obtuvimos los datos necesarios, esperamos que te sea útil en tu proyecto.

Solución:

¡Las tablas de datos son increíbles! ¡Y SpryMedia nos dejó jugar con él gratis! No estoy 100% seguro de haber usado el complemento del editor a pesar de haberlo comprado, pero me complace haber contribuido a su desarrollo de alguna manera. Una de las principales razones por las que no he usado el complemento es porque era demasiado escasa para pagarlo por un tiempo, así que escribí mis propias versiones y eso no es tan difícil. Los pasos son bastante sencillos:

• Detectar haga clic en la fila (ya ha hecho esto)
• Obtener los datos de la fila (nada difícil)
• Complete un formulario con esos datos (probablemente dentro de un modal)
• Actualice el servidor con los nuevos valores una vez que se envía el formulario
• Actualice la fila una vez que se haya actualizado el servidor

El complemento hace todo eso fácil y le permite descubrir el backend también. Los pasos anteriores no son tan difíciles, pero no me he encontrado con algo que lo haga todo por usted, excepto el complemento del editor. Siga los pasos y llegará allí.

Escribí mi propio código para editar en línea y lo hice de manera que pueda editar la fila completa y definir las columnas que desea que el usuario pueda editar.

aquí: https://github.com/sinhashubh/datatable-examples

Pasos para hacer esto:

1. Manejar haga clic incluso en la fila / celda en la que se hizo clic.

              $("#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('');
               
           
   

2. Al presionar Enter después de ingresar cualquier cosa, vincule la entrada de entrada (puede cambiarla a tal vez un botón de guardar como desee.

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

3. Función de actualización para realizar llamadas al servidor con parámetros.

            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');
                   
               );
           
   

---

---

Utiliza Nuestro Buscador