diff --git a/lib/ui/grid.d.ts b/lib/ui/grid.d.ts
index db26508..28a1c72 100644
--- a/lib/ui/grid.d.ts
+++ b/lib/ui/grid.d.ts
@@ -8,7 +8,7 @@ interface GridItem {
declare var GridColumn: {
create(): HTMLElement;
createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
- setValue(element: HTMLElement, val: any): void;
+ setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void;
getValue(e: any): any;
setStyle(element: HTMLElement, style: { [key: string]: string }): void;
setEnabled(element: HTMLElement, enabled?: boolean): void;
diff --git a/lib/ui/grid.html b/lib/ui/grid.html
index 2f4072f..ff2d59b 100644
--- a/lib/ui/grid.html
+++ b/lib/ui/grid.html
@@ -129,12 +129,16 @@
body: HTMLElement
Grid 正文表格元素
setValue
- static setValue(element: HTMLElement, val: any): void
+ static setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void
设置单元格值时触发的函数
element: HTMLElement
单元格元素
val: any
单元格的值
+ item: GridItem | any
+ 单元格所在行的数据项/p>
+ col: GridColumnDefinition
+
单元格所在列的定义对象
示例
@@ -165,11 +169,31 @@
}
};
+ const iconCol = {
+ ...Grid.GridColumn,
+
+ create() {
+ const a = document.createElement('a');
+ a.target = '_blank';
+ a.className = 'icon-col';
+ return a;
+ },
+ setValue(element, val, _item, col) {
+ if (col.tooltip) {
+ element.setAttribute('title', col.tooltip);
+ }
+ element.innerText = val;
+ },
+ setEnabled(element, enabled) {
+ element.style.display = enabled === false ? 'none' : '';
+ }
+ };
+
// grid.readonly = true;
grid.allowHtml = true;
grid.height = 0;
grid.columns = [
- { key: 'c1', caption: 'column 122222222311111111111111111', shrink: true },
+ { key: 'c1', caption: 'column 122222222311111111111111111' },
{ key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
{
key: 'c2a',
@@ -200,6 +224,16 @@
events: {
onclick() { console.log('deleted', this) }
}
+ },
+ {
+ key: 'c6',
+ type: iconCol,
+ enabled: 'enabled',
+ text: '\uf044',
+ tooltip: 'Edit',
+ events: {
+ onclick() { alert(`Edit, ${this.c1}`) }
+ }
}
];
grid.columnChanged = (type, index, value) => console.log(`column (${index}), ${type}, ${value}`);
diff --git a/style.css b/style.css
index 68c45cc..b009f5c 100644
--- a/style.css
+++ b/style.css
@@ -192,6 +192,20 @@ h1 {
font-size: 1em;
}
+.icon-col {
+ cursor: pointer;
+ color: rgb(123, 28, 33);
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: pre;
+ text-align: center;
+}
+
+.icon-col:hover {
+ text-decoration: underline;
+}
+
@media (prefers-color-scheme: light) {
:root {
color: #213547;