2013-05-04 2 views
4

테이블이 있는데 테이블을 동적으로 추가/삭제했습니다. 테이블에 MVC에 대한 콜렉션으로 다시 게시 될 필드가 있습니다. jQuery로 테이블을 갱신이 시나리오에서는 는JQuery MVC 컬렉션 이름 속성

function add() { 
    $.ajax({ 
      url: "GetRow", 
      type: 'post', 
      dataType: 'html', 
      timeout: 30000, 
      data: { 
       RowIndex: otherRows.length, 
       "Item.Property1": $("option:selected", dropDown).text(), 
       "Item.Property2": $("option:selected", dropDown).val() 
      }, 
      success: function (result) { 
       var newRow = $(result); 
       tableBody.append(newRow); 
      } 
     }); 
} 

이 기능은 행의 결과를 반환하는 MVC 액션 결과를 가서 아약스 호출을 ... 예를 들어 불완전 컬렉션을 포함하는 컬렉션으로 I를 의미 주어진 인덱스에서 추가로 내 페이지의 드롭 다운에서 일부 기본값을 설정합니다.

이제 jquery를 사용하여 행을 제거하고이 시점에서 테이블에 3 행 (헤더 행을 무시함)이 있고 삭제할 행이 "삭제"라는 유사한 함수가 있다고 가정합니다. 가운데 행. 이 내 행의 필드 이런 식으로 뭔가를 찾고 결국 의미

...

//Row 1: 
<input type="text" name="SomeCollection[0].Property1" /> 

//Row 2: 
    Nothing, deleted of course 

//Row 3: 
<input type="text" name="SomeCollection[2].Property1" /> 

지금 때문에 일관성 ID 범위의, 다시 게시 할 경우 그래서, MVC 모델 바인더는 항목을 바인딩 1 및 항목 2 (실제로 클라이언트 측 삭제 전 항목 3)는 매핑되지 않습니다.

아이디어는 내 서버 논리가 "내 컬렉션의 항목에 대한 ID가 게시 데이터에 없으면 데이터베이스에서 삭제하십시오"라는 매우 간단한 작업을 원한다는 것입니다.이 방법으로 모든 컬렉션 조작이 가능합니다. 이 매우 무거운 페이지의 상수 포스트 백을 제외하고는 전적으로 클라이언트 쪽입니다.

그래서 나는 ...
function updateNames(table) { 
    var rows = $("tr", table); 
    var index = 0; 

    rows.each(function() { 
     var inputFields = $("input"); 

     inputFields.each(function(){ 
      //replace name="bla[<any number>].Anything" with 
      //  name="bla[" + index + "].Anything"   
     }); 

     index++; 
    }); 
} 

그래서 내 질문은 ... 문제를 해결하기 위해 JQuery와 함께 기능을 넣어 내가 JQuery와에 말을 어떻게 "로 이름 속성에 [] 교체를 시작 [ 색인]"?

중첩 된 컬렉션/다른 복잡한 시나리오의 문제를 해결할 수는 없지만 일단이 함수를 해결하면 나중에 확장 할 수 있으며 요구 사항이 아직 관련되지 않은 것입니다.

편집 : 좋거나 나쁜

내 현재의 생각 패턴에 몇 가지 추가 세부 ...?

만약 내가 첫 번째 "["다음 ""] 다음 사이에 모든 것을 바꿀 때까지 이름 특성 값을 잡고 "걷는 chars", 내 문제를 해결해야하지만, IE에서 이런 종류의 아마 천천히 지옥처럼.

누구나 깔끔한 "이 똑똑한 기능이라고 부르는"대답을 얻었습니까? (있는 경우).

편집 2 :

와우 정말 꼭 ... 난 지금 기분이 바보 얼마나 열심히 보는 2 가지 이유 (보고 및 정규식 여기에 확실한 해결책 아니다)

JQuery: how to replace all between certain characters?

에 대한

만약 내가 정규식을 이해할 수 있다면 (정규식의 미친 소리에 끊임없이 짜증이 난다.

그러나 정규식의 힘에 따라 수 없습니다 추정 :

답변

4

이 당신을 위해 작동합니다 :

function updateNames(table) { 

    var rows = $("tr", table); 
    var index = 0; 

    rows.each(function() { 
     var inputFields = $(this).find("input"); 
     inputFields.each(function(){ 
      var currentName = $(this).attr("name"); 
      $(this).attr("name", currentName.replace(/\[(.*?)\]/, '['+index+']')); 

     }); 
     index++; 
    }); 
} 

가 각 행 내부에 여러 개의 입력하고 당신은 다음 고려를 업데이트하려면 'starts with'jQuery 선택자를 사용하십시오 : http://api.jquery.com/attribute-starts-with-selector/.

+0

그게 내가 어디로 가는지에 관한 것이지만, 나는 어떤 이유로 그것을 작동시키지 못합니다. – War

+0

정확하게 "작동하지 않는"것은 무엇입니까? 이것은 내가 온 해결책이기도합니다. –

+0

롤 잘 우리가 만든 두 번째 실수는 ... 두 번째 선택기가 문서를 광범위하게 찾고 있었다. var inputFields를 셋업한다. – War

4

이미 해상도가 있지만 처음부터이 기능을 구현하는 방법에 대한 작업 데모가 유용 할 수 있다고 생각했습니다.

각 행에 delete의 클래스와 버튼이 가정하면, 다음에이를 수 있습니다

$('.delete').click(function(e) { 
    // Get table body and rows 
    var body = $(this).closest('tbody'); 

    // Remove current row 
    $(this).closest('tr').remove(); 

    // Get new set of rows from table body 
    var rows = body.find('tr') 

    // Update all indeces in rows 
    var re = new RegExp(/\[[0-9]+\]/); 
    var index = 0; 
    rows.each(function() { 
     $(this).find('input').each(function (e) { 
      var input = $(this).attr('name'); 
      if (input) { 
       $(this).attr('name', input.replace(re, '['+index+']')); 
      } 
     }); 
     index ++; 
    }); 
}); 

이 때문에 나머지 행에 모든 입력에 대한 모든 굴절률들을 행을 삭제하고 업데이트해야합니다 다시 제대로 증가합니다 (따라서 모델 바인더에 의해 올바르게 바인딩됩니다). 또한 현재 테이블로 제한되어야합니다. Here it is in action.

+0

I love 이 솔루션 개미, 그것은 세부 사항을 아름답게 커버 :) – War