h5dw

v1.0.5

Published

4 days ago

h5dw is an efficient reporting control that allows you to edit reports in a manner similar to Excel. It is also an H5 DataWindow control, enabling you to manipulate data in the same way as with a DataWindow.

0High
0Medium
0Low

pcwe2026

h5dw powerbuilder datawindow report

H5DW - HTML5 DataWindow Report Control

简介

H5DW 是一个高性能的纯 H5 报表控件，能够流畅地显示和编辑多达 100 万行数据。它支持用户自定义报表，用户可以通过网页定义报表。报表编辑器采用类似 Excel 的编辑方式，熟悉 Excel 的用户可以轻松编辑报表，实现所见即所得（WYSIWYG）的体验。

H5DW 拥有 PB DataWindow 的所有优点，兼容 DataWindow 的大部分语法、公式和函数。可以直接加载 DataWindow 文件并使用 DataWindow API 进行操作。如果您会使用 DataWindow，就可以开发 HTML 报表和表单。

特性

✅ 纯 H5 技术，支持多种浏览器
✅ 跨平台支持
✅ 支持百万级数据行流畅操作
✅ 用户自定义报表功能
✅ 类 Excel 编辑方式，易于上手
✅ 多数据源支持
✅ 支持增删查改和过滤操作
✅ 兼容 DataWindow 主要语法、公式和函数
✅ 直接导入 DataWindow 文件
✅ 直接使用 DataWindow API
✅ 直接导入 Excel 文件
✅ 打印支持

安装

通过 npm 安装

npm install h5dw

传统方式引入

从官方网站下载文件，然后在 HTML 中引入：

<script type="text/javascript" src="satreport.js"></script>
<link href="satreport.css" rel="stylesheet">

快速开始

方式 1：传统 HTML 使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>H5DW Demo</title>
  <script type="text/javascript" src="node_modules/h5dw/lib/satreport.js"></script>
  <link href="node_modules/h5dw/lib/satreport.css" rel="stylesheet">
</head>  
<body onload="onload()">
    <div id="datawindow" style="width: 500px;height:400px;overflow: hidden;border: 1.5px solid #bfbfbf"></div>
</body>
<script>
    function onload(){
        let dataobject = {
            processing: 1,
            table: {
                retrieve: 'test1',
                update: 'test1',
                columns: [
                    {name:'id', dbname:'id', type:'long', key:true, update:true},
                    {name:'name', dbname:'name', type:"string", update:true},
                    {name:'price', dbname:'price', type:'number', update:true},
                    {name:'dt', dbname:'dt', type:'datetime', update:true}
                ],
            }
        }
        
        let dw1 = new DataWindow('#datawindow');
        dw1.dataObject = dataobject;
        
        // 插入示例数据
        let rowcount = dw1.rowCount();
        for (let i = rowcount; i < 10000 + rowcount; i++) {
            const price = (Math.random() * 100).toFixed(2);
            let ll_row = dw1.insertRow(0);
            dw1.setItem(ll_row, 'id', i);
            dw1.setItem(ll_row, 'name', 'name' + i);
            dw1.setItem(ll_row, 'price', price);
            dw1.setItem(ll_row, 'dt', '2021-04-28');
        }
    }
</script>
</html>

方式 2：ES Module 使用（推荐）

import DataWindow from 'h5dw';
import 'h5dw/lib/satreport.css';

// 创建 DataWindow 实例
const dw = new DataWindow('#datawindow');

// 配置数据对象
dw.dataObject = {
    processing: 1,
    table: {
        retrieve: 'test1',
        update: 'test1',
        columns: [
            {name:'id', dbname:'id', type:'long', key:true, update:true},
            {name:'name', dbname:'name', type:"string", update:true},
            {name:'price', dbname:'price', type:'number', update:true},
            {name:'dt', dbname:'dt', type:'datetime', update:true}
        ],
    }
};

// 插入数据
for (let i = 0; i < 100; i++) {
    const row = dw.insertRow(0);
    dw.setItem(row, 'id', i);
    dw.setItem(row, 'name', 'Item ' + i);
    dw.setItem(row, 'price', (Math.random() * 100).toFixed(2));
    dw.setItem(row, 'dt', '2021-04-28');
}

方式 3：TypeScript 使用

import DataWindow, { DWItemStatus, DWBuffer } from 'h5dw';
import 'h5dw/lib/satreport.css';

// 创建实例（享受完整的类型提示）
const dw: DataWindow = new DataWindow('#datawindow');

// 配置数据对象
dw.dataObject = {
    processing: 1,
    table: {
        retrieve: 'test1',
        update: 'test1',
        columns: [
            {name:'id', dbname:'id', type:'long', key:true, update:true},
            {name:'name', dbname:'name', type:"string", update:true}
        ]
    }
};

// 使用枚举
const status: DWItemStatus = DWItemStatus.DataModified;

方式 4：CommonJS 使用

const DataWindow = require('h5dw').default;
require('h5dw/lib/satreport.css');

const dw = new DataWindow('#datawindow');
// ... 后续操作同上

常用 API

基本操作

// 获取行数
const rowCount = dw.rowCount();

// 插入行
const row = dw.insertRow(position);

// 删除行
dw.deleteRow(row);

// 设置单元格值
dw.setItem(row, columnName, value);

// 获取单元格值
const value = dw.getItem(row, columnName);

// 刷新显示
dw.invalidate();

数据操作

// 过滤数据
dw.setFilter(expression);
dw.filter();

// 排序
dw.sort(columnName, order);

// 查找数据
const found = dw.find(expression, startRow);

在线演示

技术支持

QQ 群: 836173975
邮箱: [email protected]
QQ: 9091178