Question

我通过点击不同的（铅笔图标）DOM对象切换可编辑。这适用于简单的text值，现在我需要一个select框，最好是select2下拉列表。

在所有其他字段和常规选择下拉列表中，我使用以下内容：

$('.edit-last_name').click(function(e){    
  e.stopPropagation();
  $('#last_name').editable('toggle');
});

对于select 2下拉列表，我需要将aditional params传递给editable，但我不知道如何操作，下面的代码不起作用。（该元素未被触发）

$('.edit-country').click(function(e){    
    e.stopPropagation();
    $('#country').editable({
      toggle: 'show', 
      select2: {
        width: 200,
        placeholder: 'Select country',
        allowClear: true
      }
    })
});

这是html：

<div class="row edit-line">
    <div class="col-md-3 col-xs-4">
        <strong>@lang('user.country')</strong>
    </div>
    <div class="col-md-6 col-xs-8 text-right">
        <span id="country" class="edit-field" data-type="select" data-source="{{ route('countries') }}" data-value="{{ $user->country }}" data-pk="{{ $user->id }}" data-url="{{ action('UsersController@update') }}" data-title="@lang('user.country')">{{ Countries::getOne($user->country, App::getLocale(), 'cldr'); }}</span>
    </div>
    <div class="col-md-3 text-muted hidden-xs">
        <a href="#" class="edit-country text-muted text-no-underline small"><i class="fa fa-pencil"></i> @lang('general.edit')</a>
    </div>
</div>

事实上它并没有专门针对select2，我只是不知道如何将params传递给editable。

Answer 1

您应该在Click事件之外将editable绑定到您的输入。当用户点击时，您可以切换可编辑的内容。

基于这个问题：X - editable input editable on click on other element，您的javascript将是：

$(document).ready(function() {
    // in case you don't want the modal
    $.fn.editable.defaults.mode = 'inline';

    // bind x-editable on DOM ready
    $('#country').editable({
        source: [
            {id: 'gb', text: 'Great Britain'},
            {id: 'us', text: 'United States'},
            {id: 'ru', text: 'Russia'}
        ],
        // change this from 'show' to 'manual'
        toggle: 'manual',
        select2: {
            width: 200,
            placeholder: 'Select country',
            allowClear: true
        }
    });

    // on element click
    $('.edit-country').click(function(e){
        e.stopPropagation();
        // toggle x-editable
        $('#country').editable('toggle');
    });
});

这是working jsfiddle。

使用x-editable切换select2

1 个答案: