add sample screenshot

This commit is contained in:
2024-01-31 09:33:07 +08:00
parent a38af7577b
commit 24b5a22595
4 changed files with 80 additions and 25 deletions

View File

@ -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;