jsl-ui 9.28.2 → 9.28.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/IntervalComponent.js +32 -35
- package/lib/components/auto-suggest/AutoSuggestComponent.js +19 -21
- package/lib/components/button/ButtonComponent.js +13 -30
- package/lib/components/checkbox/CheckBoxComponent.js +22 -39
- package/lib/components/date/DateComponent.js +29 -46
- package/lib/components/date-range/DateRangeComponent.js +48 -63
- package/lib/components/date-time/DateTimeComponent.js +17 -31
- package/lib/components/dialog/DialogComponent.js +75 -134
- package/lib/components/drop-down/DropDownComponent.js +23 -37
- package/lib/components/expander/ExpanderComponent.js +20 -23
- package/lib/components/form-field/FormComponent.js +9 -12
- package/lib/components/form-field/FormFieldComponent.js +28 -30
- package/lib/components/grid/GridComponent.js +46 -52
- package/lib/components/input/InputComponent.js +26 -47
- package/lib/components/loading/LoadingComponent.js +7 -9
- package/lib/components/navigation/NavigationComponent.js +20 -43
- package/lib/components/notification/Notification.js +18 -22
- package/lib/components/number/NumberComponent.js +28 -46
- package/lib/components/overlay/OverlayComponent.js +45 -60
- package/lib/components/progress/ProgressComponent.js +15 -17
- package/lib/components/ribbon-menu/RibbonMenuComponent.js +9 -20
- package/lib/components/select/SelectComponent.js +105 -122
- package/lib/components/select/SelectDDAreaComponent.js +108 -122
- package/lib/components/slider/nouislider.js +1 -1
- package/lib/components/stack-panel/SplitterComponent.js +27 -29
- package/lib/components/stack-panel/StackPanelComponent.js +17 -31
- package/lib/components/tabs/TabsComponent.js +53 -66
- package/lib/components/time/TimeComponent.js +32 -43
- package/lib/components/tree-view/TreeViewComponent.js +13 -16
- package/lib/components/virtual-render/VirtualRenderComponent.js +30 -44
- package/lib/core/culture.js +2 -2
- package/lib/core/date.js +68 -72
- package/lib/core/helper.js +30 -34
- package/lib/core/jq.js +54 -63
- package/lib/core/lang.js +24 -28
- package/lib/core/numeric.js +35 -39
- package/lib/grid/filterDialogs/dateRangeFilter.js +98 -148
- package/lib/grid/filterDialogs/excelFilter.js +205 -271
- package/lib/grid/plugins/ext.overlay.js +9 -9
- package/lib/grid/plugins/slick.cellrangedecorator.js +2 -2
- package/lib/grid/plugins/slick.cellrangeselector.js +1 -1
- package/lib/grid/plugins/slick.cellselectionmodel.js +8 -8
- package/lib/grid/plugins/slick.headerbuttons.js +1 -1
- package/lib/grid/plugins/slick.headermenu.js +1 -1
- package/lib/grid/plugins/slick.rowmovemanager.js +2 -2
- package/lib/grid/plugins/slick.rowselectionmodel.js +1 -1
- package/lib/grid/slick.core.js +1 -1
- package/lib/grid/slick.creator.js +144 -144
- package/lib/grid/slick.dataview.js +127 -138
- package/lib/grid/slick.editors.core.js +1 -1
- package/lib/grid/slick.editors.date.js +2 -2
- package/lib/grid/slick.editors.lookup.js +36 -37
- package/lib/grid/slick.editors.nav.js +1 -1
- package/lib/grid/slick.formatters.js +26 -26
- package/lib/grid/slick.grid.js +163 -166
- package/lib/grid/slick.groupitemmetadataprovider.js +4 -4
- package/lib/grid/slick.tree.js +91 -103
- package/lib/index.js.map +1 -1
- package/lib/interaction/eventhandler.js +20 -23
- package/lib/interaction/moveable.js +76 -90
- package/lib/interaction/resizable.js +58 -72
- package/lib/ui/auto.suggest.js +13 -28
- package/lib/ui/date.picker/lib/fns.js +1 -5
- package/lib/ui/dialog.js +28 -43
- package/lib/ui/drop.down.js +4 -4
- package/lib/ui/number.input.js +8 -19
- package/package.json +1 -1
|
@@ -12,22 +12,22 @@ import { UILang } from "../core/lang";
|
|
|
12
12
|
import { RowMoveManager } from "./plugins/slick.rowmovemanager";
|
|
13
13
|
import { Overlays } from "./plugins/ext.overlay";
|
|
14
14
|
import { helper } from "../core/helper";
|
|
15
|
-
|
|
15
|
+
const $ = jQueryReplacement;
|
|
16
16
|
export function createJSLGrid(selector, data, columns, option) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
const formulaObjects = [];
|
|
18
|
+
let headerMenu;
|
|
19
|
+
let headerButtons;
|
|
20
|
+
const formulas = {};
|
|
21
|
+
let container;
|
|
22
|
+
let filters = [];
|
|
23
|
+
let customCommandHandler;
|
|
24
|
+
let grid;
|
|
25
|
+
let dataView;
|
|
26
|
+
let rowMoveManager;
|
|
27
27
|
//let options: ISlickCreatorOptions;
|
|
28
28
|
function createMe() {
|
|
29
29
|
sanitizeColumns(columns);
|
|
30
|
-
|
|
30
|
+
const options = $.shallowExtend({ explicitInitialization: true, mode: "client" }, option);
|
|
31
31
|
container = typeof (selector) === "string" ?
|
|
32
32
|
document.querySelector(selector) :
|
|
33
33
|
selector;
|
|
@@ -39,19 +39,19 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
39
39
|
options.showPreHeaderPanel = true;
|
|
40
40
|
}
|
|
41
41
|
customCommandHandler = option.editCommandHandler;
|
|
42
|
-
options.editCommandHandler =
|
|
43
|
-
|
|
42
|
+
options.editCommandHandler = (a, b, c) => { handleEditCommand(a, b, c); };
|
|
43
|
+
const groupItemMetadataProvider = options.groupItemMetadataProvider || GroupItemMetadataProvider(options.groupItemOptions);
|
|
44
44
|
if (options.dataView != null) {
|
|
45
45
|
dataView = options.dataView;
|
|
46
46
|
}
|
|
47
47
|
else {
|
|
48
|
-
dataView = new DataView({ inlineFilters: true, groupItemMetadataProvider
|
|
48
|
+
dataView = new DataView({ inlineFilters: true, groupItemMetadataProvider });
|
|
49
49
|
dataView.setItems(data, options.primaryKey);
|
|
50
50
|
}
|
|
51
51
|
grid = new SlickGrid(container, dataView, columns, options);
|
|
52
52
|
grid.registerPlugin(groupItemMetadataProvider);
|
|
53
53
|
grid.setSelectionModel(new RowSelectionModel());
|
|
54
|
-
grid.onHeaderCellRendered.subscribe(
|
|
54
|
+
grid.onHeaderCellRendered.subscribe((e, args) => {
|
|
55
55
|
if (columnHasFilter(args.column.id)) {
|
|
56
56
|
//this column is filtered
|
|
57
57
|
args.node.classList.add("slick-filtered-header");
|
|
@@ -108,27 +108,27 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
108
108
|
grid.render();
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
|
-
|
|
111
|
+
const isTouch = helper.isTouchScreen();
|
|
112
112
|
if (option.enableFillDown && !isTouch) {
|
|
113
113
|
var overlayPlugin = new Overlays({});
|
|
114
114
|
// Event fires when a range is selected
|
|
115
115
|
overlayPlugin.onFillUpDown.subscribe(function (e, args) {
|
|
116
|
-
|
|
116
|
+
const column = grid.getColumns()[args.range.fromCell];
|
|
117
117
|
// Ensure the column is editable
|
|
118
118
|
if (column.editor == null || column.readonly || !grid.getOptions().editable) {
|
|
119
119
|
return;
|
|
120
120
|
}
|
|
121
121
|
// Find the initial value
|
|
122
122
|
dataView.beginUpdate();
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
let value;
|
|
124
|
+
const items = [];
|
|
125
125
|
if (args.direction === "down") {
|
|
126
|
-
|
|
126
|
+
const item = dataView.getItem(args.range.fromRow);
|
|
127
127
|
value = grid.getDataItemValueForColumn(item, column); // item[column.field];
|
|
128
128
|
// Copy the value down
|
|
129
|
-
for (
|
|
130
|
-
if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column
|
|
131
|
-
|
|
129
|
+
for (let i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
|
|
130
|
+
if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column }, e) !== false) {
|
|
131
|
+
const currentItem = dataView.getItem(i);
|
|
132
132
|
items.push(currentItem);
|
|
133
133
|
// if (options.setDataItemValueForColumn != null) {
|
|
134
134
|
// options.setDataItemValueForColumn(currentItem, column, value);
|
|
@@ -141,13 +141,13 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
else {
|
|
144
|
-
|
|
144
|
+
const item = dataView.getItem(args.range.toRow);
|
|
145
145
|
items.push(item);
|
|
146
146
|
value = grid.getDataItemValueForColumn(item, column); // item[column.field];
|
|
147
147
|
// Copy the value up
|
|
148
|
-
for (
|
|
149
|
-
if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column
|
|
150
|
-
|
|
148
|
+
for (let i = args.range.fromRow; i <= args.range.toRow - 1; i++) {
|
|
149
|
+
if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column }, e) !== false) {
|
|
150
|
+
const currentItem = dataView.getItem(i);
|
|
151
151
|
items.push(currentItem);
|
|
152
152
|
// if (options.setDataItemValueForColumn != null) {
|
|
153
153
|
// options.setDataItemValueForColumn(currentItem, column, value);
|
|
@@ -159,7 +159,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
|
-
grid.onAfterFillDown.notify({ grid
|
|
162
|
+
grid.onAfterFillDown.notify({ grid, value, column, direction: args.direction, range: args.range, items: items }, e);
|
|
163
163
|
dataView.endUpdate();
|
|
164
164
|
grid.render();
|
|
165
165
|
});
|
|
@@ -169,37 +169,37 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
169
169
|
grid.init();
|
|
170
170
|
}
|
|
171
171
|
if (options.showColumnGroups) {
|
|
172
|
-
setTimeout(
|
|
172
|
+
setTimeout(() => {
|
|
173
173
|
// TODO -> find better solution then timeout
|
|
174
|
-
grid.onColumnsResized.subscribe(
|
|
174
|
+
grid.onColumnsResized.subscribe(() => {
|
|
175
175
|
CreateColumnGroups();
|
|
176
176
|
});
|
|
177
177
|
CreateColumnGroups();
|
|
178
178
|
}, 1);
|
|
179
179
|
}
|
|
180
180
|
if (options.saveColumnsKey) {
|
|
181
|
-
grid.onColumnsResized.subscribe(
|
|
181
|
+
grid.onColumnsResized.subscribe(() => {
|
|
182
182
|
storeColumnSettings();
|
|
183
183
|
});
|
|
184
|
-
grid.onColumnsReordered.subscribe(
|
|
184
|
+
grid.onColumnsReordered.subscribe(() => {
|
|
185
185
|
storeColumnSettings();
|
|
186
186
|
});
|
|
187
187
|
loadColumnSettings();
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
function CreateColumnGroups() {
|
|
191
|
-
|
|
192
|
-
|
|
191
|
+
const options = grid.getOptions();
|
|
192
|
+
const columns = grid.getColumns();
|
|
193
193
|
if (options.frozenColumn >= 0) {
|
|
194
194
|
// Add column groups to left panel
|
|
195
|
-
|
|
195
|
+
let $preHeaderPanel = $(grid.getPreHeaderPanel());
|
|
196
196
|
renderHeaderGroups($preHeaderPanel, 0, options.frozenColumn + 1);
|
|
197
197
|
// Add column groups to right panel
|
|
198
198
|
$preHeaderPanel = $(grid.getPreHeaderPanelRight());
|
|
199
199
|
renderHeaderGroups($preHeaderPanel, options.frozenColumn + 1, columns.length);
|
|
200
200
|
}
|
|
201
201
|
else {
|
|
202
|
-
|
|
202
|
+
const $preHeaderPanel = $(grid.getPreHeaderPanel());
|
|
203
203
|
renderHeaderGroups($preHeaderPanel, 0, columns.length);
|
|
204
204
|
}
|
|
205
205
|
function renderHeaderGroups(preHeaderPanel, start, end) {
|
|
@@ -208,12 +208,12 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
208
208
|
.css("left", "-1000px")
|
|
209
209
|
.width(grid.getHeadersWidth());
|
|
210
210
|
preHeaderPanel[0].parentElement.classList.add("slick-header");
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
for (
|
|
216
|
-
|
|
211
|
+
const headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
|
|
212
|
+
let header;
|
|
213
|
+
let lastColumnGroup = "";
|
|
214
|
+
let widthTotal = 0;
|
|
215
|
+
for (let i = start; i < end; i++) {
|
|
216
|
+
const m = columns[i];
|
|
217
217
|
if (lastColumnGroup === m.columnGroup && i > start) {
|
|
218
218
|
widthTotal += m.width;
|
|
219
219
|
header.width(widthTotal - headerColumnWidthDiff);
|
|
@@ -230,9 +230,9 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
230
230
|
}
|
|
231
231
|
}
|
|
232
232
|
function storeColumnSettings() {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
233
|
+
const cols = grid.getColumns();
|
|
234
|
+
const options = grid.getOptions();
|
|
235
|
+
const colSettings = cols.map((c) => ({ id: c.id, width: c.width }));
|
|
236
236
|
if (window.localStorage) {
|
|
237
237
|
localStorage.setItem("_grid_col_settings_" + options.saveColumnsKey, JSON.stringify(colSettings));
|
|
238
238
|
}
|
|
@@ -241,18 +241,18 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
241
241
|
if (!window.localStorage) {
|
|
242
242
|
return;
|
|
243
243
|
}
|
|
244
|
-
|
|
245
|
-
|
|
244
|
+
const options = grid.getOptions();
|
|
245
|
+
const key = options.saveColumnsKey;
|
|
246
246
|
if (key) {
|
|
247
|
-
|
|
248
|
-
|
|
247
|
+
const cols = grid.getColumns();
|
|
248
|
+
const colSettings = JSON.parse(localStorage.getItem("_grid_col_settings_" + key));
|
|
249
249
|
if (!colSettings) {
|
|
250
250
|
return;
|
|
251
251
|
}
|
|
252
|
-
for (
|
|
253
|
-
for (
|
|
252
|
+
for (let i = 0; i < colSettings.length; i++) {
|
|
253
|
+
for (let j = 0; j < cols.length; j++) {
|
|
254
254
|
if (cols[j].id === colSettings[i].id) {
|
|
255
|
-
|
|
255
|
+
const c = cols[j];
|
|
256
256
|
c.width = colSettings[i].width;
|
|
257
257
|
if (i !== j) {
|
|
258
258
|
cols.splice(j, 1);
|
|
@@ -266,8 +266,8 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
266
266
|
}
|
|
267
267
|
}
|
|
268
268
|
function sanitizeColumns(cols) {
|
|
269
|
-
for (
|
|
270
|
-
|
|
269
|
+
for (let i = 0; i < cols.length; i++) {
|
|
270
|
+
const c = cols[i];
|
|
271
271
|
if (c.field === undefined && c.id) {
|
|
272
272
|
c.field = c.id;
|
|
273
273
|
}
|
|
@@ -279,7 +279,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
279
279
|
grid.onAfterFillDown = new Slick.Event();
|
|
280
280
|
}
|
|
281
281
|
function setupChangeEvents() {
|
|
282
|
-
dataView.onRowsChanged.subscribe(
|
|
282
|
+
dataView.onRowsChanged.subscribe((e, args) => {
|
|
283
283
|
grid.invalidateRows(args.rows);
|
|
284
284
|
grid.render();
|
|
285
285
|
// for (let idx = 0; idx < args.rows.length; idx++) {
|
|
@@ -287,21 +287,21 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
287
287
|
// }
|
|
288
288
|
// grid.invalidate();
|
|
289
289
|
});
|
|
290
|
-
dataView.onRowCountChanged.subscribe(
|
|
290
|
+
dataView.onRowCountChanged.subscribe((e, args) => {
|
|
291
291
|
grid.updateRowCount();
|
|
292
292
|
grid.render();
|
|
293
293
|
});
|
|
294
|
-
grid.onAddNewRow.subscribe(
|
|
295
|
-
|
|
294
|
+
grid.onAddNewRow.subscribe((e, args) => {
|
|
295
|
+
const options = grid.getOptions();
|
|
296
296
|
if (options.provideDefaultValues != null) {
|
|
297
|
-
|
|
297
|
+
const result = options.provideDefaultValues(args.item);
|
|
298
298
|
if (result === false) {
|
|
299
299
|
return;
|
|
300
300
|
}
|
|
301
301
|
}
|
|
302
302
|
dataView.addItem(args.item);
|
|
303
303
|
grid.onAfterEdit.notify({
|
|
304
|
-
grid
|
|
304
|
+
grid,
|
|
305
305
|
oldValue: undefined,
|
|
306
306
|
newValue: grid.getDataItemValueForColumn(args.item, args.column),
|
|
307
307
|
column: args.column,
|
|
@@ -310,9 +310,9 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
310
310
|
});
|
|
311
311
|
}
|
|
312
312
|
function setupDefaultSort() {
|
|
313
|
-
|
|
313
|
+
const options = grid.getOptions();
|
|
314
314
|
if (options.mode === "client") {
|
|
315
|
-
grid.onSort.subscribe(
|
|
315
|
+
grid.onSort.subscribe((e, args) => {
|
|
316
316
|
sort(args.sortCol, args.sortAsc);
|
|
317
317
|
});
|
|
318
318
|
}
|
|
@@ -325,9 +325,9 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
325
325
|
function setupHeaderMenu() {
|
|
326
326
|
headerMenu = new HeaderMenu({});
|
|
327
327
|
grid.registerPlugin(headerMenu);
|
|
328
|
-
headerMenu.onBeforeMenuShow.subscribe(
|
|
329
|
-
|
|
330
|
-
|
|
328
|
+
headerMenu.onBeforeMenuShow.subscribe((e, args) => {
|
|
329
|
+
const column = args.column;
|
|
330
|
+
const menu = args.menu;
|
|
331
331
|
if (column.sortable) {
|
|
332
332
|
menu.items.push({
|
|
333
333
|
title: UILang.grid.Sort + " " + UILang.grid.Asc,
|
|
@@ -343,7 +343,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
343
343
|
title: UILang.grid.Filter,
|
|
344
344
|
command: "filter"
|
|
345
345
|
});
|
|
346
|
-
if (filters.filter(
|
|
346
|
+
if (filters.filter((f) => f.columnId === column.id).length > 0) {
|
|
347
347
|
menu.items.push({
|
|
348
348
|
title: UILang.grid.ClearFilter,
|
|
349
349
|
command: "clear-filter"
|
|
@@ -351,7 +351,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
});
|
|
354
|
-
headerMenu.onCommand.subscribe(
|
|
354
|
+
headerMenu.onCommand.subscribe((e, args) => {
|
|
355
355
|
if (args.command === "sort-asc" || args.command === "sort-desc") {
|
|
356
356
|
grid.onSort.notify({
|
|
357
357
|
sortAsc: args.command === "sort-asc",
|
|
@@ -363,7 +363,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
363
363
|
// sort(args.column, args.command === "sort-asc");
|
|
364
364
|
}
|
|
365
365
|
else if (args.command === "filter") {
|
|
366
|
-
|
|
366
|
+
const options = grid.getOptions();
|
|
367
367
|
if (options.showFilterDialog != null) {
|
|
368
368
|
options.showFilterDialog(args.column, grid);
|
|
369
369
|
}
|
|
@@ -378,10 +378,10 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
378
378
|
}
|
|
379
379
|
// refresh formulas depending on the given column
|
|
380
380
|
function triggerFormula(column, item) {
|
|
381
|
-
|
|
382
|
-
|
|
381
|
+
const options = grid.getOptions();
|
|
382
|
+
const f = formulas[column];
|
|
383
383
|
if (f) {
|
|
384
|
-
for (
|
|
384
|
+
for (let i = 0, l = f.length; i < l; i++) {
|
|
385
385
|
if (options.setDataItemValueForColumn != null) {
|
|
386
386
|
options.setDataItemValueForColumn(item, f[i].column, f[i].fnc(item, column));
|
|
387
387
|
}
|
|
@@ -392,8 +392,8 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
392
392
|
}
|
|
393
393
|
}
|
|
394
394
|
function handleEditCommand(item, column, editCommand) {
|
|
395
|
-
|
|
396
|
-
|
|
395
|
+
const options = grid.getOptions();
|
|
396
|
+
const oldVal = grid.getDataItemValueForColumn(item, column);
|
|
397
397
|
if (customCommandHandler) {
|
|
398
398
|
customCommandHandler(item, column, editCommand);
|
|
399
399
|
}
|
|
@@ -402,12 +402,12 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
402
402
|
}
|
|
403
403
|
triggerFormula(column.field, item);
|
|
404
404
|
dataView.updateItem(item[options.primaryKey], item);
|
|
405
|
-
|
|
406
|
-
grid
|
|
405
|
+
const afterEditResult = grid.onAfterEdit.notify({
|
|
406
|
+
grid,
|
|
407
407
|
oldValue: oldVal,
|
|
408
408
|
newValue: grid.getDataItemValueForColumn(item, column),
|
|
409
|
-
column
|
|
410
|
-
item
|
|
409
|
+
column,
|
|
410
|
+
item
|
|
411
411
|
});
|
|
412
412
|
if (afterEditResult === false) {
|
|
413
413
|
if (options.setDataItemValueForColumn != null) {
|
|
@@ -429,8 +429,8 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
429
429
|
}
|
|
430
430
|
function sort(column, sortAsc) {
|
|
431
431
|
function _comparer(a, b) {
|
|
432
|
-
|
|
433
|
-
|
|
432
|
+
let x = grid.getDataItemValueForColumn(a, column);
|
|
433
|
+
let y = grid.getDataItemValueForColumn(b, column);
|
|
434
434
|
if (typeof x === "string" && typeof y === "string") {
|
|
435
435
|
x = x.toLocaleLowerCase();
|
|
436
436
|
y = y.toLocaleLowerCase();
|
|
@@ -446,17 +446,17 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
448
|
function _visibleComparer(a, b) {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
449
|
+
const x = column.formatter(0, 0, grid.getDataItemValueForColumn(a, column), column, a);
|
|
450
|
+
const y = column.formatter(0, 0, grid.getDataItemValueForColumn(b, column), column, b);
|
|
451
|
+
let xStr = (Object.prototype.toString.call(x) !== "[object Object]" ? x : x.text);
|
|
452
|
+
let yStr = (Object.prototype.toString.call(y) !== "[object Object]" ? y : y.text);
|
|
453
453
|
if (typeof x === "string" && typeof y === "string") {
|
|
454
454
|
xStr = x.toLocaleLowerCase();
|
|
455
455
|
yStr = y.toLocaleLowerCase();
|
|
456
456
|
}
|
|
457
457
|
return (xStr === yStr ? 0 : (xStr > yStr ? 1 : -1));
|
|
458
458
|
}
|
|
459
|
-
|
|
459
|
+
const comparer = column.comparer || (column.sortByVisibleValue ? _visibleComparer : _comparer);
|
|
460
460
|
dataView.sort(comparer, sortAsc ? true : false);
|
|
461
461
|
}
|
|
462
462
|
function setData(newData) {
|
|
@@ -477,27 +477,27 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
477
477
|
grid.invalidate();
|
|
478
478
|
}
|
|
479
479
|
function addFormula(field, fnc, usedColumns) {
|
|
480
|
-
formulaObjects.push({ fnc
|
|
481
|
-
for (
|
|
480
|
+
formulaObjects.push({ fnc, column: field });
|
|
481
|
+
for (let i = 0; i < usedColumns.length; i++) {
|
|
482
482
|
if (!formulas[usedColumns[i]]) {
|
|
483
483
|
formulas[usedColumns[i]] = [];
|
|
484
484
|
}
|
|
485
|
-
formulas[usedColumns[i]].push({ fnc
|
|
485
|
+
formulas[usedColumns[i]].push({ fnc, column: field });
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
488
|
/**
|
|
489
489
|
* returns the string representation of a value based on column settings
|
|
490
490
|
*/
|
|
491
491
|
function getFormattedValue(column, value, item) {
|
|
492
|
-
|
|
493
|
-
|
|
492
|
+
const formatter = column.formatter || TextFormatter;
|
|
493
|
+
const formatterResult = formatter(0, 0, value, column, item, grid);
|
|
494
494
|
return (Object.prototype.toString.call(formatterResult) !== "[object Object]" ?
|
|
495
495
|
formatterResult :
|
|
496
496
|
(formatterResult.text));
|
|
497
497
|
}
|
|
498
498
|
function getContentWidth(column, row) {
|
|
499
|
-
|
|
500
|
-
|
|
499
|
+
const item = dataView.getItem(row);
|
|
500
|
+
const html = getFormattedValue(column, grid.getDataItemValueForColumn(item, column), item);
|
|
501
501
|
if (html.indexOf("<") >= 0) {
|
|
502
502
|
return calcLengthInternal(html, true) + 12;
|
|
503
503
|
}
|
|
@@ -509,14 +509,14 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
509
509
|
return calcTextLength(convertElement.textContent) + 12;
|
|
510
510
|
}
|
|
511
511
|
}
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
512
|
+
let measureElement;
|
|
513
|
+
let convertElement;
|
|
514
|
+
const charWidth = {};
|
|
515
515
|
function calcTextLength(text) {
|
|
516
|
-
|
|
517
|
-
for (
|
|
518
|
-
|
|
519
|
-
|
|
516
|
+
let result = 0;
|
|
517
|
+
for (let i = 0; i < text.length; i++) {
|
|
518
|
+
const c = text[i];
|
|
519
|
+
let w = charWidth[c];
|
|
520
520
|
if (w == null) {
|
|
521
521
|
charWidth[c] = w = calcLengthInternal(c, false);
|
|
522
522
|
}
|
|
@@ -531,7 +531,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
531
531
|
measureElement.style.position = "absolute";
|
|
532
532
|
measureElement.style.whiteSpace = "pre";
|
|
533
533
|
document.body.appendChild(measureElement);
|
|
534
|
-
grid.onBeforeDestroy.subscribe(
|
|
534
|
+
grid.onBeforeDestroy.subscribe(() => {
|
|
535
535
|
if (measureElement.parentElement != null) {
|
|
536
536
|
measureElement.parentElement.removeChild(measureElement);
|
|
537
537
|
}
|
|
@@ -546,8 +546,8 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
546
546
|
return measureElement.getBoundingClientRect().width;
|
|
547
547
|
}
|
|
548
548
|
function fitToContent(column) {
|
|
549
|
-
|
|
550
|
-
for (
|
|
549
|
+
let width = 10;
|
|
550
|
+
for (let idx = 0, len = grid.getDataLength(); idx < len; idx++) {
|
|
551
551
|
//const d = grid.getDataItem(idx);
|
|
552
552
|
width = Math.max(width, getContentWidth(column, idx));
|
|
553
553
|
}
|
|
@@ -560,16 +560,16 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
560
560
|
if (formulaObjects.length === 0) {
|
|
561
561
|
return;
|
|
562
562
|
}
|
|
563
|
-
for (
|
|
564
|
-
for (
|
|
565
|
-
|
|
563
|
+
for (let j = 0; j < formulaObjects.length; j++) {
|
|
564
|
+
for (let i = 0; i < data.length; i++) {
|
|
565
|
+
const val = formulaObjects[j].fnc(data[i], grid, formulaObjects[j].column);
|
|
566
566
|
data[i][formulaObjects[j].column] = val;
|
|
567
567
|
}
|
|
568
568
|
}
|
|
569
569
|
refreshData();
|
|
570
570
|
}
|
|
571
571
|
function columnHasFilter(columnId) {
|
|
572
|
-
for (
|
|
572
|
+
for (let i = 0, l = (filters ? filters.length : 0); i < l; i++) {
|
|
573
573
|
if (filters[i].columnId === columnId) {
|
|
574
574
|
return true;
|
|
575
575
|
}
|
|
@@ -577,10 +577,10 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
577
577
|
return false;
|
|
578
578
|
}
|
|
579
579
|
function refreshDataItem(item) {
|
|
580
|
-
|
|
580
|
+
const options = grid.getOptions();
|
|
581
581
|
dataView.updateItem(item[options.primaryKey], item);
|
|
582
582
|
// formula refresh
|
|
583
|
-
for (
|
|
583
|
+
for (const f in formulas) {
|
|
584
584
|
if (formulas.hasOwnProperty(f)) {
|
|
585
585
|
triggerFormula(f, item);
|
|
586
586
|
}
|
|
@@ -588,14 +588,14 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
588
588
|
grid.updateRow(dataView.getRowByItem(item));
|
|
589
589
|
}
|
|
590
590
|
function addFilter(filter, dontrefresh) {
|
|
591
|
-
|
|
591
|
+
let filterArray;
|
|
592
592
|
if (Array.isArray(filter)) {
|
|
593
593
|
filterArray = filter;
|
|
594
594
|
}
|
|
595
595
|
else {
|
|
596
596
|
filterArray = [filter];
|
|
597
597
|
}
|
|
598
|
-
for (
|
|
598
|
+
for (let idx = 0; idx < filterArray.length; idx++) {
|
|
599
599
|
// add filter
|
|
600
600
|
filters.push(filterArray[idx]);
|
|
601
601
|
}
|
|
@@ -617,7 +617,7 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
617
617
|
filters.length = 0;
|
|
618
618
|
}
|
|
619
619
|
else {
|
|
620
|
-
for (
|
|
620
|
+
for (let i = 0; i < filters.length; i++) {
|
|
621
621
|
if (filters[i].columnId === columnId) {
|
|
622
622
|
filters.splice(i, 1);
|
|
623
623
|
i--;
|
|
@@ -629,9 +629,9 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
629
629
|
}
|
|
630
630
|
}
|
|
631
631
|
function refreshFilters(noColumnHeaderRefresh) {
|
|
632
|
-
|
|
632
|
+
const options = grid.getOptions();
|
|
633
633
|
function client_filter(item, args) {
|
|
634
|
-
|
|
634
|
+
const filterArray = args;
|
|
635
635
|
// no filter present -> show all rows
|
|
636
636
|
if (filterArray.length === 0) {
|
|
637
637
|
return true;
|
|
@@ -640,10 +640,10 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
640
640
|
return filterArray[0].match.call(null, item, filterArray[0].field);
|
|
641
641
|
}
|
|
642
642
|
else {
|
|
643
|
-
|
|
644
|
-
|
|
643
|
+
let result = true;
|
|
644
|
+
let i = 0;
|
|
645
645
|
while (i < filterArray.length) {
|
|
646
|
-
|
|
646
|
+
let orResult = false;
|
|
647
647
|
while (i < filterArray.length) { // combine or(s)
|
|
648
648
|
if (orResult || filterArray[i].match.call(null, item, filterArray[i].field)) {
|
|
649
649
|
orResult = true;
|
|
@@ -675,11 +675,11 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
675
675
|
grid.onFiltersChanged.notify();
|
|
676
676
|
}
|
|
677
677
|
function getSelectedItems() {
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
for (
|
|
681
|
-
|
|
682
|
-
|
|
678
|
+
const selRows = grid.getSelectedRows();
|
|
679
|
+
const rows = [];
|
|
680
|
+
for (let i = 0; i < selRows.length; i++) {
|
|
681
|
+
const rowIdx = selRows[i];
|
|
682
|
+
const toPush = dataView.getItem(rowIdx);
|
|
683
683
|
if (toPush !== undefined && !toPush.__group && !toPush.__groupTotals) {
|
|
684
684
|
rows.push(toPush);
|
|
685
685
|
}
|
|
@@ -697,29 +697,29 @@ export function createJSLGrid(selector, data, columns, option) {
|
|
|
697
697
|
// }
|
|
698
698
|
createMe();
|
|
699
699
|
return $.shallowExtend(grid, {
|
|
700
|
-
dataView
|
|
701
|
-
setHeight
|
|
702
|
-
getHeight
|
|
703
|
-
sort
|
|
704
|
-
refreshData
|
|
705
|
-
setData
|
|
706
|
-
getData
|
|
707
|
-
refresh
|
|
708
|
-
addFormula
|
|
709
|
-
getFormattedValue
|
|
710
|
-
getContentWidth
|
|
711
|
-
fitToContent
|
|
712
|
-
triggerAllFormulas
|
|
713
|
-
columnHasFilter
|
|
714
|
-
refreshDataItem
|
|
715
|
-
addFilter
|
|
716
|
-
setFilters
|
|
717
|
-
getFilters
|
|
718
|
-
clearFilter
|
|
719
|
-
refreshFilters
|
|
720
|
-
getSelectedItems
|
|
721
|
-
getRowMoveManager
|
|
722
|
-
getHeaderMenu
|
|
700
|
+
dataView,
|
|
701
|
+
setHeight,
|
|
702
|
+
getHeight,
|
|
703
|
+
sort,
|
|
704
|
+
refreshData,
|
|
705
|
+
setData,
|
|
706
|
+
getData,
|
|
707
|
+
refresh,
|
|
708
|
+
addFormula,
|
|
709
|
+
getFormattedValue,
|
|
710
|
+
getContentWidth,
|
|
711
|
+
fitToContent,
|
|
712
|
+
triggerAllFormulas,
|
|
713
|
+
columnHasFilter,
|
|
714
|
+
refreshDataItem,
|
|
715
|
+
addFilter,
|
|
716
|
+
setFilters,
|
|
717
|
+
getFilters,
|
|
718
|
+
clearFilter,
|
|
719
|
+
refreshFilters,
|
|
720
|
+
getSelectedItems,
|
|
721
|
+
getRowMoveManager,
|
|
722
|
+
getHeaderMenu,
|
|
723
723
|
refreshColumnGroups: CreateColumnGroups
|
|
724
724
|
// setHierachy
|
|
725
725
|
});
|