表格上的多个表格可编辑

要么liptos

我正在使用可编辑插件来进行就地编辑

这是我从他们的“文档”页面获取的代码,应该用于添加新记录,但是我想使用它来修改记录)

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

   //init editables 
   $('.myeditable').editable({
      url: '/post',
      placement: 'right'
   });

   //make username required
   $('#new_username').editable();

   //automatically show next editable
   $('.myeditable').on('save.newuser', function(){
       var that = this;
       setTimeout(function() {
           $(that).closest('td').next().find('.myeditable').editable('show');
       }, 500);
   });

   //create new user
   $('#save-btn').click(function() {
       $('.myeditable').editable('submit', { 
           url: '/newuser', 
           ajaxOptions: {
               dataType: 'json' //assuming json response
           },           
           success: function(data, config) {
               if(data && data.id) {  //record created, response like {"id": 2}
                   //set pk
                   $(this).editable('option', 'pk', data.id);
                   //remove unsaved class
                   $(this).removeClass('editable-unsaved');
                   //show messages
                   var msg = 'New user created! Now editables submit individually.';
                   $('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
                   $('#save-btn').hide(); 
                   $(this).off('save.newuser');                   
               } else if(data && data.errors){ 
                   //server-side validation error, response like {"errors": {"username": "username already exist"} }
                   config.error.call(this, data.errors);
               }               
           },
           error: function(errors) {
               var msg = '';
               if(errors && errors.responseText) { //ajax error, errors = xhr object
                   msg = errors.responseText;
               } else { //validation error (client-side or server-side)
                   $.each(errors, function(k, v) { msg += k+": "+v+"<br>"; });
               } 
               $('#msg').removeClass('alert-success').addClass('alert-error').html(msg).show();
           }
       });
   }); 

   //reset
   $('#reset-btn').click(function() {
       $('.myeditable').editable('setValue', null)
                       .editable('option', 'pk', null)
                       .removeClass('editable-unsaved');

       $('#save-btn').show();
       $('#msg').hide();                
   });
});
</script>

这是HTML

<tr>

      <td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">adel</a></td>
      <td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description"></a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location"></a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website"></a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td>
      <td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>

   </tr>

<tr>
      <td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">sdqsd</a></td>
      <td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description"></a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location"></a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website"></a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td>
      <td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>

   </tr>

<tr>

      <td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">dzadz</a></td>
      <td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description">from me with love</a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location">anywhere</a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website">http://justawebsite.com</a></td>
      <td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td>
      <td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
   </tr>

现在一切正常,除非我编辑前两行之一并单击“确定”,它会发送最后一张表格的详细信息,http://justawebsite.com有时它什么也没发送,这确实搞砸了,我花了很多时间阅读文档,但我无法解决问题

维珍妮

就像我在评论中说的那样,您具有相同ID的不同元素,因此选择器将不起作用(ID必须是唯一的)。将它们放在类中:

  <tr>
    <td>
      <a href="#" class="myeditable new_username" data-type="text" data-name="name" data-original-title="Enter name">adel</a>
    </td>
    <td>
      <a href="#" class="myeditable description" data-type="textarea" data-name="description" data-original-title="Enter Description"></a>
    </td>
    <td>
      <a href="#" class="myeditable location" data-type="text" data-name="location" data-original-title="Enter Location"></a>
    </td>
    <td>
      <a href="#" class="myeditable website" data-type="text" data-name="website" data-original-title="Enter Website"></a>
    </td>
    <td>
      <a href="#" class="myeditable picture" data-type="text" data-name="picture" data-original-title="Enter Picture">
        <img src="" />
      </a>
    </td>
    <td width="10%">
      <button class="btn btn-primary btn-sm save-btn">Ok</button>
      <button class="btn btn-sm pull-right reset-btn">Reset</button>
    </td>
  </tr>

这是一个让您入门的小提琴https://jsfiddle.net/virginieLGB/k2of9xor/1/

在那儿,您会看到我已经选择了要提交的可编辑元素。

$('.save-btn').click(function() {
    var that = $(this);
    var allEditables = that.parents("tr").find(".myeditable"); // all ".myeditable" elements in the same "tr" as the ".save-btn" that was clicked on
    allEditables.each(function() {
        // here I've kept your code because I don't know what happens in your file, but maybe you need a bulk action
      $(this).editable('submit', { 
         ...

我不知道您的PHP文件如何工作,所以不知道您如何保存用户以及是否需要一次提交所有字段。如果是这样,您将不得不修改我的答案。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章