Автозаполнение пользовательского интерфейса jQuery для нескольких строк, созданных методом .clone () - PullRequest
Новая
       11

Автозаполнение пользовательского интерфейса jQuery для нескольких строк, созданных методом .clone ()

1 голос
/ 01 октября 2010

Я почти новичок в jQuery ... Я нашел несколько уроков / постов, объясняющих 1. как клонировать строку таблицы (полезно для вставки деталей счета): http://forum.jquery.com/topic/validate-will-not-submit-to-server 2. как использовать пользовательский интерфейс jQueryавтозаполнение с помощью PHP и MySQL (полезно для извлечения продуктов из таблицы БД и избегания ввода всего): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

Хорошо, до сих пор я могу клонировать строки таблицы и получить возможность автозаполнения в первой строке,но возникают проблемы, когда я добавляю еще одну строку и ожидаю, что там будет работать автозаполнение, я также нашел нить здесь в StackOverflow (http://stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamically-generated-textboxes),, но мне не повезло применить его к моему делу ...

А теперь,code:

Часть HTML 

<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details">
 <thead>
  <tr>
   <th scope="col">Codice</th>
   <th scope="col">Nome</th>
   <th scope="col">Quantità</th>
   <th scope="col">Unità di misura</th>
   <th scope="col">Costo U.</th>
   <th scope="col">Totale</th>
  </tr>
 </thead>
 <tbody>
  <tr id="row_0" class="iterable">
   <td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td>
   <td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td>
   <td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td>
   <td>&nbsp;</td>
   <td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<ul>
 <li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li>
 <li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li>
 <li><input type="submit" name="button" id="button" value="Salva tutto" /></li>
</ul>

Часть jQuery 

    function addrow(destination) {
     rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
     clonecopy = destination.clone(true);
     clonecopy.attr("class","iterable");
     // update numerical suffixes
     clonecopy.attr("id","row_"+rowcount);
     clonecopy.find('.sku, .name').val('');
     clonecopy.find("input[name^='det_sku']").attr({
      "name": "det_sku_"+rowcount,
      "id": "det_sku_"+rowcount
     });
     clonecopy.find("input[name^='det_name']").attr({
      "name": "det_name_"+rowcount,
      "id": "det_name_"+rowcount
     });
     clonecopy.find("select[name^='det_quantity']").attr({
      "name": "det_quantity_"+rowcount,
      "id": "det_quantity_"+rowcount
     });
     clonecopy.find("select[name^='det_price']").attr({
      "name": "det_price"+rowcount,
      "id": "det_price"+rowcount
     });
     clonecopy.insertAfter(destination);
     $('#det_arrayitems').val(rowcount);
    }

$("#add").click(function() {
        parent_row = $('#details tbody>tr:last');
        addrow(parent_row);
    });    

$('input.sku').autocomplete({
     source: "../json/products.php",
     minLength: 2,
     select: function(event, ui) {
      $(this).parent().siblings().children('input.name').val(ui.item.name);
     }
    })

Я тоже пробовал это (и пару других идей), но не повезло 

$("#add").live("click", function() {
 parent_row = $('#details tbody>tr:last');
 addrow(parent_row);
 $('input.sku').autocomplete({
  source: "../json/products.php",
  minLength: 2,
  select: function(event, ui) {
   $('input.sku').parent().siblings().children('input.name').val(ui.item.name);
  }
 })
});

Пожалуйста, вы можете мне помочь? Спасибо ...

Ответы [ 3 ]

1 голос
/ 02 октября 2010

Нашел решение, мне пришлось поместить автозаполнение внутри функции addrow и удалить слово "true" из .clone (true) в соответствии (и благодаря) с этим: JQuery: Как клонировать поля автозаполнения?

function addrow(destination) {
 rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
 clonecopy = destination.clone();
 clonecopy.attr("class","iterable");
 // update numerical suffixes
 clonecopy.attr("id","row_"+rowcount);
 clonecopy.find('.sku, .name').val('');
 clonecopy.find("input[name^='det_sku']").attr({
  "name": "det_sku_"+rowcount,
  "id": "det_sku_"+rowcount
 }).autocomplete({       
  source: "../json/products.php",       
  minLength: 2,
  select: function(event, ui) {
   $(this).parent().siblings().children('input.name').val(ui.item.name);       
  }
 });
 clonecopy.find("input[name^='det_name']").attr({
  "name": "det_name_"+rowcount,
  "id": "det_name_"+rowcount
 });

 clonecopy.find("select[name^='det_quantity']").attr({
  "name": "det_quantity_"+rowcount,
  "id": "det_quantity_"+rowcount
 });
 clonecopy.find("select[name^='det_price']").attr({
  "name": "det_price"+rowcount,
  "id": "det_price"+rowcount
 });
 clonecopy.insertAfter(destination);
 $('#det_arrayitems').val(rowcount);

}
0 голосов
/ 14 января 2015

Создать кнопку с именем класса addmore, затем по нажатию кнопки вызвать следующий метод. Пожалуйста, сформируйте строку таблицы, как показано ниже, и, наконец, добавьте сформированный HTML к вашей таблице. 

//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
     html = '<tr>';
     html += '<td><input class="case" type="checkbox"/></td>';
     html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
     html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
     html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '</tr>';
     $('table').append(html);
     i++;
 });

Следующий скрипт выполнит часть удаления ... Для удаления создайте кнопку с именем класса удаления. 

//deletes the selected table rows
$(".delete").on('click', function() {
   $('.case:checkbox:checked').parents("tr").remove();
   $('#check_all').prop("checked", false); 
});

Я сделал простое руководство для примера системы счетов со всеми функциями, которые вы упомянули прямо из

  1. добавление и удаление строк из нескольких таблиц
  2. множественное автозаполнение и лот

Система счетов с использованием автозаполнения jQuery

0 голосов
/ 01 октября 2010

Я делаю нечто похожее, когда у меня есть div, который содержит все строки, а поле ввода eact в строке имеет тег rel с базовой частью его имени и идентификатора, а затем щелкаю, чтобы добавить строку, которую я вызываюследующее: 

 $("#addChain").click(function() {  
         var index = $("#chainHolder").children().length + 1;  
        $("#chainHolder").children(":first").clone().each(function() {  
       $(this).find(":input").each(function() {  
                $(this).attr("id", $(this).attr("rel")+"["+index+"]");  
                $(this).attr("name", $(this).attr("rel")+"["+index+"]");  
            });  
             $(this).children(":first").val(index);  
        }).appendTo("#chainHolder");  
    });
...