Jquery сортируется, как изменить расположение perv / next item в структуре таблицы - PullRequest
Новая
       8

Jquery сортируется, как изменить расположение perv / next item в структуре таблицы

1 голос
/ 04 февраля 2020

Я использую jQuery ui sorttable для сортировки всех элементов td вместе с родительским элементом tr, который имеет класс c. Родовая сортировка элементов tr работает нормально. Но при сортировке элементов td предыдущий элемент td перемещается рядом с пропущенным элементом.

Как изменить положение предыдущего элемента td, чтобы оно не перемещалось в следующую позицию?

Короче говоря, как заставить позиции поменяться местами между элементами td при сортировке?

https://jsfiddle.net/cnws4otv/8/ "rel =" nofollow noreferrer "> JS скрипка

Html код 

<table id="repeatable-fieldset-one" width="100%" class="ui-sortable">
  <thead>
    <tr>
      <th width="4%">Remove Row</th>
      <th width="20%">Name</th>
      <th width="40%">PDF</th>
    </tr>
  </thead>
  <tbody>
    <tr class="main_row main_row_static indexid_0" data-mainindex="0" data-totalpdfurlcount="5">
      <td>
        <a class="button remove-row" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
      <td>
        <input type="text" class="widefat" name="repeatable_fields[0][name]" value="First">
      </td>
      <td class="pdf_data" data-count_pdf="0">
        <input type="text" id="count_pdf_input-0" class="widefat widefatpdfs upload_image1" name="repeatable_fields[0][url][]" value="1">
        <input class="upload_image_button" data-count_pdf="0" type="button" value="Select PDF">
        <a class="button add-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-plus"></span>
        </a>
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][1]" value="1.1">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][2]" value="1.2">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][3]" value="1.3">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][4]" value="1.4">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
  </tbody>        

  <tbody>         
    <tr class="main_row main_row_static indexid_1" data-mainindex="1" data-totalpdfurlcount="6">
      <td>
        <a class="button remove-row" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
      <td>
        <input type="text" class="widefat" name="repeatable_fields[1][name]" value="Second">
      </td>
      <td class="pdf_data" data-count_pdf="1">
        <input type="text" id="count_pdf_input-1" class="widefat widefatpdfs upload_image1" name="repeatable_fields[1][url][]" value="2">
        <input class="upload_image_button" data-count_pdf="1" type="button" value="Select PDF">
        <a class="button add-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-plus"></span>
        </a>
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][1]" value="2.1">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][2]" value="2.3">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][3]" value="2.4">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][4]" value="2.5">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][5]" value="2.6">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>

  </tbody>
</table>

js код 

$("#repeatable-fieldset-one").sortable({
  items: "tbody",
  handle: ".main_row_static"
});


$("tbody").sortable({
  items: "tr > td:last-child",
  update: function(event, ui){
    },
  stop: function(event, ui) {
    if ($(ui.item).parent('.main_row').length > 0) {
        var get_pdf_count = $(ui.item).parent('.main_row').attr('data-mainindex');
         $(ui.item).switchClass('pdf_data_inner', 'pdf_data');
       $(ui.item).attr("data-count_pdf", get_pdf_count);
    } else {
             $(ui.item).switchClass('pdf_data', 'pdf_data_inner');
         $(ui.item).removeAttr("data-count_pdf");
    }

  }
});

1 Ответ

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

Вы должны отсортировать строку целиком, иначе сортируемый вами тд будет помещен в ту же строку, что и другой тд.

Итак, измените items: "tr > td:last-child" на items: "tr:not(.main_row).

Если вы хотите отсортировать эти элементы в другом теле, скажем, вы хотите поместить 2.1 перед 1.1, вы должны использовать Опция connectWith: 'tbody'.

Здесь обновляется Скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...