부트 스트랩 x 편집 가능. 변경 데이터 형식 프로그래밍 (제거 선택 2 데이터 형) 난

Question

사용하여 부트 스트랩 X-편집 https://vitalets.github.io/x-editable/index.html

이 내 HTML 코드입니다 :

<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}" 
    data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a> 

자바 스크립트 코드 :

$('.addon').editable({ 
    placement: 'bottom', 
    mode: 'inline', 
    showbuttons: false, 
    source: categories, 
    select2: { 
     width: 200 
    }, 
    display: function (value) { 
     var elem = $.grep(categories, function (o) { 
      return o.id == value; 
     }); 

     $(this).attr('data-value', value); 
     $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit'); 

     return $(this).text(elem[0].text); 
    } 
}); 

그러나. select2 옵션없이 프로그래밍 방식으로 일반 x 편집 가능 요소로 변경하려고합니다.

jquery를 사용하여 a 요소의 데이터 유형 특성을 텍스트로 변경하려고 시도했지만 작동하지 않습니다.

$('a.addon').attr('data-type', 'text'); 

는 또한 시도 :

또한 시도

$('a.addon').select2('destroy'); 

:

는

$('a.addon').editable({type: 'text'}); 

그러나 어느 옵션이 작동합니다. select2는 여전히 활성화되어 있습니다. x-editable의 select2 옵션을 제거하려면 어떻게해야합니까? 은 당신이 나를 도와 드릴까요하시기 바랍니다

Answer 1

당신이 시도한 것들이 결합해야합니다 - 기본 X-편집 가능한 인스턴스를 파괴를 data-type 값을 변경하고 해당 요소에 X가 편집 할 복원.

가장 간단한 구현/예는 다음과 같습니다

$('.addon').editable('destroy'); 
$('.addon').data('type', 'text'); 
$('.addon').editable({ 
       placement: 'bottom', 
       mode: 'inline', 
       showbuttons: false, 
       source: categories, 
       type: 'text', 
       display: function (value) { 
        var elem = $.grep(categories, function (o) { 
         return o.id == value; 
        }); 
        $(this).attr('data-value', value); 

        $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit'); 
        return $(this).text(elem[0].text); 
       } 
      }); 

: 당신은 텍스트로 X-편집을 다시 적용 할 때

$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'}); 

실제로, 당신은 다시 다른 설정을 넣어해야합니다

편집 :

내가 함께 내가 말할 수있는 최선로 설정을 반영 데모를 넣었습니다 작동하는 것 같다 :

,

var categories = [{ 
 
    id: 'html', 
 
    value: 'html', 
 
    text: 'html' 
 
}, { 
 
    id: 'javascript', 
 
    value: 'javascript', 
 
    text: 'javascript' 
 
}]; 
 

 
setupSelect2(); 
 

 
$('#useSelect2').click(function() { 
 
    $('.addon') 
 
    .data('type', 'select2') 
 
    .editable('destroy'); 
 

 
    setupSelect2(); 
 
}); 
 

 
$('#useText').click(function() { 
 
    $('.addon') 
 
    .data('type', 'text') 
 
    .editable('destroy'); 
 

 
    setupText(); 
 
}); 
 

 
function setupSelect2() { 
 
    $('.addon').editable({ 
 
    mode: 'inline', 
 
    placement: 'bottom', 
 
    showbuttons: false, 
 
    source: categories, 
 
    select2: { 
 
     width: 200 
 
    }, 
 
    display: function(value) { 
 
     var elem = $.grep(categories, function(o) { 
 
     return o.id == value; 
 
     }); 
 

 
     $(this).attr('data-value', value); 
 

 
     if (elem[0]) 
 
     return $(this).text(elem[0].text); 
 
    } 
 
    }); 
 
} 
 

 
function setupText() { 
 
    $('.addon').editable({ 
 
    mode: 'inline', 
 
    placement: 'bottom', 
 
    type: 'text', 
 
    showbuttons: false, 
 
    source: categories, 
 
    display: function(value) { 
 
     var elem = $.grep(categories, function(o) { 
 
     return o.id == value; 
 
     }); 
 

 
     $(this).attr('data-value', value); 
 

 
     if (elem[0]) 
 
     return $(this).text(elem[0].text); 
 
    } 
 
    }); 
 
}

<script src="https://vitalets.github.io/x-editable/assets/jquery/jquery-1.9.1.min.js"></script> 
 
<link href="https://vitalets.github.io/x-editable/assets/select2/select2.css" rel="stylesheet" /> 
 
<script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script> 
 
<link href="https://vitalets.github.io/x-editable/assets/bootstrap300/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://vitalets.github.io/x-editable/assets/bootstrap300/js/bootstrap.js"></script> 
 
<link href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> 
 
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script> 
 
<link href="https://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css" rel="stylesheet" /> 
 

 
<h3>Select 2</h3> 
 
<a href="#" class="addon" data-type="select2" data-pk="1" data-title="Enter tags"></a> 
 
<br> 
 
<br> 
 
<button id="useSelect2" class="btn btn-default">Use Select2</button> 
 
<button id="useText" class="btn btn-default">Use Text</button>