[]
        
(Showing Draft Content)

일반 슬라이서

GeneralSlicerData 클래스를 사용하여 일반 슬라이서를 만들 수 있습니다. 일반 슬라이서는 2차원 배열 데이터를 처리하며, 해당 데이터를 필터링하고 필터링된 결과를 얻기 위한 속성과 메서드를 제공합니다. 하나의 일반 슬라이서에 여러 개의 슬라이서를 연결할 수 있으며, 각 슬라이서는 데이터의 한 열을 필터링할 수 있습니다. 필터링이 완료되면, GeneralSlicerData 클래스는 다른 슬라이서에 이를 알리고, 슬라이서는 필터링된 결과를 받아 UI를 업데이트할 수 있습니다.

참고: SpreadJS 워크시트에서 일반 슬라이서를 사용하려면 gc.spread.sheets.all.js 플러그인을 참조해야 합니다.

슬라이서는 다음 단계를 기준으로 GeneralSlicerData 클래스와 함께 작동합니다:

  1. 데이터와 함께 새 GeneralSlicerData 인스턴스를 생성합니다.

  2. 새 사용자 정의 슬라이서를 만들고 GeneralSlicerData에 연결합니다.

  3. GeneralSlicerData에서 열 데이터를 가져와 슬라이서 UI를 구성합니다.

  4. UI 이벤트에 응답하고 GeneralSlicerDatadoFilter 메서드를 호출합니다.

  5. GeneralSlicerData에서 필터링된 결과를 가져와 슬라이서 UI를 업데이트합니다.

GeneralSlicerData 클래스는 일반 슬라이서를 제어하는 데 도움이 되는 다음 메서드를 제공합니다:

  • getData 메서드: 특정 열의 전체 데이터를 가져옵니다.

  • getExclusiveData 메서드: 중복되지 않는 고유 데이터를 가져옵니다.

  • doFilter 메서드: 특정 열을 필터링합니다.

  • doUnfilter 메서드: 필터 정보를 초기화합니다.

전체 메서드 목록은 GeneralSlicerData 클래스 문서를 참조하세요.

또한 attachListener 함수로 GeneralSlicerData에 리스너를 연결하고, detachListener 함수로 리스너를 해제할 수 있습니다.

아래 이미지는 사용자 정의 슬라이서를 보여줍니다.


아래는 일반 슬라이서를 생성하는 코드 샘플입니다.

Ask ChatGPT

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <!--CSS files-->
    <link href="scripts/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" />
    <!--Script files-->
    <script type="text/javascript" src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <script type="text/javascript">
        //데이터 원본 정의.
        columnNames = ["Name", "City", "Birthday"];
        data = [
            ["Bob", "NewYork", "1968/6/8"],
            ["Betty", "Washington", "1972/7/3"],
            ["Alice", "NewYork", "1964/3/2"]];
        //사용자 정의 슬라이서정의.
        function MySlicer(container) {
            this.container = container;
            this.slicerData = null;
            this.columnName = null;
        }
        MySlicer.prototype.setData = function (slicerData, columnName) {
            this.slicerData = slicerData;
            this.columnName = columnName;
            this.slicerData.attachListener(this);
            this.onDataLoaded();
        }
        MySlicer.prototype.onDataLoaded = function () {
            //슬라이서 dom tree 생성 .
            var columnName = this.columnName,
                exclusiveData = this.slicerData.getExclusiveData(columnName);
            $(this.container).append($('<span>' + this.columnName + ':</span>' + '<br />'));
            var domString = "";
            for (var i = 0; i < exclusiveData.length; i++) {
                domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '">';
                domString += '<span>' + exclusiveData[i] + '</span>';
                domString += '<br />';
            }
            $(this.container).append($(domString));
            //dom에 이벤트 부착.
            var self = this;
            $("[name='" + self.columnName + "']").change(function () {
                var slicer = self,
                    exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
                    parent = $(this).parent(),
                    items = parent.children(),
                    indexes = [];
                for (var i = 0, length = items.length; i < length; i++) {
                    if (items[i].checked) {
                        var value = items[i].value;
                        if (!isNaN(parseInt(value))) {
                            value = parseInt(value);
                        }
                        indexes.push(exclusiveData.indexOf(value))
                    }
                }
                if (indexes.length === 0) {
                    slicer.slicerData.doUnfilter(slicer.columnName);
                } else {
                    slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes });
                }
            });
        };
        MySlicer.prototype.onFiltered = function () {
            // 다음은 필터링된 결과를 표시하는 예제입니다.
            var slicerdata = this.slicerData;
            var filteredRowIndexs = slicerdata.getFilteredRowIndexes();
            var trs = $listTable.find("tr");
            for (var i = 0; i < slicerdata.data.length; i++) {
                if (filteredRowIndexs.indexOf(i) !== -1) {
                    $(trs[i + 1]).show();
                } else {
                    $(trs[i + 1]).hide();
                }
            }
        }
        // 필터링된 결과를 표시하는 메서드를 정의합니다.
        function initFilteredResultList() {
            var tableStr = "<table border='1' cellpadding='0' cellspacing='0'><tr>";
            for (var i = 0; i < columnNames.length; i++) {
                tableStr += "<th>" + columnNames[i] + "</th>";
            }
            tableStr += "</tr>";
            for (var i = 0; i < data.length; i++) {
                tableStr += "<tr>";
                for (var j = 0; j < data[i].length; j++) {
                    tableStr += "<td>" + data[i][j] + "</td>";
                }
                tableStr += "</tr>";
            }
            tableStr += "</table>";
            $listTable = $(tableStr);
            $("#list").append($listTable);
        }
        $(document).ready(function () {
            // 필터링된 결과 목록 초기화 
            initFilteredResultList();
            // 사용자 지정 슬라이서를 생성하고 이 슬라이서를 "slicerContainer" div에 추가
            var slicer = new MySlicer($("#slicerContainer")[0]);
            var slicerData = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
            slicer.setData(slicerData, "Name");
        });
    </script>
</head>
<body>
    <div id="slicerContainer" style="border:1px solid gray;width:190px"></div>
    <hr />
    <div id="list" style="width:300px;float:left"></div>
</body>
</html>

참고: 새로운 슬라이서로 업그레이드하려면 릴리스 소식을 참고하시기 바랍니다.