GridColumnDefinition examples

lib/ui/css/grid.scss

@@ -53,6 +53,7 @@
 
     &,
     input[type="text"],
+    input[type="date"],
     textarea {
         font-size: var(--font-size);
         font-family: var(--font-family);

lib/ui/grid/grid.js

@@ -158,6 +158,9 @@ let r = lang;
 
 /**
  * 列定义接口
+ * 
+ * <img src="./assets/column-types.png" alt="Column Types"/><br/>
+ * 代码参考页面下方的示例
  * @class
  * @property {string} key - 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值
  * @property {(GridColumnTypeEnum | GridColumn)} [type=Grid.ColumnTypes.Common] - 列的类型，可以为 {@linkcode GridColumn} 的子类，或者如下内置类型 {@linkcode Grid.ColumnTypes}
@@ -236,6 +239,44 @@ let r = lang;
  * @property {GridColumnDefinition} tooltip.{this} - 上下文为列定义对象
  * @property {GridItem} tooltip.item - 行数据对象
  * @property {string} tooltip.{returns} - 返回额外 tooltip 字符串
+ * @example
+ *  [
+ *      {
+ *          key: 'name',
+ *          // type: Grid.ColumnTypes.Common,
+ *          caption: 'Name'
+ *      },
+ *      {
+ *          key: 'age',
+ *          type: Grid.ColumnTypes.Input,
+ *          caption: 'Age'
+ *      },
+ *      {
+ *          key: 'sex',
+ *          type: Grid.ColumnTypes.Dropdown,
+ *          caption: 'Sex',
+ *          source: [
+ *              { value: 'male', text: 'Male' },
+ *              { value: 'female', text: 'Female' },
+ *              { value: 'other', text: 'Other' }
+ *          ]
+ *      },
+ *      {
+ *          key: 'active',
+ *          type: Grid.ColumnTypes.Checkbox,
+ *          caption: 'Active'
+ *      },
+ *      {
+ *          key: 'birthday',
+ *          type: Grid.ColumnTypes.Date,
+ *          caption: 'Birthday'
+ *      },
+ *      {
+ *          key: 'remove',
+ *          type: Grid.ColumnTypes.Icon,
+ *          text: 'times'
+ *      }
+ *  ]
  */
 class GridColumnDefinition {
     /**