@activewidgets/js 中文文档教程

Question

ActiveWidgets/JS • Datagrid

ActiveWidgets 是一个多框架 UI 组件库。 此软件包为 javascript / 无框架 环境提供datagrid 组件。

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

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

Installation

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

> npm i --save @activewidgets/js

Usage

将 mount 函数导入您的应用程序 -

import { mount } from "@activewidgets/js";

现在，假设您已将占位符 ax-datagrid 标记添加到

<ax-datagrid>Loading...</ax-datagrid>

页面占位符位置 -

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

mount('ax-datagrid', { rows });

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

CDN links

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

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

在这种情况下，mount 函数在 ActiveWidgets.JS 全局命名空间中可用。

var mount = ActiveWidgets.JS.mount;

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

mount('ax-datagrid', { rows: rows });

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

Mount function

mount function 应该是目标元素（或选择器）。 第二个参数是一个属性对象。 目标元素 tagName 定义组件 ID。

mount('#grid1', { columns, rows });

占位符元素标记必须是 ax-datagrid

<ax-datagrid id="grid1"></ax-datagrid>

mount 函数返回 update 和 destroy 方法。

const { update } = mount('#my-grid', { columns, rows });

//...

update({ rows: newRows });

Data properties

您必须提供 列 和 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;

mount('ax-datagrid', { columns, rows });

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

User events

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

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

mount('ax-datagrid', { onMouse, columns, rows }); // put event handlers together with props

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

More info

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

---