tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-04 08:58:57 +08:00
parent 3c1cbdf22e
commit de1ba82970
2 changed files with 60 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
lib/ui/grid.html
View File

@ -14,7 +14,28 @@
const Grid = window["lib-ui"].Grid;
const grid = new Grid(document.querySelector('#grid-sample'));
// grid.height = 0;
const statusCol = {
...Grid.GridColumn,
create() {
const container = document.createElement('div');
return container;
},
// createEdit() { },
setValue(element, val) {
element.innerHTML = val;
},
getValue(element) {
return element.innerHTML;
},
setEnabled(element, enabled) {
element.className = enabled === false ? 'disabled' : '';
}
};
grid.allowHtml = true;
grid.height = 0;
grid.columns = [
{ key: 'c1', caption: 'column 1' },
{ key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
@ -30,14 +51,25 @@
],
enabled: 'enabled'
},
{
key: 'c2b',
caption: 'column 2 b',
type: statusCol,
enabled: 'enabled'
},
{ key: 'c3', caption: 'column 3', width: 90 },
{ key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
];
grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
grid.cellClicked = (rId, cId) => {
console.log(`row (${rId}), column (${cId}) clicked.`);
return false;
};
grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);
grid.init();
grid.source = [
{ c1: 'abc', c2: true, c2a: 'off', c3: 12345, c4: 'another note', enabled: false },
{ c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c3: 1225, c4: 'Note note this is note' },
{ c1: 'abc', c2: true, c2a: 'off', c2b: '<font style="color: red; margin-left: 8px">red</font>', c3: 12345, c4: 'another note', enabled: false },
{ c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c2b: '<b style="margin-left: 8px">bold</b>', c3: 1225, c4: 'Note note this is note' },
{ c1: 'type', c2: false, c2a: 'broken', c3: 121111 },
{ c1: 'diff', c2: true, c2a: 'running', c3: 124445555555555555 },
{ c1: 'diff', c2: true, c2a: 'running', c3: 12499 },