diff --git a/README.md b/README.md
index 8fa00c4..49c3e67 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
-# ui-lib
+# [ui-lib].Grid
-UI Mordern Library
\ No newline at end of file
+UI Mordern Gridview Library
\ No newline at end of file
diff --git a/jsdoc/grid/assets/grid-sample.png b/jsdoc/grid/assets/grid-sample.png
new file mode 100644
index 0000000..68da0b4
Binary files /dev/null and b/jsdoc/grid/assets/grid-sample.png differ
diff --git a/lib/ui/date.js b/lib/ui/date.js
index c7542e2..aeea3fa 100644
--- a/lib/ui/date.js
+++ b/lib/ui/date.js
@@ -4,11 +4,14 @@ import { createElement } from "../functions";
* 创建或转换日期选择框
* @param {string} [min] - 最小可选日期
* @param {string} [max] - 最大可选日期
- * @param {HTMLInputElement} [element] - 转换该元素为日期选择框
+ * @param {HTMLInputElement | string} [element] - 转换该元素为日期选择框
* @returns {HTMLInputElement} 返回创建或转换的日期选择框
*/
export function createDateInput(min, max, element) {
let date;
+ if (typeof element === 'string') {
+ element = document.querySelector(element);
+ }
if (element instanceof HTMLInputElement) {
date = element;
date.classList.add('ui-date-cell');
@@ -121,13 +124,6 @@ export function getDateValue(element, formatter) {
return '';
}
-/**
- * 日期选中触发的回调函数
- * @callback DateSelectedCallback
- * @param {Date} date - 修改后的日期值
- * @this DateSelector
- */
-
/**
* 日期选择框类
* @class
@@ -140,7 +136,8 @@ export class DateSelector {
/**
* 日期发生变化时触发的事件
* @event
- * @type {DateSelectedCallback}
+ * @param {Date} date - 修改后的日期值
+ * @this DateSelector
*/
onDateChanged;
@@ -152,6 +149,24 @@ export class DateSelector {
* @param {string} [opts.minDate] - 最小可选择日期
* @param {string} [opts.maxDate] - 最大可选择日期
* @param {DateFormatterCallback} [opts.valueFormatter] - 自定义格式化函数
+ * @example <caption>创建一个 DateSelector 并插入到元素中</caption>
+ * <div id="dateFrom"></div>
+ * @example
+ * // 构造参数
+ * const opts = {
+ * minDate: '2020-01-01',
+ * maxDate: '2024-02-01',
+ * valueFormatter: (date) => {
+ * return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; // 2024/1/31
+ * }
+ * };
+ * const dateSelectorFrom = new DateSelector(opts);
+ * document.querySelector('#dateFrom').appendChild(dateSelectorFrom.create());
+ * @example <caption>将一个元素转化为 DateSelector</caption>
+ * <input id="dateTo"></div>
+ * @example
+ * const dateSelectorTo = new DateSelector();
+ * dateSelectorTo.create('#dateTo');
*/
constructor(opts) {
this._var.options = opts ?? {};
@@ -159,7 +174,7 @@ export class DateSelector {
/**
* 创建或转换日期选择框元素
- * @param {HTMLInputElement} [element] - 转换该元素为日期选择框
+ * @param {HTMLInputElement | string} [element] - 转换该元素为日期选择框
* @returns {HTMLInputElement} 返回创建或转换的日期选择元素
*/
create(element) {
@@ -245,7 +260,9 @@ export class DateSelector {
* 解析的属性为 `id`, `class`, `data-min`, `data-max`, `disabled`
* @static
* @param {HTMLElement} [dom=document.body] 父元素
- * @param {DateSelectedCallback} trigger 日期设置事件触发函数（上下文为触发设置日期的 `DateSelector` 实例）
+ * @param {Function} [trigger] 日期设置事件触发函数
+ * @param {Date} trigger.[this]] - 上下文为触发设置日期的 `DateSelector` 实例
+ * @param {Date} trigger.date - 修改后的日期值
* @example <caption>HTML</caption>
* <input id="dateFrom" data-type="date" data-min="1980-01-01"/>
* @example <caption>解析父容器</caption>
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index 3291823..9a34c85 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -275,17 +275,52 @@ const GridColumnDirection = {
* @property {("asc" | "desc")} order - 升序或降序
*/
-/**
- * 多语言文本资源回调函数
- * @callback GridLanguageCallback
- * @param {string} id - 资源 ID
- * @param {string} [def] - 默认资源
- * @returns 返回获取的多语言资源
- */
-
/**
* Grid 控件基础类
+ *
+ * <img src="./assets/grid-sample.png" alt="Grid Sample"/>
* @class
+ * @example <caption>基础示例</caption>
+ * <div id="grid"></div>
+ * @example
+ * #grid>.ui-grid {
+ * width: 600px;
+ * height: 400px;
+ * }
+ * @example
+ * const grid = new Grid('#grid', GetTextByKey);
+ * grid.columns = [
+ * {
+ * key: 'name',
+ * caption: 'Name',
+ * width: 140,
+ * allowFilter: true
+ * },
+ * {
+ * key: 'age',
+ * caption: 'Age',
+ * type: Grid.ColumnTypes.Input,
+ * width: 80
+ * },
+ * {
+ * key: 'study',
+ * caption: 'Study',
+ * type: Grid.ColumnTypes.Dropdown,
+ * width: 120,
+ * source: [
+ * { value: 'a', text: 'A' },
+ * { value: 'b', text: 'B' },
+ * { value: 'c', text: 'C' }
+ * ]
+ * }
+ * ];
+ * grid.multiSelect = true;
+ * grid.init();
+ * grid.source = [
+ * { name: '张三', age: '19', study: 'a' },
+ * { name: '李四', age: '24', study: 'a' },
+ * { name: '王五', age: '20', study: 'c' }
+ * ];
*/
export class Grid {
_var = {
@@ -492,10 +527,13 @@ export class Grid {
/**
*
- * @param {(string | HTMLElement)} container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象
- * Grid 控件构造函数
- * _构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值_
- * @param {GridLanguageCallback} [getText] 获取多语言文本的函数代理
+ * @param {(string | HTMLElement)?} container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象
+ * Grid 控件构造函数<br/>
+ * _**构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值**_
+ * @param {Function} [getText] 获取多语言文本的函数代理
+ * @param {string} getText.id - 资源 ID
+ * @param {string} [getText.def] - 默认资源
+ * @param {string} getText.[returns]] 返回的多语言
*/
constructor(container, getText) {
this._var.parent = typeof container === 'string' ? document.querySelector(container) : container;