@activewidgets/preact 中文文档教程

Question

ActiveWidgets/Preact • Datagrid

ActiveWidgets 是一个多框架 UI 组件库。 这个包为 Preact 提供了datagrid 组件。

现场演示 / 开发者指南 / API 参考

• Installation
• Usage
• CDN links
• Data properties
• User events

Installation

添加 @activewidgets/preact到您的项目依赖项 -

> npm i --save @activewidgets/preact

Usage

现在您可以导入 ActiveWidgets 组件类 -

import { Datagrid } from "@activewidgets/preact";

并将它们用作任何标准 Preact 组件。

import { h, render } from 'preact';
import { Datagrid } from '@activewidgets/preact';
import './styles.css';

const rows = [
    { message: 'Hello, World!' }
];

function App(){
    return <Datagrid rows={rows} />
}

render(<App />, document.getElementById('app'));

实例 | github 上的源 | 在 Codesandbox 上编辑

CDN links

为了快速制作原型，该包也可通过 ActiveWidgets CDN 获得-

<script src="https://cdn.activewidgets.com/preact"></script>

在这种情况下，您将在 ActiveWidgets.Preact 全局命名空间中找到组件。

var Datagrid = ActiveWidgets.Preact.Datagrid;

var rows = [
    { framework: 'preact', source: 'CDN', language: 'ES5'}
];

var App = preact.h(Datagrid, {rows: rows});
preact.render(App, document.getElementById("app"));

实例 | 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 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;

function App(){
    return <Datagrid columns={columns} rows={rows} />
}

实例 | github 上的源 | 在 Codesandbox 上编辑

User events

除了数据网格发出的标准 DOM 键盘和鼠标事件合成的 mouse 事件，可以更轻松地找到受用户操作影响的元素 -

function onMouse({row, column}){
    alert(`row ${row.key} clicked!`);
}

function App(){
    return <Datagrid onMouse={onMouse} columns={columns} rows={rows} />
}

实例 | github 上的源 | 在 Codesandbox 上编辑

More info

• Live demo
• Developer guide
• API reference
• Licensing
• Support forum

---