演示

Question

下面的示例完全有效

我可以使用铅笔和信封图标编辑和保存行。

我需要的是简单的：使用保存按钮而不是信封点击修改后能够保存行。

因此，如果我点击进行编辑，我将能够使用保存按钮保存编辑。

我应该可以使用表格下面的按钮保存编辑

// UIApplicationOpenSettingsURLString is available since iOS 8.0
NSString * defaultSettingsStr = ( &UIApplicationOpenSettingsURLString != NULL ? UIApplicationOpenSettingsURLString : @"prefs:root" );

// Array of possible URLs, differ in various iOS versions
NSArray * urlStrs = @[@"App-Prefs:root=TOUCHID_PASSCODE",
                 @"Prefs:root=TOUCHID_PASSCODE",
                 defaultSettingsStr];

for (NSString * urlStr in urlStrs) {
   NSURL * url = [NSURL URLWithString:urlStr];

   if ([[UIApplication sharedApplication] canOpenURL:url]) {
       // openURL is deprecated since iOS 10
       [[UIApplication sharedApplication] openURL:url];
       break;
   }
}

＆＃13;

<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>

＆＃13;

$(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'
    }]
  });

  $('#example').css('border-bottom', 'none');
  $('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');

  // 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();
  });
});

＆＃13;

div.addRow {
  line-height: 45px;
  background-color: #fff;
  padding-left: 10px;
  border-bottom: 1px solid;
  border-top: 1px solid #e5e5e5;
}

＆＃13;

Answer 1

我在按钮上添加了一个点击事件来定位所有信封图标元素，这样它甚至可以在一次点击中保存多行，同时删除按钮周围的一个href，并为其赋予一个id属性。

$('#savebutton').on('click', function () {
    $.each($('i.fa.fa-envelope-o', $('#example')), function (index, element) {
        $(element).removeClass().addClass("fa fa-pencil-square");
      var $row = $(element).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);
      });
    });
  });

$(document).ready(function() {
  var table;
  
  $('#savebutton').on('click', function () {
    $.each($('i.fa.fa-envelope-o', $('#example')), function (index, element) {
    	$(element).removeClass().addClass("fa fa-pencil-square");
      var $row = $(element).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", "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'
    }]
  });

  $('#example').css('border-bottom', 'none');
  $('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');

  // 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();
  });
});

div.addRow {
  line-height: 45px;
  background-color: #fff;
  padding-left: 10px;
  border-bottom: 1px solid;
  border-top: 1px solid #e5e5e5;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script>
<link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<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>

<table id="newRow" style="display:none">
  <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>

<br>

<div class="pull-right">
  <a href="dashboard.html">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  </a>
    <button id="savebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>

Answer 2

您可以将保存功能移动到自己的功能。

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

  $.each($tds, function(i, el) {
    $(this).html($(this).find('input').val());
  });
}

然后叫它：

$table.on('mousedown', 'i.fa.fa-envelope-o', function(e) {
  saveRow($(this)); // Pass save button to function.
});

$('#btn-save').on('click', function() {
  $table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) {
    saveRow($(button)); // Pass save button to function.
  });
});

修改

我将saveRow重命名为updateRow并添加了第二个参数（persist）。

现在，您可以使用此功能将编辑保存或还原为行或多行。

我在名为original-text的所有输入字段上设置了一个数据属性，用于存储原始文本。如果您想取消，它将使用此功能恢复原始文本。

演示

＆＃13;

var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
var options = [
  { key : 'option 1', value : 1 },
  { key : 'option 2', value : 2 },
  { key : 'option 3', value : 3 }
];

$(document).ready(function() {
  var $table = $('#example');
  var dataTable = null;

  $table.on('mousedown', 'td .fa.fa-minus-square', function(e) {
    dataTable.row($(this).closest("tr")).remove().draw();
  });

  $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) {
    enableRowEdit($(this));
  });

  $table.on('mousedown', 'input', function(e) {
    e.stopPropagation();
  });

  $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) {
    updateRow($(this), true); // Pass save button to function.
  });

  $table.on('mousedown', '.select-basic', function(e) {
    e.stopPropagation();
  });

  dataTable = $table.DataTable({
    ajax: dataUrl,
    rowReorder: {
      dataSrc: 'order',
      selector: 'tr'
    },
    columns: [{
      data: 'order'
    }, {
      data: 'place'
    }, {
      data: 'name'
    }, {
      data: 'delete'
    }]
  });

  $table.css('border-bottom', 'none')
        .after($('<div>').addClass('addRow')
          .append($('<button>').attr('id', 'addRow').text('Add New Row')));

  // Add row
  $('#addRow').click(function() {
    var $row = $("#new-row-template").find('tr').clone();
    dataTable.row.add($row).draw();
    // Toggle edit mode upon creation.
    enableRowEdit($table.find('tbody tr:last-child td i.fa.fa-pencil-square'));
  });

  $('#btn-save').on('click', function() {
    updateRows(true); // Update all edited rows
  });

  $('#btn-cancel').on('click', function() {
    updateRows(false); // Revert all edited rows
  });

  function enableRowEdit($editButton) {
    $editButton.removeClass().addClass("fa fa-envelope-o");
    var $row = $editButton.closest("tr").off("mousedown");

    $row.find("td").not(':first').not(':last').each(function(i, el) {
      enableEditText($(this))
    });

    $row.find('td:first').each(function(i, el) {
      enableEditSelect($(this))
    });
  }
  
  function enableEditText($cell) {
    var txt = $cell.text();
    $cell.empty().append($('<input>', {
      type : 'text',
      value : txt
    }).data('original-text', txt));
  }

  function enableEditSelect($cell) {
    var txt = $cell.text();
    $cell.empty().append($('<select>', {
      class : 'select-basic'
    }).append(options.map(function(option) {
      return $('<option>', {
        text  : option.key,
        value : option.value
      })
    })).data('original-value', txt));
}

  function updateRows(commit) {
     $table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) {
      updateRow($(button), commit);
    });
  }

  function updateRow($saveButton, commit) {
    $saveButton.removeClass().addClass('fa fa-pencil-square');
    var $row = $saveButton.closest("tr");

    $row.find('td').not(':first').not(':last').each(function(i, el) {
      var $input = $(this).find('input');
      $(this).text(commit ? $input.val() : $input.data('original-text'));
    });

    $row.find('td:first').each(function(i, el) {
      var $input = $(this).find('select');
      $(this).text(commit ? $input.val() : $input.data('original-value'));
    });
  }
});

＆＃13;

div.addRow {
  line-height: 45px;
  background-color: #fff;
  padding-left: 10px;
  border-bottom: 1px solid;
  border-top: 1px solid #e5e5e5;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script>
<link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<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>

<table id="new-row-template" style="display:none">
  <tbody>
    <tr>
      <td>999</td> <!-- Use a large number or row might be inserted in the middle -->
      <td>__NAME__</td>
      <td>__COUNTRY__</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>

<br>

<div class="pull-right">
  <button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>

＆＃13;

编辑后使保存按钮工作

2 个答案:

修改

演示