2013-09-24 7 views
0

먼저 에뮬레이트하려는 것을 먼저 설명하겠습니다. 홈 페이지에는 최근 테이블 항목이있는 메인 테이블이 있습니다. 사용자는 기본 테이블에서 테이블 행을 끌어서 놓을 수있는 "즐겨 찾는"폴더 세트가 제공됩니다. 표시되는 전체 행을 드래그하는 대신 (내 행은 다소 넓고 어떤 폴더로 떨어 뜨릴 지 알기가 어렵습니다.) "정보"아이콘이 있는데,이 경우 위쪽 화살표입니다. 사용자는 아이콘을 드래그하여 폴더에 놓을 수 있습니다.이 시점에서 주 테이블에서 제거하고 해당 즐겨 찾기 폴더 내의 테이블에 추가해야합니다. 지금까지는 대부분이 다음과 같은 바이올린에서 발생합니다 (행이 주 테이블에서 제거되지 않는 것을 제외하고). 문제는 Datatables의 사용으로 명백해진다. 즐겨 찾기 폴더에 행을 추가 한 후에는 페이지 네비게이션에서 다음 및 이전을 클릭 할 때까지 분명히 나타납니다. 사라진다. 또한 Datatables의 왼쪽 하단에있는 정보가 업데이트되지 않기 때문에이 테이블의 일부가 될 수 없습니다. 사용자가 드래그 한 행에서 총 4 개가있을 수있는 경우 3 개 항목 중 1 ~ 2 개를 표시합니다. Datatables에 행을 추가하는 것이 이해되면 fnAddData가 필요하지만이 인스턴스에서 어떤 아이디어를 사용하는지 모르겠습니다. 미리 감사드립니다. 바이올린 : (". 기본"). http://jsfiddle.net/YK5fg/4/Datatables에서 행이 사라 집니까?

$(".drag").draggable({ revert: "invalid" }); 

       $(".dropTarget").droppable({ 
       drop: function(event, ui) { 
        // fade out dropped icon  
        ui.draggable.hide(); 
        var dropped = parseInt($(this).attr('title')) + 1; 
        $(this) 
        .attr('title',dropped+' entries'); 

        var delay = $(this); 
         delay.prop('disabled', true).addClass('ui-state-highlight') 
         setTimeout(function() { 
          delay.prop('disabled', false).removeClass('ui-state-highlight'); 
         }, 2000) 

         var rowId = ui.draggable.prop("id"); 
         var cloned = $(".basic").find("tr#"+rowId).clone(); 
         $(".fav1table").append(cloned); 
       } 
       }); 

답변

1

당신이 fnAddTr를 사용할 수있는 플러그인 http://datatables.net/plug-ins/api 복제 그럴

을 추가 할
$(".dropTarget").droppable({ 
drop: function(event, ui) { 
    //ui.draggable.hide(); 
    var dropped = parseInt($(this).attr('title')) + 1; 
    $(this).attr('title',dropped+' entries'); 
    var delay = $(this); 
    delay.prop('disabled', true).addClass('ui-state-highlight') 
    setTimeout(function() { 
    delay.prop('disabled', false).removeClass('ui-state-highlight'); 
    }, 2000); 

     //return the position of the ui.draggable to appear inside the parent row 
     ui.draggable.css({"top":"0px","left":"0px"}); 
     //get the tr dragged 
     var rowId = ui.draggable.parents("tr"); 
     //clone rowId 
     var cloned = rowId.clone(); 
     //make the cloned icon draggable 
     cloned.find(".drag").draggable({ revert: "invalid"}); 
     //add coned tr with fnAddTr 
     $(".fav1table").dataTable().fnAddTr(cloned[0]); 
     //delete rowId with fnDeleteRow add [0] to fix the redraw error 
     $(".basic").dataTable().fnDeleteRow(rowId[0]); 
    } 
});  

http://jsfiddle.net/YK5fg/7/
UPDATE 지금
$의 수를 데이터 테이블() 변경하면 .fnDeleteRow() 및 아이콘 (draggable) 행에 반환

+0

위대한 진행 있지만 초기 주 테이블 페이지 매김 행으로 업데이트되지 않습니다. 삭제 중입니다. 또한 아이콘을 행과 함께 유지할 수 있습니까? 사용자가 계속해서 다른 폴더로 이동하려고하는 경우. – triplethreat77

+1

[http://jsfiddle.net/YK5fg/7/](http://jsfiddle.net/YK5fg/7/) 업데이트 된 바이디 –

+0

Beautiful. 거의 완벽 해. 일단 행이 즐겨 찾기 폴더에 추가되고 사용자가 행을 다시 이동하려고 결정하면 (이 경우 다시 집으로 돌아 가기), 행이 제거 되더라도 즐겨 찾기 테이블이 추가됩니다. 나는 가정과 좋아하는 것을 잘 모방하기 위해 바이올린을 약간 바꿨다. http://jsfiddle.net/YK5fg/8/ – triplethreat77

관련 문제