Question

我有以下代码，可以在其中编辑表中一行的字段，但是我希望它更具动态性，也就是说，当编辑一个字段时，它将跳转到下一个要编辑的字段。我有一个成功函数，我应该跳到下一个字段来编辑项目的内容，但是我不知道为什么它不起作用。

$('#table').editable({
        container: 'body',
        selector: 'td.task',
        title: 'task',
        type: "POST",
        showbuttons: false,
         type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        },  
        success: function(response) {
     //WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
           $(this).parent().find(".Item").click();
        }
    });
    var ITEM = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        ITEM.push({
            value: k,
            text: v
        });
    });
    
    $('#table').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: ITEM,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        }
    });

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" class="task" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" class="task" data-type="text">002</td>
  <td data-name="Item" class="Item" data-type="select">Item1</td>
  </tr>
  </tbody>
</table>

我在下一页上看到了一个示例。 link，您必须在编辑时按下复选框自动打开下一个字段，然后跳转到下一个要编辑的字段。我想要这样的东西，希望我已经很好地解释了自己。

更新：我在成功函数中添加了一行代码，但是选择给出了错误Error when loading list，并在表中创建了一个新的<tr> with <td>

Answer 1

我刚刚将$(this).parent().find(".Item").editable('toggle');更改为$(this).parent().find(".Item").click();

$('#table').editable({
        container: 'body',
        selector: 'td.task',
        title: 'task',
        type: "POST",
        showbuttons: false,
         type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        },  
        success: function(response) {
     //WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
           $(this).parent().find(".Item").click();
        }
    });
    var ITEM = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        ITEM.push({
            value: k,
            text: v
        });
    });
    
    $('#table').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: ITEM,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        }
    });

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" class="task" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" class="task" data-type="text">002</td>
  <td data-name="Item" class="Item" data-type="select">Item1</td>
  </tr>
  </tbody>
</table>

我认为您显示的错误是因为没有默认值，请先尝试更改项目，然后再更改代码段中的文本

Answer 2

$('#table').editable({
        container: 'body',
        selector: 'td.task',
        title: 'task',
        type: "POST",
        showbuttons: false,
         type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        },  
        success: function(response) {
          
           //CODE TO JUMP TO THE SELECT 
        }
    });
    var ITEM = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        ITEM.push({
            value: k,
            text: v
        });
    });
    
    $('#table').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: ITEM,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        }
    });

    $('#table .task').on('hidden', function(e, reason){
     
      if(reason === 'save' || reason === 'nochange') {
          var $next = $(this).closest('tr').next().find('.task');
        
        setTimeout(function() {
            $next.editable('show');
        }, 300);
      }
   });
   
   $('#table .Item').on('hidden', function(e, reason){
     
      if(reason === 'save' || reason === 'nochange') {
          var $next = $(this).closest('tr').next().find('.Item');
        
        setTimeout(function() {
            $next.editable('show');
        }, 300);
      }
   });

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" class="task" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" class="task" data-type="text">002</td>
  <td data-name="Item" class="Item" data-type="select">Item1</td>
  </tr>
  </tbody>
</table>

Answer 3

请再试一次。这将为您提供帮助：）

$('#table').editable({
  container: 'body',
  selector: 'td.task',
  title: 'task',
  type: "POST",
  showbuttons: false,
  type: 'text',
  validate: function(value) {
    if ($.trim(value) == '') {
      return 'Empty!';
    }
  },
  success: function(response) {

    //CODE TO JUMP TO THE SELECT 
  }
});
var ITEM = [];
$.each({
  "Item1": "Item1",
  "Item2": "Item2",
  "Item3": "Item3",
  "Item4": "Item4"
}, function(k, v) {
  ITEM.push({
    value: k,
    text: v
  });
});

$('#table').editable({
  container: 'body',
  selector: 'td.Item',
  title: 'Item',
  type: "POST",
  showbuttons: false,
  source: ITEM,
  validate: function(value) {
    if ($.trim(value) == '') {
      return 'Empty!';
    }
  }
});

$('#table .task').on('hidden', function(e, reason) {

  if (reason === 'save' || reason === 'nochange') {
    $(this).parent().find(".Item").click();
  }
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td data-name="task" class="task" data-type="text">001</td>
      <td data-name="Item" class="Item" data-type="select">Item2</td>
    </tr>
    <tr>
      <td>2</td>
      <td data-name="task" class="task" data-type="text">002</td>
      <td data-name="Item" class="Item" data-type="select">Item1</td>
    </tr>
  </tbody>
</table>

Answer 4

非常感谢，由于您已链接到工作示例，因此我能够检查代码。顺便说一下，您可以通过在浏览器中打开开发人员工具来做到这一点。我使用的是Chrome，所以对我来说只是F12。在源代码中，我发现了以下内容：

   $('#user .editable').on('hidden', function(e, reason){
        if(reason === 'save' || reason === 'nochange') {
            var $next = $(this).closest('tr').next().find('.editable');
            if($('#autoopen').is(':checked')) {
                setTimeout(function() {
                    $next.editable('show');
                }, 300); 
            } else {
                $next.focus();
            } 
        }
   });

代码读起来几乎像英文，所以我认为很容易理解。关闭编辑器后，我们首先检查关闭它的原因。如果选中了“自动打开下一个文本字段”，则代码将找到下一个字段并弹出打开编辑器的窗口。有趣的是在这里看到这是通过超时完成的，而不是仅仅调用$next.editable('show');这可能很重要，或者只是为了显示。

在您的代码中，您将希望能够找到一些用于项目的统一选择器。我认为，最简单的方法是在原始来源中添加一个.editable，然后像在演示中一样调用它。

因此，对于您的HTML：

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" class="editable task" data-type="text">001</td>
  <td data-name="Item" class="editable Item" data-type="select">Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" class="editable task" data-type="text">002</td>
  <td data-name="Item" class="editable Item" data-type="select">Item1</td>
  </tr>
  </tbody>
</table>

在td标签上注意添加的类。（编辑：derp，没有注意到已经有一个类属性）

然后，您可以模拟演示js代码，但请注意此处，因为不能以相同的方式选择$next变量。您的DOM布局不同，因为一行中有多个可编辑单元格：

   $('#table .editable').on('hidden', function(e, reason){
        if(reason === 'save' || reason === 'nochange') {
            var $next = $(this).nextAll().find('.editable');
            if ($next.length > 0) {
                $next = $next[0];
            } else {
                $next = $(this).closest('tr').next().find('.editable');
                if ($next.length > 0) {
                    $next = $next[0];
                } else {
                    return; // No editable fields remaining.
                }
            }
            setTimeout(function() { $next.editable('show'); }, 300); 
        }
   });

我应该否认我没有测试以上内容，但这应该为您提供一个良好的起点。下一个字段的选择可能比我所拥有的要好得多，但是我只是没有测试环境来正确地进行检查。

编辑：我注意到，也许您只想移至选择字段，但不一定要从选择移至下一行。在这种情况下，代码要简单一些。

首先，不需要editable类，因此您可以使用已经拥有的html代码，但是在js中，您需要正确解决选择器：

   $('#table .task').on('hidden', function(e, reason){
        if(reason === 'save' || reason === 'nochange') {
            var $next = $(this).nextAll().find('.Item');
            setTimeout(function() { $next.editable('show'); }, 300); 
        }
   });

应该就是这样。当所选内容的编辑器关闭时，下一个字段将不会自动选择。

动态表格-自动显示

4 个答案: