@activewidgets/html 中文文档教程
ActiveWidgets/HTML • Datagrid
ActiveWidgets 是一个多框架 UI 组件库。 此包提供 datagrid 组件 作为 HTML5/CustomElement。
Installation
添加 @activewidgets/html到您的项目依赖项 -
> npm i --save @activewidgets/html
Usage
将库导入您的应用程序以注册自定义元素标签 -
import "@activewidgets/html";
ax-... 标签现在将用作 ActiveWidgets 组件。
<ax-datagrid>Loading...</ax-datagrid>
然后，您可以使用标准 DOM API 分配属性和事件处理程序。
const el = document.querySelector('ax-datagrid');
el.rows = [
{ message: 'Hello, World!' }
];
实例 | github 上的源 | 在 Codesandbox 上编辑
CDN links
为了快速制作原型，该包也可通过 ActiveWidgets CDN 获得-
<script src="https://cdn.activewidgets.com/html"></script>
实例 | github 上的源 | 在 Codesandbox 上编辑
Data properties
你必须提供 columns 和 rows 数据网格的属性显示一些数据。 每个 column 对象的属性定义了数据的呈现方式 -
- field - where the cell data comes from (string|function)
- header - column header (string|object)
- width - column width (number, in pixels)
- align - cell text alignment (left|right|center)
- format - number/date format (string|function)
- fixed - fixed (true/false) for columns on the left or right side
style（字符串|对象）或 className 属性允许更改样式列和单元格元素。
const el = document.querySelector('ax-datagrid');
el.columns = [
{ header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true },
{ header: 'Company Name', field: 'companyName', width: 160 },
{ header: 'Contact', field: 'contactName', width: 120 },
{ header: 'Title', field: 'contactTitle', width: 120 },
{ header: 'Address', field: 'address', width: 120, align: 'right' }
];
el.rows = northwind.customers;
实例 | github 上的源 | 在 Codesandbox 上编辑
User events
除了数据网格发出的标准 DOM 键盘和鼠标事件合成的 mouse 事件，可以更轻松地找到受用户操作影响的元素。
function onMouse({row}){
alert(`row ${row.key} clicked!`);
}
const el = document.querySelector('ax-datagrid');
el.columns = columns;
el.rows = rows;
el.addEventListener('mouse', event => onMouse(event.detail), true);
实例 | github 上的源 | 在Codesandbox上编辑
分配事件处理程序时，注意传递事件数据在 event.detail 属性中（我们使用的是 DOM CustomEvent 类）。
ActiveWidgets 自定义事件不会冒泡，因此您应该始终在组件本身而不是某些父元素处添加事件处理程序。
More info
ActiveWidgets/HTML • Datagrid
ActiveWidgets is a multi-framework UI component library. This package provides datagrid component as HTML5/CustomElement.
Live demo / Developer guide / API reference
Installation
Add @activewidgets/html to your project dependencies -
> npm i --save @activewidgets/html
Usage
Import the library into your app to register the custom element tags -
import "@activewidgets/html";
The ax-... tags will now function as ActiveWidgets components.
<ax-datagrid>Loading...</ax-datagrid>
You can then assign properties and event handlers using standard DOM API.
const el = document.querySelector('ax-datagrid');
el.rows = [
{ message: 'Hello, World!' }
];
Live example | Source on github | Edit on Codesandbox
CDN links
For quick prototyping the package is also available over ActiveWidgets CDN -
<script src="https://cdn.activewidgets.com/html"></script>
Live example | Source on github | Edit on Codesandbox
Data properties
You have to provide columns and rows properties to the datagrid to show some data. The properties of each column object define how the data will be rendered -
- field - where the cell data comes from (string|function)
- header - column header (string|object)
- width - column width (number, in pixels)
- align - cell text alignment (left|right|center)
- format - number/date format (string|function)
- fixed - fixed (true/false) for columns on the left or right side
The style (string|object) or className properties allow to change the styling of the column and cell elements.
const el = document.querySelector('ax-datagrid');
el.columns = [
{ header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true },
{ header: 'Company Name', field: 'companyName', width: 160 },
{ header: 'Contact', field: 'contactName', width: 120 },
{ header: 'Title', field: 'contactTitle', width: 120 },
{ header: 'Address', field: 'address', width: 120, align: 'right' }
];
el.rows = northwind.customers;
Live example | Source on github | Edit on Codesandbox
User events
In addition to the standard DOM keyboard and mouse events the datagrid emits composite mouse event which makes it easier to find the elements affected by the user action.
function onMouse({row}){
alert(`row ${row.key} clicked!`);
}
const el = document.querySelector('ax-datagrid');
el.columns = columns;
el.rows = rows;
el.addEventListener('mouse', event => onMouse(event.detail), true);
Live example | Source on github | Edit on Codesandbox
When assigning an event handler, note that the event data is passed in the event.detail property (we are using DOM CustomEvent class).
ActiveWidgets custom events do not bubble, so you should always add an event handler at the component itself, not at some parent element.
More info
