Есть ли лучший способ использовать jquery информации без повторения кода - PullRequest
Новая
       27

Есть ли лучший способ использовать jquery информации без повторения кода

0 голосов
/ 25 апреля 2020

Я работаю над проектом 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>

1 Ответ

1 голос
/ 25 апреля 2020

Да, вы можете уменьшить дублирующийся код, например. для ваших нескольких <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>).

...