文章/答案/技术大牛

发布

问动态表-车展
EN

Stack Overflow用户

提问于 2018-10-08 16:42:50

回答 4查看 349关注 0票数 7

我有下面的代码来编辑表中的行字段，但是我希望它更加动态，也就是说，当编辑一个字段时，它会跳转到我将要编辑的下一个字段。我有一个成功的函数，我应该跳到下一个字段来编辑项目，但是我不知道为什么它不工作。

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

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

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

javascript

html

twitter-bootstrap-3

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-10-11 13:34:48

我刚把$(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>

我认为您的错误出现是因为没有默认值，首先尝试更改项，然后更改代码段中的文本。

票数 5

Stack Overflow用户

发布于 2018-10-11 12:37:15

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

票数 1

Stack Overflow用户

发布于 2018-10-11 13:52:46

请再试一次这个。这将帮助你:)

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52706726

复制

相似问题

问动态表-车展
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态表-车展EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态表-车展
EN