jquery ui explete على صفوف متعددة تم إنشاؤها باستخدام .clone ()
-
27-09-2019 - |
سؤال
أنا جديد تقريبًا على jQuery ... لقد وجدت بعض البرامج التعليمية/المنشورات التي تشرح 1. كيفية استنساخ صف الجدول (مفيد لإدراج تفاصيل الفاتورة): http://forum.jquery.com/topic/validate-will-not-submit-to-server2. كيفية استخدام الإكمال التلقائي JQuery UI مع PHP و MySQL (مفيد لاسترداد المنتجات من جدول DB وتجنب كتابة كل شيء): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-mysql/
حسنًا ، "حتى يمكنني الآن استنساخ صفوف الجدول ويمكنني الحصول على عمل AutoCmplete في الصف الأول ، لكن المشكلات تنشأ عند إضافة صف آخر وأتوقع العمل التلقائي هناك ، أيضًا وجدت موضوعًا هنا في Stackoverflow (http: // stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamially-textboxes) ، ولكن لم يكن محظوظًا في التقدم إلى حالتي ...
والآن ، الرمز:
الجزء 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> </td>
<td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
<td> </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);
}
})
});
ارجوك، هل يمكنك مساعدتي؟ شكرًا...
المحلول
وجدت الحل ، اضطررت إلى وضع الإكمال التلقائي داخل وظيفة AddRow وإزالة كلمة "صواب" من .clone (صحيح) وفقًا (وشكر) لهذا: 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);
}
نصائح أخرى
أفعل شيئًا مشابهًا حيث لدي 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");
});
قم بإنشاء زر مع اسم فئة 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);
});
لقد صنعت تعليميًا بسيطًا لنظام فاتورة عينة مع جميع الوظائف التي ذكرتها من قبل
- إضافة صف متعدد الجدول إضافة وحذف
- الإكمال التلقائي المتعدد والكثير