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;