JQuery Remove()가 실제로 그리드에서 행을 삭제하지 않습니다.

그리드에서 행을 제거하려고하고 마침내 일부 검색 후에 그리드에서 행을 제거 할 수있게되었습니다. 행이 진정으로 삭제되었다는 사실을 두 번 확인했기 때문에 잠깐 동안 지속 된 야후의 순간이었습니다. 실제로는 말마다 삭제되지 않고 숨겨진 것임을 알았습니다.JQuery Remove()가 실제로 그리드에서 행을 삭제하지 않습니다.

그리드에있는 필터를 사용하여 제거한 행 데이터 중 하나를 필터링하면 필터가 다시 나타나고 일단 필터를 지우면 삭제 된 모든 행이 다시 나타납니다.

이제는 많은 것들이 혼란 스럽습니다. 왜 행이 숨겨져 있고 실제로 제거되지 않았는지, 행을 삭제하기 위해 아약스를 사용하지 않고 그리드에서 행을 실제로 제거하는 방법은 무엇입니까? 그리드에있는 모든 데이터가 손실되어 다시 입력해야하기 때문에 이것이 좋지 않은 이유가 있습니다. 왜냐하면 내가 지금보고 있기 때문에 행을 숨기고 그리드에서 모든 데이터를 가져 와서 데이터베이스에 추가하면 행이 제거되기 때문에 문제가 발생하기 때문입니다. 이유.

나는 실제로 말하고있는 것을 보여주기 위해 기본 도장 here을 만들었습니다.

$(document).ready(function() { 
 
    var junkData = [{ 
 
     "DiscountID": 1, 
 
     "DealerDiscount": "15" 
 
    }, { 
 
     "DiscountID": 2, 
 
     "DealerDiscount": "16" 
 
    }, { 
 
     "DiscountID": 3, 
 
     "DealerDiscount": "17" 
 
    }, { 
 
     "DiscountID": 4, 
 
     "DealerDiscount": "18" 
 
    }, { 
 
     "DiscountID": 5, 
 
     "DealerDiscount": "19" 
 
    }, { 
 
     "DiscountID": 6, 
 
     "DealerDiscount": "20" 
 
    }, { 
 
     "DiscountID": 7, 
 
     "DealerDiscount": "21" 
 
    }, { 
 
     "DiscountID": 8, 
 
     "DealerDiscount": "22" 
 
    }, { 
 
     "DiscountID": 9, 
 
     "DealerDiscount": "23" 
 
    } 
 

 
    ]; 
 

 
    ShowGrid(junkData); 
 
}); 
 

 
function ShowGrid(userdata) { 
 

 
    $("#grid").kendoGrid({ 
 
    noRecords: { 
 
     template: "No Records Available" 
 
    }, 
 
    dataSource: { 
 
     data: userdata 
 
    }, 
 
    schema: { 
 
     model: { 
 
     DiscountID: "DiscountID" 
 
     } 
 
    }, 
 
    filterable: { 
 
     mode: "row" 
 
    }, 
 
    columns: [{ 
 
     title: "<input id='checkAll', type='checkbox', class='check-box' />", 
 
     template: "<input name='Selected' class='checkbox' type='checkbox'>", 
 
     width: "30px" 
 
     }, { 
 
     field: "DealerDiscount", 
 
     title: "Dealer Discount", 
 
     template: "<div style='text-align: center'>#= DealerDiscount #</div>" 
 
     }, { 
 
     title: "Delete", 
 
     template: "<button type='button' class='removeit'>X</button>" 
 
     } 
 
    ], 
 
    scrollable: true, 
 
    height: 856 
 
    }); 
 
} 
 

 
$(document).on('click', 'button.removeit', function() { 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
 

 
<div id="grid"></div>

출처

2016-11-05 Chris

코드는 어디에 있습니까? –

나는 도장을 제공했다 – Chris

와우, 힘든 군중. 필자는 Visual Studio에서 새로운 프로젝트를 시작할 시간이 없을 수도 있고 Kendo UI가 투표를하지 않고 투표를 마감 할 자격이없는 사람들에게도 코드에 대한 링크를 제공하고 쉽게 작성한다고 가정합니다. 어쩌면 마지막 문장의 링크가 간과되었고 누군가 내가 게으르다 고 생각했을까요? – Chris

당신은 당신이 또한 모델에서 데이터/기록을 제거해야합니다 있도록 UI 그러나 grid'd 모델/데이터 소스에서 사용할 수있는 아직도 그 기록/데이터에서 행만을 제거했습니다.

다음 코드 스 니펫으로 시도해보십시오.

$(document).on('click', 'button.removeit', function() { 
    var currentrow = $(this).closest('tr'); 
    currentrow.remove(); 
    var grid1 = $('#grid').data('kendoGrid'); 
    var currItem = grid1.dataSource.getByUid($(currentrow).data('uid')); 
    grid1.dataSource.remove(currItem); 
    return false; 
});

출처

2016-11-06 08:28:23

완벽하게 작동했습니다. 감사합니다. – Chris

약간 혼란 스럽지만 currentrow와 함께 콘솔 로그를 보았고 uid를 어떻게 얻었는지 확실하지 않다. – Chris

uid는 kendo.js에 의해 자동 생성 된 필드이다. 이 점은 우리가 모든 행을 고유하게 식별하는 데 도움이됩니다. 당신은 또한 tr 요소의 inspect 요소를 사용하여 같은 것을 검사 할 수있다. –

JQuery Remove()가 실제로 그리드에서 행을 삭제하지 않습니다.

답변

관련 문제