@activewidgets/jquery 中文文档教程
ActiveWidgets/jQuery • Datagrid
ActiveWidgets 是一个多框架 UI 组件库。 此包为 jQuery 提供了datagrid 组件。
Installation
添加 @activewidgets/jquery到您的项目依赖项 -
> npm i --save @activewidgets/jquery
Usage
将库导入您的应用程序 -
import "@activewidgets/jquery";
它将向 jQuery 添加 mount 函数。 现在，假设您已将占位符 ax-datagrid 标记添加到页面
<ax-datagrid>Loading...</ax-datagrid>
分配属性并在占位符位置安装实际的 ActiveWidgets 组件 -
const rows = [
{ message: 'Hello, World!' }
];
$('ax-datagrid')
.prop('rows', rows)
.mount();
实例 | github 上的源 | 在 Codesandbox 上编辑
CDN links
为了快速制作原型，该包也可通过 ActiveWidgets CDN 获得-
<script src="https://cdn.activewidgets.com/jquery"></script>
实例 | github 上的源 | 在 Codesandbox 上编辑
Mount function
mount 函数执行不需要任何参数 - 它使用元素 tagName 作为组件 ID。
<ax-datagrid id="my-grid-1"> ... </ax-datagrid>
您可以应用任何选择器来查找占位符元素（但标签必须是 ax-datagrid）
$('#my-grid-1')
.prop('rows', rows)
.mount();
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 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'}
];
const rows = northwind.customers;
$('ax-datagrid')
.prop({ columns, rows }) // use $.prop() to assign properties
.mount();
实例 | github 上的源 | 在 Codesandbox 上编辑
User events
除了数据网格发出的标准 DOM 键盘和鼠标事件合成的 mouse 事件，可以更轻松地找到受用户操作影响的元素。
function onMouse({row}){
alert(`row ${row.key} clicked!`);
}
$('ax-datagrid')
.prop({ columns, rows })
.on('mouse', event => onMouse(event.detail)) // pass event.detail to your handler
.mount();
实例 | github 上的源 | 在Codesandbox上编辑
分配事件处理程序时，注意传递事件数据在 event.detail 属性中（我们使用的是 DOM CustomEvent 类）。
ActiveWidgets 自定义事件不会冒泡，因此您应该始终在组件本身而不是某些父元素处添加事件处理程序。
More info
ActiveWidgets/jQuery • Datagrid
ActiveWidgets is a multi-framework UI component library. This package provides datagrid component for jQuery.
Live demo / Developer guide / API reference
Installation
Add @activewidgets/jquery to your project dependencies -
> npm i --save @activewidgets/jquery
Usage
Import the library into your app -
import "@activewidgets/jquery";
It will add mount function to jQuery. Now, assuming that you've added a placeholder ax-datagrid tag to the page
<ax-datagrid>Loading...</ax-datagrid>
Assign properties and mount an actual ActiveWidgets component at the placeholder position -
const rows = [
{ message: 'Hello, World!' }
];
$('ax-datagrid')
.prop('rows', rows)
.mount();
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/jquery"></script>
Live example | Source on github | Edit on Codesandbox
Mount function
The mount function does not require any arguments - it uses element tagName as a component ID.
<ax-datagrid id="my-grid-1"> ... </ax-datagrid>
You can apply any selector to find the placeholder element (but the tag must be ax-datagrid)
$('#my-grid-1')
.prop('rows', rows)
.mount();
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 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'}
];
const rows = northwind.customers;
$('ax-datagrid')
.prop({ columns, rows }) // use $.prop() to assign properties
.mount();
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!`);
}
$('ax-datagrid')
.prop({ columns, rows })
.on('mouse', event => onMouse(event.detail)) // pass event.detail to your handler
.mount();
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
