Question

我有此表，其中显示带有选项的选择，但是单击此表时不会立即显示该列表。我必须单击输入，然后显示列表。

如何一键自动显示列表？我正在使用x-editable

$('#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) {
    
           $(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",
        source: ITEM,
          select2: {
            width: 300,
            placeholder: 'Item',
            allowClear: true
            },
        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>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.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="select2">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="select2">Item1</td>
  </tr>
  </tbody>
</table>

我希望我已经解释清楚了。问候！

Answer 1

据我了解，您需要添加data-value属性，我相信没有其他方法。

$('#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) {
    
           $(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" data-value="Item2">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" data-value="Item1">Item1</td>
  </tr>
  </tbody>
</table>

Answer 2

您可以创建自己的数据类型：example。

或者您可以做的另一件事，即不会立即显示列表，但麻烦一些：使选择内联。将选择数据类型的可编辑内容更改为此：

$('#table').editable({
    container: 'body',
    selector: 'td.Item',
    title: 'Item',
    type: "POST",
    mode: 'inline',
    showbuttons: false,
    source: ITEM,
    validate: function(value) {
        if ($.trim(value) == '') {
            return 'Empty!';
        }
    }
});

添加了mode:'inline'

Answer 3

select2版本4出现问题，表明我们不能再使用input标签。

建议使用<select>元素documentation作为参考。

另一个link可能对您有帮助

Answer 4

版本4中的select2.min.js存在问题。因此，您需要替换波纹管链接

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

与

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>

自动显示选项

4 个答案: