NC 报表组：表格控件

简介

Demo示例

该组件源自于用友自由报表组的表格：SemReport

• SemReport为不包含交互效果，仅展示报表的库

后因多维合并组业务需求，在SemReport的基础上添加各种交互特性，包括但不限于：

• [x] 拖拽（即选中效果）
• [x] 右键菜单
• [x] 关联页签
• [x] 冻结单元格
• [x] 编辑以及可编辑性（表、具体单元格）
• [x] 复制和粘贴（支持表格和excel）
• [x] 其他：全屏、放大缩小、打印、追踪具体单元格等...

用法

前置：因被强制使用Jquery，同时也只能通过分析SemReportd的DOM结构来完成交互功能。 使用前请确保Jquery已被正确引入。

此为示例文档，更多功能可查看文档；

安装

npm install nc-bcs-report --save

或

yarn add nc-bcs-report

HTML：

<div class="r-container">
    <div id="sheet" class="r-sheet"></div>
    <div id="table" class="r-table"></div>
</div>

CSS：

.r-container{
    width: 800px;
    height: 550px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #eee;
}

JavaScript：

import { rendererSheet, rendererTable } from 'nc-bcs-report'
import data from './data'
import data2 from './data2'

// 初始化页签
let sheet = rendererSheet({
    selector: "#sheet"
})
sheet.addSheet({
    value: '利润表',
    view: {
        isOpen: true
    },
    callback: {
        afterClick: function () {
           resetTable(data, true)
        },
        beforeClose: function () {
            console.log('sheet will be close')
        }
    }
})
sheet.addSheet({
    value: '资产负债表',
    view: {
        hasCloseBtn: true,
    },
    callback: {
        afterClick: function () {
            resetTable(data2, false)
        }
    }
})
sheet.init() // 为了计算宽和高，需要在最后调用init方法


function resetTable(data, isEditable) {
    // 初始化报表
    let table = rendererTable({
        id: "table",
        data: data
    })
    // 右键菜单
    let menuBar = table.getMenuBar()
    menuBar.addButton('自定义按钮', function () {
        console.log('test')
    })
    menuBar.addButtonGroup('froze')
    // 表是否可编辑
    if(isEditable) {
        table.setEditable(true, function (data) {
            // 单元格是否可编辑（以下逻辑表示：不为空的单元格可编辑）
            return data && data.value !== ""
        })
    }
    // 右上角小图标，图标由iconfont定义
    let toolBar = table.getToolBar()
    toolBar.addToolBtn('fa fa-save', '保存', function () {
        console.log(table.getChangedData())
    })
    // 允许从剪切版中复制数据置于单元格（一般来源于excel）
    table.setExcelCopy(true)
}