web-dev-qa-db-fra.com

Ligne de modification des tables de données Jquery

J'utilise: jquery.dataTables.js de: https://datatables.net

Problème 1 - Le glisser-déposer ne fonctionne pas après que l'utilisateur a ajouté une nouvelle ligne

Ce dont j'ai besoin: rendre la ligne modifiable après avoir cliqué dans le crayon.

similaire à cet exemple: https://editor.datatables.net/examples/simple/inTableControls.html

html:

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td><select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">option 1</option>
          <option value="2">option 2</option>
          <option value="2">option 3</option>
        </select>
      </td>
      <td>DVap
       </td>
      <td>
       www</td>
      <td><i class="fa fa-pencil-square" aria-hidden="true"></i>
        <i class="fa fa-minus-square" aria-hidden="true"></i>  </td>
    </tr>
  </tbody>
</table>

jquery:

  $(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
  });

  $(document).ready(function() {
    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
    var table = $('#example').DataTable({
      ajax: url,
      rowReorder: {
        dataSrc: 'order',
      },
      columns: [{
        data: 'order'
      }, {
        data: 'place'
      }, {
        data: 'name'
      }, {
        data: 'delete'
      }],
      "initComplete": function(oSettings) {
        $(this).on('click', "i.fa.fa-minus-square", function(e) {
          table.row( $(this).closest('tr') ).remove().draw();
        });
      }
    });

    // add row
    $('#addRow').click(function() {
      //t.row.add( [1,2,3] ).draw();
      var rowHtml = $("#newRow").find("tr")[0].outerHTML
      console.log(rowHtml);
      table.row.add($(rowHtml)).draw();
    });
  });

jsfiddle: http://jsfiddle.net/5L2qy092/5/

javascriptjquerydatatables
5
raduken

Maintenant, vous pouvez glisser-déposer avec toutes les lignes et pas seulement le premier td.
La modification est également intégrée au tableau. Je crois que c'est ce que vous vouliez: WORKING DEMO.

<script>
    $(document).ready(function() {

      var table;

      $("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
        table.row($(this).closest("tr")).remove().draw();
      })

      $("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {

        $(this).removeClass().addClass("fa fa-envelope-o");
        var $row = $(this).closest("tr").off("mousedown");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).text();
          $(this).html("").append("<input type='text' value='" + txt + "'>");
        });

      });

      $("#example").on('mousedown', "input", function(e) {
        e.stopPropagation();
      });

      $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {

        $(this).removeClass().addClass("fa fa-pencil-square");
        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val()
          $(this).html(txt);
        });
      });


       $("#example").on('mousedown', "#selectbasic", function(e) {
        e.stopPropagation();
      });


      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
      table = $('#example').DataTable({
        ajax: url,
        rowReorder: {
          dataSrc: 'order',
          selector: 'tr'
        },
        columns: [{
          data: 'order'
        }, {
          data: 'place'
        }, {
          data: 'name'
        }, {
          data: 'delete'
        }]
      });

      // add row
      $('#addRow').click(function() {
        //t.row.add( [1,2,3] ).draw();
        var rowHtml = $("#newRow").find("tr")[0].outerHTML
        console.log(rowHtml);
        table.row.add($(rowHtml)).draw();
      });
    });
  </script>
8
Offir Pe'er

Je vous donne un moyen simple de le faire:

<div id="dialog" title="Basic dialog">


</div>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td><select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">option 1</option>
          <option value="2">option 2</option>
          <option value="2">option 3</option>
        </select>
      </td>
      <td>DVap
       </td>
      <td>
       www</td>
      <td><i class="fa fa-pencil-square" aria-hidden="true"></i>
        <i class="fa fa-minus-square" aria-hidden="true"></i>  </td>
    </tr>
  </tbody>
</table>



$(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
  });

  $(document).ready(function() {
    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
    var table = $('#example').DataTable({
      ajax: url,
      rowReorder: {
        dataSrc: 'order',
      },
      columns: [{
        data: 'order',
        type: 'text'
      }, {
        data: 'place',
        type: 'text',
        edit: true
      }, {
        data: 'name',
        type: 'text',
        edit: true
      }, {
        data: 'delete',
        type: 'text'
      }],
      "initComplete": function(oSettings) {
        $(this).on('click', "i.fa.fa-minus-square", function(e) {
          table.row( $(this).closest('tr') ).remove().draw();
        });


        $(this).on('click', 'i.fa.fa-pencil-square', function(e){
            var rowData = table.row($(this).closest('tr')).data();
          var columns = table.settings().pop().aoColumns;
          var column = columns[table.column($(this).closest('td')).index()];
          var rowIndex = table.row($(this).closest('tr')).index();

          var html = '<form id="form">';
          for(var col in columns){
            if(columns[col].type === 'text' && columns[col].edit){
              html += '<input type="text" value="'+rowData[columns[col].data]+'" name="'+columns[col].data+'" placeholder="'+columns[col].data+'"/><br />';
            }
          }

          html += '<input type="hidden" name="rowIndex" id="rowIndex" value="'+rowIndex+'" />';
          html += '<input type="submit" id="update"/></form>';
          $('#dialog').html(html);
          $( "#dialog" ).modal();
        });

      }
    });

    $('body').on('click', '#update', function(e) {
        e.preventDefault();
        var data = $('#form').serializeArray();
      var rowIndex = $('#rowIndex').val();
      var rowData = table.row(rowIndex).data();
      var newData = {};

      newData['order'] = rowData['order'];
      newData['delete'] = rowData['delete'];

      for(var d in data){
        newData[data[d]['name']] = data[d]['value'];
      }

      table
          .row(rowIndex)
          .data(newData)
          .draw();
    });
  });

http://jsfiddle.net/5L2qy092/7/

1
rad11

J'ai utilisé ce code pour modifier ou mettre à jour un index de ligne spécifique sur DataTable en utilisant Modal dans lequel c'est une section différente de ma page. La plupart des exemples de points lorsque vous cliquez sur une partie de votre table de données, à partir de là, vous pouvez la mettre à jour. Malheureusement, je dois le mettre à jour en utilisant Modal of Bootstrap:

var table = $('#tblSchedule').DataTable();

    table.row($('#hdnRowClicked').val()).data([
                "Tiger Nixon",
                "System Architect",
                "$3,120",
                "2011/04/25",
                "Edinburgh",
                "5421",
                "Tiger Nixon",
                "System Architect",
                "$3,120",
                "<p>Hello</p>"
            ]).draw();

Pour obtenir l'index des lignes, j'ai enregistré l'index des lignes chaque fois que quelqu'un clique sur mon bouton d'édition avec la classe btn-edit en utilisant l'élément de balise caché avec un ID de htnRowClicked:

$('#tblRecord .btn-edit').click(function () {
        $('#hdnRowClicked').val($(this).parents('tr').index());
    });
1
Willy David Jr