我使用bootstrap x-editable 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>
javascript代码:
$('.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-editable元素。
我已尝试使用jquery将a元素的data-type属性更改为text,但它不起作用。
$('a.addon').attr('data-type', 'text');
也尝试过:
$('a.addon').select2('destroy');
也尝试过:
$('a.addon').editable({type: 'text'});
但两种选择都不奏效。 select2仍处于活动状态。 如何删除x-editable的select2选项? 你能帮帮我吗
答案 0 :(得分:4)
您必须合并您尝试过的内容 - 销毁默认的X-editable实例,更改data-type
值,并在该元素上恢复X-editable。
最简单的实现/示例是:
$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'});
在实践中,当您重新应用X-editable作为文本时,您必须重新设置其他设置:
$('.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);
}
});
编辑:
我已经整理了一个演示,它可以反映您的设置,我可以告诉它,它似乎有效:
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>