add sample of old icon column.

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;

lib/ui/grid.html

@@ -129,12 +129,16 @@
   <samp>body: HTMLElement</samp>
   <p>Grid 正文表格元素</p>
   <h4>setValue</h4>
-  <code>static setValue(element: HTMLElement, val: any): void</code>
+  <code>static setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void</code>
   <p>设置单元格值时触发的函数</p>
   <samp>element: HTMLElement</samp>
   <p>单元格元素</p>
   <samp>val: any</samp>
   <p>单元格的值</p>
+  <samp>item: GridItem | any</samp>
+  <p>单元格所在行的数据项/p>
+    <samp>col: GridColumnDefinition</samp>
+  <p>单元格所在列的定义对象</p>
   <hr />
   <h2>示例</h2>
   <pre></pre>
@@ -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}`);

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;