From 12680cc662236b9cee3161342534713e76ec2243 Mon Sep 17 00:00:00 2001 From: Tsanie Date: Sun, 4 Feb 2024 16:20:58 +0800 Subject: [PATCH] GridColumnDefinition examples --- jsdoc/grid/assets/column-types.png | Bin 0 -> 12574 bytes lib/ui/css/grid.scss | 1 + lib/ui/grid/grid.js | 41 +++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+) create mode 100644 jsdoc/grid/assets/column-types.png diff --git a/jsdoc/grid/assets/column-types.png b/jsdoc/grid/assets/column-types.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e7a04cd75bf9b1f0d9dcf1576f006c04d12f2 GIT binary patch literal 12574 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 literal 0 HcmV?d00001 diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss index 4cb9850..8ce9ff9 100644 --- a/lib/ui/css/grid.scss +++ b/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); diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js index 344b1d3..b89b5fd 100644 --- a/lib/ui/grid/grid.js +++ b/lib/ui/grid/grid.js @@ -158,6 +158,9 @@ let r = lang; /** * 列定义接口 + * + * Column Types
+ * 代码参考页面下方的示例 * @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 { /**