如何将Button添加到动态表格上的select2下拉列表中 [英] how to add Button to a select2 dropdown on a dynamic table
问题描述
我正在做一个动态表格,你可以添加/删除行,而Im使用select2来通过ajax搜索数据库上的项目,此刻,我想添加另一个按钮(添加新项目)到我的select2的输入框。它也在工作,但当我添加另一行时,前面的行将有2个(添加新项目)按钮,当我添加另一行时,我的输入框中发生了一些奇怪的事情。
-
不添加新行
添加新行后, -
/ p> without adding new rows
after adding new rows
$(document).ready(function(){
addRow();
});
addRow.js
var rowCount = document.getElementById('tblItemList')。rows.length - 1;
var rowArrayId = rowCount;
function addRow(){
var toBeAdded = document.getElementById('toBeAdded')。value;
if(toBeAdded =='')
{toBeAdded = 2; }
else if(toBeadded> 10)
{
toBeAdded = 10;
}
for(var i = 0; i var rowToInsert =';
rowToInsert =< tr>< td>< input id ='itemId+ rowArrayId +'name ='product [+ rowArrayId +] [name]'class ='form-control col-lg -5 itemSearch'type ='text'placeholder ='select item'/>< / td>;
$(#tblItemList tbody)。append(
rowToInsert +
< td>< textarea readonly name ='product [+ rowArrayId +] [description]'class =' form-control description'rows ='1'>< / textarea>< / td>+
< input type ='hidden'name ='product [+ rowArrayId +] [itemId ]'id ='itemId'>+
< td>< input type ='number'min ='1'max ='9999'name ='product [+ rowArrayId +] [quantity ]'class ='qty form-control'required />+
< input id ='poItemId'type ='hidden'name ='product [+ rowArrayId +] [poContentId]'> ;< / td>+
< td>< input type ='number'min ='1'step ='any'max ='9999'name ='product [+ rowArrayId +] [price]'class ='price form-control'required />< / td>+
< td class ='subtotal'>< center>< h3& h3>< / center>< / td>+
< input type ='hidd en'name ='product [+ rowArrayId +] [delete]'class ='hidden-deleted-id'>+
< td class ='actions'>< a href =' #'class ='btnRemoveRow btn btn-danger'> x< / a>< / td>+
< / tr>);
var rowId =#itemId+ rowArrayId;
$ b $(rowId).select2({
placeholder:'选择产品',
formatResult:productFormatResult,
formatSelection:productFormatSelection,
dropdownClass: 'bigdrop',
escapeMarkup:function(m){return m;},
minimumInputLength:1,
ajax:{
url:'/ api / productSearch',
dataType:'json',
data:函数(term,page){
return {
q:term
};
},
结果:function(data,page){
return {results:data};
}
}
});
rowArrayId = rowArrayId + 1;
};
$(。select2-drop)。append('< table width =100%>< tr>< td class =row>< button class =btn btn-block btn-default btn-xsonClick =modal()>添加新项目< / button>< / div>< / td>< / tr>< / table>' );
函数productFormatResult(product){
var html =< table>< tr>;
html + =< td>;
html + = product.itemName;
html + =< / td>< / tr>< / table>;
返回html;
}
function productFormatSelection(product){
var selected =< input type ='hidden'name ='itemId'value ='+ product.id +' />中;
返回selected + product.itemName;
$(.qty,.price)。bind(keyup change,calculate);
};
请帮我找到这个解决方案,一直试图解决这个问题,但我无法获得它工作。任何建议,答案和意见将真正赞赏。非常感谢你,祝你有美好的一天!
在我的例子中,我只是加了这个函数
formatNoMatches:function(term){
$('。select2-input')。on('keyup',function(e){
if .keyCode === 13)
{
$(#modalAdd)。modal();
$(。select2-input)。unbind(keyup);
}
});
return< li class ='select2-no-results'>+没有找到结果< button class ='btn btn-success pull-right btn-xs'onClick = 'modal()'>添加新项目< /按钮>< / li>;
}
Good day!
Im doing a Dynamic table which you can add/remove row, and Im using select2 to search Items on the database via ajax and its working well at the moment, then I want to add another button ("add new item") to my select2's input box. It was also working but when I add another row, the previous rows will have 2 (add new item) buttons on it, and when I add another row something weird is happening on my input box then.
Here is my code:
$(document).ready(function() {
addRow();
});
addRow.js
var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
var rowArrayId = rowCount ;
function addRow(){
var toBeAdded = document.getElementById('toBeAdded').value;
if (toBeAdded=='')
{ toBeAdded = 2; }
else if(toBeAdded>10)
{
toBeAdded = 10;
}
for (var i = 0; i < toBeAdded; i++) {
var rowToInsert = '';
rowToInsert = "<tr><td><input id='itemId"+rowArrayId+"' name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>";
$("#tblItemList tbody").append(
rowToInsert+
"<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
"<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'>"+
"<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
"<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
"<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
"<td class='subtotal'><center><h3>0.00</h3></center></td>"+
"<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
"<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
"</tr>");
var rowId = "#itemId"+rowArrayId;
$(rowId).select2({
placeholder: 'Select a product',
formatResult: productFormatResult,
formatSelection: productFormatSelection,
dropdownClass: 'bigdrop',
escapeMarkup: function(m) { return m; },
minimumInputLength:1,
ajax: {
url: '/api/productSearch',
dataType: 'json',
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
return {results:data};
}
}
});
rowArrayId = rowArrayId + 1;
};
$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
function productFormatResult(product) {
var html = "<table><tr>";
html += "<td>";
html += product.itemName ;
html += "</td></tr></table>";
return html;
}
function productFormatSelection(product) {
var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
return selected + product.itemName;
}
$(".qty, .price").bind("keyup change", calculate);
};
Please Help me find solution for this one, been trying to solve this on my own but I cant get it working. Any suggestions,answers and comments would really be appreciated. Thank you very much and have a good day!
In my case I just added this function
formatNoMatches: function( term ) {
$('.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
{
$("#modalAdd").modal();
$(".select2-input").unbind( "keyup" );
}
});
return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>";
}
这篇关于如何将Button添加到动态表格上的select2下拉列表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!