UI(Front-End)/그리드

AG-GRID 필터와 정렬 예제

까오기 2019. 1. 30. 15:12

AG-GRID 필터와 정렬 예제

필터링과 정렬 관련 예제입니다.


Html

참고 mainGrid.setFilteredData(), mainGrid.sortByYearDesc()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>AG GRID FILTER & SORT EXAMPLE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
  <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>
  <script src="/assets/js/agGridUtil.js"></script>
</head>
<body>
<div class="container">
    <h2>AG GRID FILTER & SORT EXAMPLE</h2>
    <small>필터기능 확인</small><br/>
    <small>정렬 확인</small><br/>
    <div class="button-bar ">
        <Select id="year" onchange="mainGrid.setFilteredData()">
            <option value="">전체</option>
            <option value="2004">2004</option>
            <option value="2005">2005</option>
            <option value="2006">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
        </Select>
        <button type="button" onclick="mainGrid.sortByYearDesc()">연도별 역순</button>
        
    </div>
    <div class="grid-wrapper">
        <div style="width: 100%; height:580px" id="myGrid" class="ag-grid-div ag-theme-balham ag-basic"></div>
    </div>
</div>
  <script>
  var MainGrid = function(){
        var _this = this;
        /* grid 영역 정의 */
        this.gridDiv = "myGrid";
        this.orgRowData = null;
        /* grid 칼럼 정의 */
        this.getColumnDefs = function(){
            var columnDefs = [
                {field: "athlete", width: 150, suppressSizeToFit: true, sort : "asc"},
                {field: "age", width: 90, minWidth: 50, maxWidth: 100},
                {field: "country", width: 120},
                {field: "year", width: 90},
                {field: "date", width: 110},
                {field: "sport", width: 110},
                {field: "gold", width: 100},
                {field: "silver", width: 100},
                {field: "bronze", width: 100},
                {field: "total", width: 100}
            ];
            var gridOpt = CommonGrid.getDefaultGridOpt(columnDefs);
            //gridOpt.onRowClicked = onRowClicked;
            return gridOpt;
        };
        /* grid 옵션 가져오기 */
        this.gridOpts = null; 
        /* grid 실행 */
        this.makeGrid = function(rowData){
            _this.gridOpts = _this.getColumnDefs();
            CommonGrid.makeGridCommon(_this.gridDiv, _this.gridOpts, rowData)
        };
        this.setFilteredData = function(){
            var filterComponent = _this.gridOpts.api.getFilterInstance('year');    
            filterComponent.setModel({
                type: 'contains',
                filter: $("#year").val()
            });
            _this.gridOpts.api.onFilterChanged();
        };
        this.sortByYearDesc = function() {
            var sort = [
                {colId: 'year', sort: 'desc'}
            ];
            _this.gridOpts.api.setSortModel(sort);
        }
    }
    var mainGrid = new MainGrid();
 
    // setup the grid after the page has finished loading
    document.addEventListener('DOMContentLoaded', function() {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', './olympicWinnersSmall.json');
        httpRequest.send();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                var httpResult = JSON.parse(httpRequest.responseText);
                mainGrid.orgRowData = httpResult;
                mainGrid.makeGrid(httpResult);
            }
        };
    });  
  </script>
</body>
</html>
cs

 

Json data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
[
    {
        "athlete": "Michael Phelps",
        "age": 23,
        "country": "United States",
        "year": 2008,
        "date": "24/08/2008",
        "sport": "Swimming",
        "gold": 8,
        "silver": 0,
        "bronze": 0,
        "total": 8
    },
    {
        "athlete": "Michael Phelps",
        "age": 19,
        "country": "United States",
        "year": 2004,
        "date": "29/08/2004",
        "sport": "Swimming",
        "gold": 6,
        "silver": 0,
        "bronze": 2,
        "total": 8
    },
    {
        "athlete": "Michael Phelps",
        "age": 27,
        "country": "United States",
        "year": 2012,
        "date": "12/08/2012",
        "sport": "Swimming",
        "gold": 4,
        "silver": 2,
        "bronze": 0,
        "total": 6
    }
]
cs


파일 첨부

filterExample.zip



참고 

Filter Options

Each filter presents a list of options to the user. The list of options for each filter are as follows:

Option NameOption KeySupported Filters
EqualsequalsText, Number, Date
Not EqualsnotEqualText, Number, Date
ContainscontainsText
Not ContainsnotContainsText
Starts WithstartsWithText
Ends WithendsWithText
Less ThanlessThanNumber, Date
Less Than or EquallessThanOrEqualNumber
Greater ThangreaterThanNumber, Date
Greater Than or EqualgreaterThanOrEqualNumber
In RangeinRangeNumber, Date
Empty*emptyText, Number, Date

* 'Empty' is a special filter option. When Empty is displayed, it means the filter is not active.

Default Filter Options

Each of the three filter types has the following default options and default selected option.

FilterDefault List of OptionsDefault Selected Option
TextContains, Not Contains, Equals, Not Equals, Starts With, Ends With.Contains
NumberEquals, Not Equals, Less Than, Less Than or Equal, Greater Than, Greater Than or Equal, In Range.Equals
DateEquals, Greater Than, Less Than, Not Equals, In Range.Equals
출처 : https://www.ag-grid.com/javascript-grid-filter-provided-simple/


저작자표시 비영리 변경금지