如何将Button添加到动态表格上的select2下拉列表中 [英] how to add Button to a select2 dropdown on a dynamic table

问题描述

美好的一天！

我正在做一个动态表格，你可以添加/删除行，而Im使用select2来通过ajax搜索数据库上的项目，此刻，我想添加另一个按钮（添加新项目）到我的select2的输入框。它也在工作，但当我添加另一行时，前面的行将有2个（添加新项目）按钮，当我添加另一行时，我的输入框中发生了一些奇怪的事情。

1. 不添加新行
   

添加新行后，


2. 
   

/ p>



  $（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.

1. without adding new rows

2. after adding new rows

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屋！