1 | (function ($) {
|
2 | $.extend(true, window, {
|
3 | Slick: {
|
4 | Data: {
|
5 | GroupItemMetadataProvider: GroupItemMetadataProvider
|
6 | }
|
7 | }
|
8 | });
|
9 |
|
10 |
|
11 | |
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | function GroupItemMetadataProvider(inputOptions) {
|
26 | var _grid;
|
27 | var _defaults = {
|
28 | checkboxSelect: false,
|
29 | checkboxSelectCssClass: "slick-group-select-checkbox",
|
30 | checkboxSelectPlugin: null,
|
31 | groupCssClass: "slick-group",
|
32 | groupTitleCssClass: "slick-group-title",
|
33 | totalsCssClass: "slick-group-totals",
|
34 | groupFocusable: true,
|
35 | totalsFocusable: false,
|
36 | toggleCssClass: "slick-group-toggle",
|
37 | toggleExpandedCssClass: "expanded",
|
38 | toggleCollapsedCssClass: "collapsed",
|
39 | enableExpandCollapse: true,
|
40 | groupFormatter: defaultGroupCellFormatter,
|
41 | totalsFormatter: defaultTotalsCellFormatter,
|
42 | includeHeaderTotals: false
|
43 | };
|
44 |
|
45 | var options = $.extend(true, {}, _defaults, inputOptions);
|
46 |
|
47 | function getOptions(){
|
48 | return options;
|
49 | }
|
50 |
|
51 | function setOptions(inputOptions) {
|
52 | $.extend(true, options, inputOptions);
|
53 | }
|
54 |
|
55 | function defaultGroupCellFormatter(row, cell, value, columnDef, item, grid) {
|
56 | if (!options.enableExpandCollapse) {
|
57 | return item.title;
|
58 | }
|
59 |
|
60 | var indentation = item.level * 15 + "px";
|
61 |
|
62 | return (options.checkboxSelect ? '<span class="' + options.checkboxSelectCssClass +
|
63 | ' ' + (item.selectChecked ? 'checked' : 'unchecked') + '"></span>' : '') +
|
64 | "<span class='" + options.toggleCssClass + " " +
|
65 | (item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
|
66 | "' style='margin-left:" + indentation +"'>" +
|
67 | "</span>" +
|
68 | "<span class='" + options.groupTitleCssClass + "' level='" + item.level + "'>" +
|
69 | item.title +
|
70 | "</span>";
|
71 | }
|
72 |
|
73 | function defaultTotalsCellFormatter(row, cell, value, columnDef, item, grid) {
|
74 | return (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item, columnDef, grid)) || "";
|
75 | }
|
76 |
|
77 |
|
78 | function init(grid) {
|
79 | _grid = grid;
|
80 | _grid.onClick.subscribe(handleGridClick);
|
81 | _grid.onKeyDown.subscribe(handleGridKeyDown);
|
82 |
|
83 | }
|
84 |
|
85 | function destroy() {
|
86 | if (_grid) {
|
87 | _grid.onClick.unsubscribe(handleGridClick);
|
88 | _grid.onKeyDown.unsubscribe(handleGridKeyDown);
|
89 | }
|
90 | }
|
91 |
|
92 | function handleGridClick(e, args) {
|
93 | var $target = $(e.target);
|
94 | var item = this.getDataItem(args.row);
|
95 | if (item && item instanceof Slick.Group && $target.hasClass(options.toggleCssClass)) {
|
96 | var range = _grid.getRenderedRange();
|
97 | this.getData().setRefreshHints({
|
98 | ignoreDiffsBefore: range.top,
|
99 | ignoreDiffsAfter: range.bottom + 1
|
100 | });
|
101 |
|
102 | if (item.collapsed) {
|
103 | this.getData().expandGroup(item.groupingKey);
|
104 | } else {
|
105 | this.getData().collapseGroup(item.groupingKey);
|
106 | }
|
107 |
|
108 | e.stopImmediatePropagation();
|
109 | e.preventDefault();
|
110 | }
|
111 | if (item && item instanceof Slick.Group && $target.hasClass(options.checkboxSelectCssClass)) {
|
112 | item.selectChecked = !item.selectChecked;
|
113 | $target.removeClass((item.selectChecked ? "unchecked" : "checked"));
|
114 | $target.addClass((item.selectChecked ? "checked" : "unchecked"));
|
115 |
|
116 | var rowIndexes = _grid.getData().mapItemsToRows(item.rows);
|
117 | (item.selectChecked ? options.checkboxSelectPlugin.selectRows : options.checkboxSelectPlugin.deSelectRows)(rowIndexes);
|
118 | }
|
119 | }
|
120 |
|
121 |
|
122 | function handleGridKeyDown(e, args) {
|
123 | if (options.enableExpandCollapse && (e.which == Slick.keyCode.SPACE)) {
|
124 | var activeCell = this.getActiveCell();
|
125 | if (activeCell) {
|
126 | var item = this.getDataItem(activeCell.row);
|
127 | if (item && item instanceof Slick.Group) {
|
128 | var range = _grid.getRenderedRange();
|
129 | this.getData().setRefreshHints({
|
130 | ignoreDiffsBefore: range.top,
|
131 | ignoreDiffsAfter: range.bottom + 1
|
132 | });
|
133 |
|
134 | if (item.collapsed) {
|
135 | this.getData().expandGroup(item.groupingKey);
|
136 | } else {
|
137 | this.getData().collapseGroup(item.groupingKey);
|
138 | }
|
139 |
|
140 | e.stopImmediatePropagation();
|
141 | e.preventDefault();
|
142 | }
|
143 | }
|
144 | }
|
145 | }
|
146 |
|
147 | function getGroupRowMetadata(item) {
|
148 | var groupLevel = item && item.level;
|
149 | return {
|
150 | selectable: false,
|
151 | focusable: options.groupFocusable,
|
152 | cssClasses: options.groupCssClass + ' slick-group-level-' + groupLevel,
|
153 | formatter: options.includeHeaderTotals && options.totalsFormatter,
|
154 | columns: {
|
155 | 0: {
|
156 | colspan: options.includeHeaderTotals?"1":"*",
|
157 | formatter: options.groupFormatter,
|
158 | editor: null
|
159 | }
|
160 | }
|
161 | };
|
162 | }
|
163 |
|
164 | function getTotalsRowMetadata(item) {
|
165 | var groupLevel = item && item.group && item.group.level;
|
166 | return {
|
167 | selectable: false,
|
168 | focusable: options.totalsFocusable,
|
169 | cssClasses: options.totalsCssClass + ' slick-group-level-' + groupLevel,
|
170 | formatter: options.totalsFormatter,
|
171 | editor: null
|
172 | };
|
173 | }
|
174 |
|
175 |
|
176 | return {
|
177 | "init": init,
|
178 | "destroy": destroy,
|
179 | "getGroupRowMetadata": getGroupRowMetadata,
|
180 | "getTotalsRowMetadata": getTotalsRowMetadata,
|
181 | "getOptions": getOptions,
|
182 | "setOptions": setOptions
|
183 | };
|
184 | }
|
185 | })(jQuery);
|