数据表行中的两个 Select2，第二个在没有结果时显示“添加”按钮，但第一个不显示
问题描述 投票：0回答：1
我有一个数据表，每行包含两个 select2 用于自动完成产品和计量单位。此功能可以正常工作，但如果未找到结果，每个 select2 必须显示“添加”按钮以启动模式对话框以插入新产品或新计量单位。问题是第二个 select2 （度量单位列）按预期工作，但没有结果，但第一个不显示按钮。我的策略是在 Select2 语言定义中，利用
noResults我已经尝试过在
init.dtcreatedCellcreatedRow总结列定义：
"columnDefs": [
{
name: "productoFactura", "targets": 1, "searchable": false, "orderable": false, width: '300px',
render: function (data, type, full) {
return `<input type="hidden" class="input-csrf-token" name="detalle_factura__token" value="${full['detalle_factura__token']}"/><select name="detalle_factura_producto_producto" class="selector-producto form-control-sm d-none" ><option value="${data.id}" selected>${data.descripcion}</option></select>`;
}
},
{
name: "unidadDeMedida", "targets": 2, "searchable": false, "orderable": false, width: '150px',
render: function (data, type, full) {
return '<select name="detalle_factura_producto_unidad_de_medida" class="selector-unidadmedida form-control-sm d-none" ><option value="' + data.id + '" selected>' + data.descripcion + '</option></select>';
}
},
// rest of columns definition
],
创建行定义（注意：与createdCell结果相同，也在init.dt事件上）：
createdRow: function (row, data, dataIndex, cells) {
let tdProducto = $(row).find('td:eq(1)');
let tdUM = $(row).find('td:eq(2)');
$(row).find('select.selector-producto').select2({
theme: 'bootstrap4',
width: '299px',
dropdownParent: tdProducto,
minimumInputLength: 1,
delay: 400,
ajax: {
url: Routing.generate('producto_autocompletar'),
processResults: function (data) {
return data;
}
},
language: {
noResults: function (term) {
let g = $('#modalReader_contenedorForm').find('#prov').data('r');
if (g === '0') {
return "No hay resultados";
}
tdProducto.find('span.select2-results > ul.select2-results__options').append(`<li class="select2-results__options"><a class="btnProductoNuevo btn btn-block btn-default btn-xs text-secondary" data-src="${Routing.generate('producto_nuevo')}" data-mainform-name="producto" data-cerrar-dialogo="0" data-original-title="Registrar producto" data-modal-dialog-fullscreen="modal-fullscreen" data-modal-dialog-scrollable="modal-dialog-scrollable" data-modal-dialog-textsize="text-sm"><span class="fa fa-plus-circle"></span> Registrar producto</a></li>`).on('click', 'a.btnProductoNuevo', function (e) {
e.preventDefault();
e.stopPropagation();
var target = $(this);
const onCreateProductoFromFactura = function (data) {
let newOption = new Option(data.producto.nombre, data.producto.id, true, true);
tdProducto.find('select.selector-producto').append(newOption).trigger('change');
};//select2-search__field
secondModalFormV2(target, false, null, onCreateProductoFromFactura);
});
},
escapeMarkup: function (markup) {
return markup;
}
}
}).on('select2:select', function (e) {
let precio = e.params.data.precio;
let filaActual = $(tdProducto).parents('tr');
filaActual.find('input.input-precio:first').val(numberParser.parse(precio).toFixed(precisionPrecio));
recalcularImporteFila(filaActual);
recalcularSubtotalProductos(importeFormat);
});
$(row).find('select.selector-unidadmedida').select2({
theme: 'bootstrap4',
dropdownParent: tdUM,
placeholder: 'Unidad de Medidas',
width: '149px',
minimumInputLength: 1,
delay: 400,
ajax: {
url: Routing.generate('unidadDeMedida_autocompletar'),
processResults: function (data) {
return data;
}
},
language: {
noResults: function () {
let g = $('#modalReader_contenedorForm').find('#prov').data('r');
if (g === '0') {
return "No hay resultados";
}
tdUM.find('span.select2-results > ul.select2-results__options').append('<li class="select2-results__options"><a class="btnUnidadMedidaNuevo btn btn-block btn-default btn-xs' + (g === '0' ? 'disabled' : '') + ' text-secondary" data-src="' + Routing.generate('unidadDeMedida_nueva') + '" data-mainform-name="unidad_de_medida" data-cerrar-dialogo="1" data-original-title="Registrar Unidad de Medida"><span class="fa fa-plus-circle"></span> Agregar nueva</a></li>').on('click', 'a.btnUnidadMedidaNuevo', function (e) {
e.preventDefault();
e.stopPropagation();
var target = $(this);
const onUnidadDeMedidaCreated = function (data) {
let newOption = new Option(data.unidadDeMedida.texto, data.unidadDeMedida.id, true, true);
$(tdUM).find('select.selector-unidadmedida').append(newOption).trigger('change');
}
secondModalFormV2(target, false, null, onUnidadDeMedidaCreated);
});
}
}
});
}
请注意，第一个 Select2 的代码实际上与第二个 Select2 相同，只是在个别方面有一些细微的变化。
结果：
1个回答
0
投票
投票
确实，正如我在问题中提到的，使用 Select2 语言的定义并不理想，因为动态建立 select2 语言的选项丢失了，这在我的情况下也是必要的。因此，我使用
select2:openselect2:close所以，解决方案：
createdRow: function (row, data, dataIndex, cells) {
let tdProducto = $(row).find('td:eq(1)');
let tdUM = $(row).find('td:eq(2)');
$(row).find('select.selector-producto').select2({
theme: 'bootstrap4',
width: '299px',
dropdownParent: tdProducto,
minimumInputLength: 1,
delay: 400,
ajax: {
url: Routing.generate('producto_autocompletar'),
processResults: function (data) {
return data;
}
},
language: locale
}).on('select2:select', function (e) {
let precio = e.params.data.precio;
let filaActual = $(tdProducto).parents('tr');
filaActual.find('input.input-precio:first').val(numberParser.parse(precio).toFixed(precisionPrecio));
recalcularImporteFila(filaActual);
recalcularSubtotalProductos(importeFormat);
}).on('select2:open', function () {
var a = $(this).data('select2');
var tdUM = $(this).parents('td');
if (!$('.select2-link').length) {
a.$results.parents('.select2-results')
.append(`<li class="btnProductoNuevoLI select2-results__options"><a class="btnProductoNuevo btn btn-block btn-default btn-xs text-secondary" data-src="${Routing.generate('producto_nuevo_v2')}" data-mainform-name="producto" data-cerrar-dialogo="0" data-original-title="Registrar producto" data-modal-dialog-fullscreen="modal-fullscreen" data-modal-dialog-scrollable="modal-dialog-scrollable" data-modal-dialog-textsize="text-sm"><span class="fa fa-plus-circle"></span> Registrar producto</a></li>`).on('click', 'a.btnProductoNuevo', function (e) {
e.preventDefault();
e.stopPropagation();
var target = $(this);
const onCreateProductoFromFactura = function (data) {
let newOption = new Option(data.producto.nombre, data.producto.id, true, true);
tdProducto.find('select.selector-producto').append(newOption).trigger('change');
};
secondModalFormV2(target, false, null, onCreateProductoFromFactura);
a.trigger('close');
});
}
}).on('select2:close', function () {
var a = $(this).data('select2');
a.$results.parents('.select2-results').find('li.btnProductoNuevoLI').remove();
});
$(row).find('select.selector-unidadmedida').select2({
theme: 'bootstrap4',
dropdownParent: tdUM,
placeholder: 'Unidad de Medidas',
width: '149px',
minimumInputLength: 1,
delay: 400,
ajax: {
url: Routing.generate('unidadDeMedida_autocompletar'),
processResults: function (data) {
return data;
}
},
language: locale
}).on('select2:open', function () {
var a = $(this).data('select2');
var tdUM = $(this).parents('td');
if (!$('.select2-link').length) {
a.$results.parents('.select2-results')
.append('<li class="btnUnidadMedidaNuevoLI select2-results__options"><a class="btnUnidadMedidaNuevo btn btn-block btn-default btn-xs text-secondary" data-src="' + Routing.generate('unidadDeMedida_nueva') + '" data-mainform-name="unidad_de_medida" data-cerrar-dialogo="1" data-original-title="Registrar Unidad de Medida"><span class="fa fa-plus-circle"></span> Agregar nueva</a></li>').on('click', 'a.btnUnidadMedidaNuevo', function (e) {
e.preventDefault();
e.stopPropagation();
var target = $(this);
const onUnidadDeMedidaCreated = function (data) {
let newOption = new Option(data.unidadDeMedida.texto, data.unidadDeMedida.id, true, true);
$(tdUM).find('select.selector-unidadmedida').append(newOption).trigger('change');
}
secondModalFormV2(target, false, null, onUnidadDeMedidaCreated);
a.trigger('close');
});
}
}).on('select2:close', function () {
var a = $(this).data('select2');
a.$results.parents('.select2-results').find('li.btnUnidadMedidaNuevoLI').remove();
});
}
最新问题
- 如何匹配比赛中的枚举变体
- CI和CorePack
- 当设备受到远程控制时，有一种方法可以禁用Android应用中的触摸输入吗？
- 我想将此结构存储在容器中： 结构元素 { int _key; enum_type _type; double _value; }; _key用于插入时进行排序。 _ type应该区分键是否...
- 我有一些我想阅读的NDACC数据，以便我可以绘制图形。我已经下载了一个文件并将其命名
- elixir/phoenix测试GraphQL订阅通道柜和订阅柜设置
- 在Amazon S3和CloudFront上托管的Vue Quasar应用程序中的管理环境变量 我面临着在S3和CloudFront上托管的静态VUE Quasar应用中使用环境变量的问题。 虽然我确实知道静态网站不应该包括环境变量，但我是
- 如何使用Windows的格式而不选中？
- 与PEM和DER CERTIVET
- Visual Studio 2022社区：例外是由Invocation的目标提出的
- Sendgrid无法在应用程序中收到电子邮件 我正在尝试接收发送给我的帐户的电子邮件。 因此，我基本上拥有的是以下内容： 链接到http://www.rallypodium.be的SendGrid帐户 链接到HTTP的CloudFlare帐户：...
- 带有awk -linuxbash
- 我在朱莉娅（Julia）写了一个简单的“ Hello World”，但我无法弄清楚如何运行代码。我试图由
- /bin/bash：无效的选择： -
- Error摘要：
- 我正在尝试从S3存储桶中加载资产（字体）。 Firefox和IE上的字体需要在响应中返回访问控制 - 允许的原始标头。不幸的是，Chrome似乎没有发送“原点”请求标题。由于它没有发送原始请求标头，因此S3的CORS策略没有返回所需的访问控制 - 允许孔素。 the是从Chrome Inspector面板上屏幕截图的示例请求：
- 幽灵在规格文件中的rpm的目录？
- write delta编码的镶木文件
- 挑剔以更改印刷的正方形
- <code>group id</code>
© www.soinside.com 2019 - 2024. All rights reserved.