我正在处理一个yii2项目，当用户打开申请表时，会动态创建10行，用户可以填写所有需要的信息。目前，代码正在运行，我能够创建和更新信息。我在问这是否是更新和创建记录的最佳方式，因为有些代码是重复的。
<script>
$(document).ready(function(){
if('<?php echo $model->isNewRecord ?>')
{
const maxRow=10;
for(var i=0;i<maxRow;i++) {
$('#plant_dynamic_field').append('<tr id="row'+i+'">'+
'<td width=15%><select '+
'data-sub_category_id="'+i+'" name="Planthealthcommodity['+i+'][category]" id="planthealthcommodity-'+i+'-category"'
+' class="form-control item_category" data-plantcategory="'+i+'"><option value="Select Category">Select Category</option><?php echo Yii::$app->runAction('planthealthapplication/fillselect'); ?></select></td>'+
'<td width=15%><select '+
'data-sub_category_id="'+i+'" name="Planthealthcommodity['+i+'][commonname]" id="planthealthcommodity-'+i+'-commonname"'
+' placeholder="Common Name" class="form-control item_commodity" data-sub_commodity_id="'+i+'"><option value=""></option></select</td>'
+'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+i+'][scientificname]" id="planthealthcommodity-'+i+'-scientificname" '
+'class="form-control name_list" readonly></td>'
+'<td width=15%><select '+
' name="Planthealthcommodity['+i+'][countryoforigin]" id="planthealthcommodity-'+i+'-countryoforigin"'
+' class="form-control item_origin"><option value=""></option></select></td>'
+'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+i+'][exporteredfrom]" id="planthealthcommodity-'+i+'-exporteredfrom" '
+' class="form-control"> '+
'</td>'+
'<td width=10%><input type="text" '+
' name="Planthealthcommodity['+i+'][quantitypershipment]" id="planthealthcommodity-'+i+'-quantitypershipment" '
+' class="form-control"></td>'+
'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+i+'][restrictedarticle]" id="planthealthcommodity-'+i+'-restrictedarticle" '
+' class="form-control"> '+
'</td></tr>');
}
}
else if('<?php echo !$model->isNewRecord ?>')
{
var modelid=$('#planthealthapplicationupdateid').val();
$.ajax({
url:"select",
method:"POST",
data: {modelid:modelid},
dataType:"json",
success:function(data)
{
for(var count = 0; count < data.length; count++)
{
// console.log(data[count].category);
$('#plant_dynamic_field').append('<tr id="row'+count+'">'+
'<td width=15%><select '+
'data-sub_category_id="'+count+'" name="Planthealthcommodity['+count+'][category]" id="planthealthcommodity-'+count+'-category"'
+' class="form-control item_category" data-plantcategory="'+count+'"><option value="'+data[count].category+'">'+data[count].category+'</option><?php echo Yii::$app->runAction('planthealthapplication/fillselect'); ?></select></td>'+
'<td width=15%><select '+
'data-sub_category_id="'+count+'" name="Planthealthcommodity['+count+'][commonname]" id="planthealthcommodity-'+count+'-commonname"'
+' placeholder="Common Name" class="form-control item_commodity" data-sub_commodity_id="'+count+'"><option value="'+data[count].commonname+'">'+data[count].commonname+'</option></select</td>'
+'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+count+'][scientificname]" id="planthealthcommodity-'+count+'-scientificname" '
+'class="form-control name_list" readonly value="'+data[count].scientificname+'"></input></td>'
+'<td width=15%><select '+
' name="Planthealthcommodity['+count+'][countryoforigin]" id="planthealthcommodity-'+count+'-countryoforigin"'
+' class="form-control item_origin"><option value="'+data[count].countryoforigin+'">'+data[count].countryoforigin+'</option></select></td>'
+'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+count+'][exporteredfrom]" id="planthealthcommodity-'+count+'-exporteredfrom" '
+' class="form-control" value="'+data[count].exporteredfrom+'" /> '+
'</td>'+
'<td width=10%><input type="text" '+
' name="Planthealthcommodity['+count+'][quantitypershipment]" id="planthealthcommodity-'+count+'-quantitypershipment" '
+' class="form-control" value="'+data[count].quantitypershipment+'"></input></td>'+
'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+count+'][restrictedarticle]" id="planthealthcommodity-'+count+'-restrictedarticle" '
+' class="form-control" value="'+data[count].restrictedarticle+'"/> '+
'</td></tr>'
);
}
}
});
}
$(document).on('change', '.item_category', function(){
var plantcategory = $(this).val();
var sub_category_id = $(this).data('sub_category_id');
console.log('plantcategory is '+ plantcategory);
console.log('sub_category_id is '+ sub_category_id);
$.ajax({
url:'fill_sub_category',
method:"POST",
data:{plantcategory:plantcategory},
success:function(data)
{
console.log(data);
var html = '<option value="">Select Commodity</option>';
html += data;
$('#planthealthcommodity-'+sub_category_id+'-commonname').html(html);
}
})
});
$(document).on('change', '.item_commodity', function(){
var commodity = $(this).val();
var sub_commodity_id = $(this).data('sub_commodity_id');
$.ajax({
url:"fill_sub_origin",
method:"POST",
data:{commodity:commodity},
dataType:"JSON",
success:function(data)
{
$('#planthealthcommodity-'+sub_commodity_id+'-countryoforigin').html(data.origin2);
$('#planthealthcommodity-'+sub_commodity_id+'-scientificname').val(data.scientificname);
}
})
});
});
</script>
是的，您可以减少重复的代码，例如，对于您的几个<td>元素，如
+'<td width=15%><input type="text" '+
' name="Planthealthcommodity['+count+'][scientificname]" id="planthealthcommodity-'+count+'-scientificname" '
+'class="form-control name_list" readonly value="'+data[count].scientificname+'"></input></td>'
+'<td width=15%><select '+
' name="Planthealthcommodity['+count+'][countryoforigin]" id="planthealthcommodity-'+count+'-countryoforigin"'
+' class="form-control item_origin"><option value="'+data[count].countryoforigin+'">'+data[count].countryoforigin+'</option></select></td>'
您可以创建一个函数，该函数返回单个<td>的输出，并允许您在一个函数调用中获得每个<td>的输出，如下所示：
td('scientificname',count) + td('countryoforigin',count)
function td(name, count) {
return '<td width=15%><input type="text" '+
' name="Planthealthcommodity['+count+']['+name+']" id="planthealthcommodity-'+count+'-'+name+'" '
+'class="form-control name_list" readonly value="'+data[count][name]+'"></input></td>';
}
对重复代码的其余部分重复此模式(例如<select>元素(。