테이블의 동적 입력 필드

Question

사용자가 동적으로 더 많은 행을 추가 할 수있는 입력이 가능한 정렬 가능한 테이블이 있습니다. 하지만 지금은 그 행을 세트로 그룹화 할 수 있기를 바랍니다. 이론적으로 :

<tr> 
    <td><input type="text" name="set[0][name]" value="setname" /></td> 
<tr> 
<tr> 
    <td><input type="text" name="set[0][items][0][itemname]" value="itemname" /><td> 
</tr> 
<tr> 
    <td><input type="text" name="set[0][items][1][itemname]" value="itemname" /><td> 
</tr> 
<tr> 
    <td><input type="text" name="set[1][name]" value="setname" /></td> 
<tr> 
<tr> 
    <td><input type="text" name="set[1][items][0][itemname]" value="itemname" /><td> 
</tr> 
<tr> 
    <td><input type="text" name="set[1][items][1][itemname]" value="itemname" /><td> 
</tr> 

나는 사용자가 설정 한 행을 드래그하여 세트의 시작점을 변경하거나 드래그하여 설정의 항목을 변경할 수 있도록 세트 및 항목 모두, 정렬 싶습니다 항목 (이 jQuery 정렬 가능한 UI를 사용하고 있습니다).

문제는 정렬 할 때 올바른 배열 키와 값 쌍을 유지하면서 동적으로 집합과 항목 행을 추가하는 방법을 찾는 것입니다.

도움을 주시면 감사하겠습니다. 감사!

Answer 1

$(document).on("click", $('.sortable'), function (e) { 
    $('.sortable').sortable({ 
     start: function (event, ui) { 
      var start_pos = ui.item.index(); 
      ui.item.data('start_pos', start_pos); 
     }, 
     change: function (event, ui) { 
      var start_pos = ui.item.data('start_pos'); 
      var index = ui.placeholder.index(); 
      if (start_pos < index) { 
       $('.sortable :nth-child(' + index + ')').addClass('highlights'); 
      } else { 
       $('.sortable').children(' :eq(' + (index + 1) + ')').addClass('highlights'); 
      } 
     }, 
     update: function (event, ui) { 
      var redirectUrl = $('#hiddenRedirectUpdateOrder').val(); 
      $.ajax({ 
       url: redirectUrl, 
       type: 'POST', 
       cache: false, 
       contentType: 'application/json', 
       data: JSON.stringify({ orders: $(this).sortable('toArray') }), 
      }); 
      $('.sortable').removeClass('highlights'); 
     } 
    }); 
});