2011-02-09 3 views
8

방금 ​​작업 한 프로젝트에 대해 Slickgrid을 테스트하기 시작했으며 그 성능에 매우 감동했습니다. 하나의 요구 사항은 여러 열을 정렬하는 것입니다. 나는 Slickgrid의 Dataview를 감싸는 데 머리를 쓰지 않아도된다. 그래서 분명히 뭔가 빠졌지 만, 여러 컬럼에 그리드를 정렬하는 방법이 있는가? UI가 둘 이상의 정렬을 처리 할 수없는 경우에도 열과 함께 오름차순 또는 내림차순으로 함수를 호출 할 수 있기를 원합니다. Datatables으로이 작업을 수행 할 수 있었지만 그룹화 (프로젝트에 대한 또 다른 요구 사항)가 없습니다.Slickgrid를 여러 열로 정렬 하시겠습니까?

최악의 경우 서버에서 정렬을 수행하고 정적으로 정렬 된 클라이언트에 다시 콘텐츠를 제공하는 방법을 사용합니다.

답변

6

정렬 비교자를 연결하여 여러 열 정렬을 수행 할 수 있습니다. 대신

function comparerOnCol1(a, b) { 
    return a["col1"] - b["col1"]; 
} 

function comparerOnCol2(a, b) { 
    return a["col2"] - b["col2"]; 
} 

을하고 당신은

// sort by col1, then col2 
function combinedComparer(a, b) { 
    return comparerOnCol1(a, b) || comparerOnCol2(a, b); // etc. 
} 

을하거나 인라인을 구현할 수 있습니다.

UI에서 정렬 순서를 반영하는 한 직접 할 수는 없지만 정렬 할 열 정의에 "headerCssClass"를 설정하고 화살표를 표시하도록 정렬 표시기를 적용 할 수 있습니다 (그렇지 않으면 정렬 열을 나타냅니다).

+0

감사합니다. 이것은 내가 필요한 것 같다. 하지만 그냥 정렬 표를 정렬 할 수 또는 내가 정렬/필터링을 구현하려면 DataView 사용할 필요가 있습니까? 그냥 눈금으로 표시하고 있지만 DataView 구현은 내 부분에 더 많은 작업을 필요로하는 것처럼 보입니다. – technomalogical

+2

그리드가 데이터를 조작하지 않습니다. 너. DataView를 사용하여 정렬 할 필요가 없습니다. 데이터를 정렬하고 그리드를 무효화하여 데이터의 변경 사항을 반영하십시오. as : myData.sort (combinedComparer) – Tin

+0

나는 지금 같은 질문에 씨름하고있다. 다중 열 정렬 및 필터링이 필요하지만 DataView를 구현하지 않았습니다. DataView는 단 하나의 열만 정렬하는 것처럼 보이지만이를 무시할 수있는 방법이있을 것입니다. – Fantius

5

'multiColumnSort'옵션을 사용하는 예제가 있습니다.

http://mleibman.github.com/SlickGrid/examples/example-multi-column-sort.html

나는 args.sortCols 항상의 배열입니다 있기 때문에,하지만 작동 생각하지 않는다 1.

작동을 위해, 내가 클릭하기 전에 변화를 개최 할 필요가 위해 [편집] 열 머리글 (매우 직관적 인 IMHO가 아닙니다) 도 참조하십시오 : https://github.com/mleibman/SlickGrid/pull/276

1

이 문제를 해결하기 위해 (시프트 키를 사용하지 않고) 나는 시간을 보냈습니다.

단일 열 정렬 {multiColumnSort: false}을 사용하고 종결 인수를 종결 기호에 저장합니다. 필드가 동일한 경우 이전 비교 자로 연기하십시오.

var currentSortCmp = null; 
grid.onSort.subscribe(function (e, args) { 

    // declarations for closure 
    var field = args.sortCol.field; 
    var sign = args.sortAsc ? 1 : -1; 
    var prevSortCmp = currentSortCmp; 

    // store closure in global 
    currentSortCmp = function (dataRow1, dataRow2) { 

     var value1 = dataRow1[field], value2 = dataRow2[field]; 

     //if equal then sort in previous closure (recurs) 
     if (value1 == value2 && prevSortCmp) 
      return prevSortCmp(dataRow1, dataRow2); 

     return (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign; 
    }; 
    dataView.sort(currentSortCmp); 

    grid.invalidate(); 
    grid.render();  
}); 

은 이전 주문을 모두 기억합니다. 그냥 작동합니다. 예상대로 작동합니다.

4

나는 다중 열 정렬 방식으로 dataView에서 작동하도록했습니다. 이해하는 것이 가장 쉬운 방법이었습니다. 이것은 github의 예제에서 나온 것입니다. 단 dataView.sort()에 하나 이상의 매개 변수를 전달해야합니다. 항상 사실 일 수 있으며 함수에서 정렬 방향을 처리 할 수 ​​있습니다.

grid.onSort.subscribe(function (e, args) { 
    gridSorter(args.sortCols, dataView); 
}); 

function gridSorter(sortCols, dataview) { 
    dataview.sort(function (row1, row2) { 
     for (var i = 0, l = sortCols.length; i < l; i++) { 
      var field = sortCols[i].sortCol.field; 
      var sign = sortCols[i].sortAsc ? 1 : -1; 
      var x = row1[field], y = row2[field]; 
      var result = (x < y ? -1 : (x > y ? 1 : 0)) * sign; 
      if (result != 0) { 
       return result; 
      } 
     } 
     return 0; 
    }, true); 
} 

만약 누군가를 돕는 경우.

관련 문제