h5报表组件

pcwe2002

已于 2024-12-25 09:21:28 修改

阅读量499

点赞数 5

于 2024-12-23 09:45:49 首次发布

本文链接：https://blog.youkuaiyun.com/pcwe2002/article/details/144657910

版权

总体介绍

H5DW是一个高效的纯H5报表控件，拥有卓越的性能，100万行数据流畅显示与编辑。支持用户自定义报表，用户可以通过网页定义报表，报表编辑器使用Excel的编辑方式，会用Excel就会编辑报表，所见即所得。

H5DW具有PB数据窗口的所有优点，兼容数据窗口绝大部分语法、公式、函数。能够直接加载数据窗口文件，通过数据窗口的API进行操作。会操作数据窗口就能够开发Html报表和表单。

特性

纯H5,支持多种浏览器
跨平台
支持百万级数据
用户自定义报表
类似Excel编辑方式,会Excel即可编辑报表
多数据源
支持增、删、查、改、过滤
类数据窗口语法，兼容数据窗口主要语法、公式、函数
数据窗口原样导入
直接使用数据窗口
Excel原样导入
打印

表格报表

设计器

在线演示

http://www.satrda.com/h5dw

快速开始

H5DW支持多种方式使用，可以在html中直接引用，也可以在React、Vue项目中使用。

Html中直接引用

在页面的header中引入satreport.js

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

body中增加一个div

<div id="datawindow" style="width: 500px;height:400px;overflow: hidden;border: 1.5px solid #bfbfbf"></div>

在事件中添加代码引用

    let dw1 = new DataWindow('#datawindow');
    dw1.dataObject = dataobject;

整体代码展示

以下代码命名为index.html和satreport.js,satreport.css放到一个文件夹中,双击可在浏览器中查看效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
  <script type="text/javascript" src="satreport.js"></script>
  <link href="satreport.css" rel="stylesheet"></head>  
</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>

效果如下：

VUE中使用

Vue项目中使用，有两种方式，直接使用和封装组件
两种方式都需要在index.html的header中引入satreport.js

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

直接使用

在模板文件中定义组件，并通过引用组件，编写代码

<template>
<div id="datawindow" style="width: 500px;height:400px;overflow: hidden;border: 1.5px solid #e9e9e9"></div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      let dw1 = new DataWindow('#datawindow');
      this.dw = dw1;

      let dataobject = {
        processing:1,
        table:{
          retrieve:'test1',
          update:'test1',
          columns:[
            {name:'id',dbname:'id',type:'long',key:true,update:true},
            {name:'name', label:'名称', dbname:'name',type:"string",update:true},
            {name:'price',label:'单价',dbname:'price',type:'number',update:true},
            {name:'dt',dbname:'dt',type:'datetime',update:true}
          ],
        }
      };
      dw1.dataObject = dataobject;
      dw1.insertRow(0);
      let rowcount = dw1.rowCount();
      console.log(rowcount);

      dw1.on('ItemChanged',(evt, row, name, data) => {
        console.log('ItemChanged',row, name,data);
      });
    }
  };

</script>
</script>

封装数据窗口组件

定义DW组件H5dw.vue代码如下：

<template>
  <div ref="dw" class="spread"></div>
</template>

<script>
function camelToKebab(str) {
  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}

const dwEvent = ['Clicked', 'ItemChanged', 'ItemFocusChanged',
  'RowFocusChanged', 'ButtonClicked', 'DropDownSelected', 'DoubleClicked',
  'ToolbarChanged', 'EditChanged', 'Enter', 'KeyDown', 'LoseFocus'];
const kebabEvent = dwEvent.map(camelToKebab);

export default {
  name: "H5dw",
  props: {
    isDesign: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dw:null,
      dataObject: null
    }
  },
  mounted() {
    this.dw = new window.DataWindow(this.$refs.dw);
    // eslint-disable-next-line no-self-assign
    this.dw.design(this.isDesign);
    // 判断事件监听,支持通过 @clicked="clicked" 绑定事件
    // 监听事件时，事件名需要转换成 kebab-case
    for (let i = 0; i < dwEvent.length; ++i) {
      const event = dwEvent[i];
      if (this.$listeners[kebabEvent[i]]) {
        this.dw.on(event, (...args) => {
          this.$emit(kebabEvent[i], ...args);
        });
      }
    }
  },
  watch: {
    dataObject: {
      handler(od) {
        this.dw.dataObject = od;
      }
    },
    isDesign: {
      // immediate: true,
      handler(newVal) {
        this.dw.design(newVal);
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.spread {
  overflow: hidden;
  border: 1px solid #e9e9e9;
}
</style>

定义index.js

import H5dw from "./H5dw";

H5dw.install = function (Vue) {
    Vue.component(H5dw.name, H5dw)
}

export default H5dw;

在需要的地方使用H5dw组件

<template>
  <div class="window">
    <H5dw ref="dwMain" :dataObject="dataObject" @clicked="clicked" />
  </div>
</template>
<script>
import H5dw from './H5dw'
export default {
    data() {
        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}
          ],
        }
      }
    },
    mounted() {
        this.dwMain = this.$refs.dwMain;
        this.dw = this.dwMain.dw;
        let rowcount = this.dw.rowCount();
        console.log(rowcount);
    },
    methods: {
        clicked(evt, row, colName) {
            console.log(row, colName);
        }
    }
}
</script>