검도 - 그리드 - 여러 행 제거

Question

다음 행을 선택하면 각 행에 체크 상자가 있고 도구 모음에는 필터 버튼 (및 다른 버튼)이 있습니다.

var grid = $("#resultsGrid").data("kendoGrid"); 
grid.tbody.find("input:checked").closest("tr").each(function(index) { 
    grid.removeRow($(this)); 
}); 

그러나 제거되는 행 수가 20을 초과하면 성능이 문제가되기 시작합니다. 그러나 검도는 20 줄 이상을 훨씬 빠르게 필터링 (제거)합니다. 검도가 여러 행을 뷰에서 제거하는 것을 어떻게 필터링합니까? 아니면 그리드에서 여러 행을 제거하는 더 좋은 방법이 있습니까? 귀하의 도움에 미리 감사드립니다.

Answer 1

** 새 위치로 바이올린을 업데이트 - 이전과 같은 코드 **

직접 데이터를 처리하십시오. 확인란을 행의 ID에 연결하고 그 행을 필터링하십시오.

필자는 배열 요소를 제거하고 그리드를 다시 만드는 바이올린을 연결했습니다. 표의 상단에있는 2 개의 텍스트 상자는 제거하려는 ID의 범위를 캡처합니다 (이것은 checkboxIds의 동일한 배열입니다). 그런 다음 "제거 ID"를 순환하여 데이터 배열에서 제거하고 표를 다시 작성합니다.

필자는 이전의 바이올린을 약간 수정했기 때문에 DataSource 개체를 직접 처리하는 대신 그리드를 다시 만들고 있습니다. 하지만 내가하는 일의 요지를 얻으시기 바랍니다.

이 예제에서는 1000 개의 레코드 (3 개의 열만 있음)가 있지만 매우 빨리 950 개의 레코드가 제거됩니다.

Fiddle- Remove from data array

당신이 KendoUI 데이터 소스 객체와이의 예를 필요로하는 경우 알려주세요.

StackOverflow가 없으면 게시하지 않기 때문에이 코드를 아래에 포함 시켰습니다.

function filterData() { 

    var val1 = $("#val1").val(); 
    var val2 = $("#val2").val(); 

    var removeIndexes = new Array(); 

    for (var i = val1; i <= val2; i++) { 
     removeIndexes.push(i); 
    }  

    $(removeIndexes).each(function(removeIndex) { 
     var removeItemId = this; 
     $(randomData).each(function(dataIndex) { 
      var continueLoop = true; 
      if (this.Id == removeItemId) { 
       randomData.splice(dataIndex, 1); 
       continueLoop = false; 
      } 
      return continueLoop; 
     }); 
    }); 

    createGrid(); 
} 

Answer 2

당신은 일괄 업데이트를 사용해야합니다

$("#resultsGrid").kendoGrid({ 
    dataSource: { 
     batch: true, 
     ... 
    }, ...}); 

var grid = $("#resultsGrid").data("kendoGrid"); 
grid.tbody.find("input:checked").closest("tr").each(function() { 
    var dataItem = grid.dataItem(this); 
    grid.dataSource.remove(dataItem); 
}); 
grid.dataSource.sync(); // this applies batched changes