actsheet

v3.1.8

Published

3 months ago

actsheet

Downloads

0High
0Medium
0Low

bowenwang

actsheet 使用文档

| 版本号 | 修订人 | 修订时间 | 备注 | | ------ | ------ | ---------- | ---- | | 2.2.8 | bowen | 2023-11-20 | 初版 | | - | - | - | - |

一、安装

使用包管理工具 yarn 或者 npm 安装

npm install actsheet -D

or

yarn add actsheet -D

二、使用

引入样式

import 'actsheet/dist/css/actsheet.css';

引入脚本

import actsheet from 'actsheet';

三、名词解释

FSC (FoarmSpecConfig) - 表单全量配置数据
FC (FoarmConfig) - 表单配置
CDI (CellDataItem) - 单元格对应的数据项
FD (FoarmData) - 表单数据
CCI (CellConfigItem) - 单元格对应的配置项

1.FSC (FoarmSpecConfig) 格式要求

示例：

{
    // 数据模型
    "categories": [
        {"code": "code", "enumDefs": [], "structDefs": []}
    ],
    // 模型与表格映射关系
    "mappings": [
        {"categoryCode": "categoryCode", "sheetCode": "sheetCode", "structCode": "structCode"}
    ],
    // 配置标识
    "spec": "FOARM_SPEC_1_0",
    // 表单配置
    "foarmConfig": FC
}

2.FC (FoarmConfig) 格式要求

示例：

{
    "name": "001JLB8-2017",
	"code": "STD-CQD-001JLB8-2017.v0.r0",
	"version": "v0",
	"reversion": "r0",
	"hash": "a24c73a6b2b08a8a56e37faef1ad578f",
	"enable": true,
	"sheetConfigs": [
		{
			"name": "第1页",
			"code": "第1页",
			"enable": true,
			"sceneConfigs": [
				{
					"name": "P-STD-CQD-001JLB8-2017#recorder",
					"code": "P-STD-CQD-001JLB8-2017#recorder",
					"enable": true,
					"pageConfigs": [
						{
							"pageStart": 0,
							"pageEnd": 9999,
							"enable": true,
							"cellConfigItems": CCI
						}
					]
				}
		    ]
		}
	]
}

3.CCI (CellConfigItem) 格式要求

3.1 基本配置

字段说明

| Key | 说明 | 取值 | 备注 | | ------------- | ------------------ | ------- | -------------------------------------- | | id | 唯一标识 | string | 8 位随机字符 | | code | 编码 | string | | active | 当前激活状态 | boolean | | allowedStyleProperties | 允许提交的样式名称 | string | fontSize,strikeout,hAlign,vAlign,... | | readonly | 是否只读 | boolean | | required | 是否必填 | boolean | | target | 单元格位置 | string | 26 进制大写英文 | | type | 单元格类型 | string | input,checkbox,radio,through,fadada_ca | | zIndex | 覆盖 | number | | style | 单元格样式 | object | | options | 特殊单元格配置选项 | object |

示例：

{
	"id": "id",
	"code": "code",
	"active": true,
	"allowedStyleProperties": "fontSize,strikeout,hAlign,vAlign",
	"readonly": false,
	"required": true,
	"target": "AI4",
	"type": "input",
	"zIndex": 0,
	"style": {},
	"options": {},
}

3.2 特殊类型 - 签章类型 (fadada_ca)

options 字段说明

| Key | 说明 | 取值 | 备注 | | ------------ | -------------------------- | ------- | ----------- | | action | 签章操作类型 | string | ca_sign,... | | x | 签章横坐标 | number | | y | 签章横坐标 | number | | width | 签章图片宽度 | number | | height | 签章图片高度 | number | | offsetLeft | 签章图片基于单元格的左偏移 | number | | offsetTop | 签章图片基于单元格的上偏移 | number | | movable | 签章图片是否可以移动 | boolean | | defaultImage | 默认图片 | string | base64 |

示例：

{
	"type": "fadada_ca"
	"options": {
		"action": "ca_sign",
		"x": 187,
		"y": 461,
		"height": 105,
		"width": 160,
		"offsetTop": 0,
		"offsetLeft": 0,
		"movable": true,
		"defaultImage": "//img-qn.51miz.com/preview/element/00/01/23/63/E-1236375-B8081CDD.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420"
	},
	...
}

3.3 特殊类型 - 复选框、单选框、删除线 (checkbox、radio、through)

options 字段说明

| Key | 说明 | 取值 | 备注 | | ----------- | -------- | ------- | ---------------------------------- | | group | 组名 | string | 提交数据时会将组名拼接到返回数据中 | | checked | 是否选中 | boolean | | checkedData | 选中数据 | string |

示例：

{
	"type": "checkbox"  // 另外类型 "radio" "through"
	"options": {
		"group": "GroupName",
		"checked": true,
		"checkedData": "checkedData"
	},
	...
}

3.4 特殊类型 - 图片上传 (image)

options 字段说明

| Key | 说明 | 取值 | 备注 | | ------------ | ---------------------- | ------- | ------ | | x | 图片横坐标 | number | | y | 图片横坐标 | number | | width | 图片宽度 | number | | height | 图片高度 | number | | offsetLeft | 图片基于单元格的左偏移 | number | | offsetTop | 图片基于单元格的上偏移 | number | | movable | 图片是否可以移动 | boolean | | defaultImage | 默认图片 | string | base64 |

示例：

{
	"type": "image"
	"options": {
		"x": 57,
		"y": 145,
		"height": 60,
		"width": 60,
		"offsetTop": 0,
		"offsetLeft": 0,
		"movable": true,
		"defaultImage": ""
	},
	...
}

4.FD (FoarmData) 格式要求

示例：

{
    "code": "STD-CQG-C-A-B-B",
	"reversion": "v0",
	"version": "v0",
	"sheets": [
		{
			"sheetName": "第1页",
			"sheetCode": "第1页",
			"sheetIndex": 1,
			"pages": [
				{
					"cellDataItems": CDI
				}
			]
		}
	]
}

5.CDI (CellDataItem) 格式要求

字段说明

| Key | 说明 | 取值 | 备注 | | ------------ | ---------------- | ------ | ----------------------- | | code | 单元格编码 | string | 与 CCI 中 code 一致 | | cellDataType | 单元格数据类型 | string | | id | 标识 | string | | type | 单元格类型 | string | 优先级低于 CCI 中 type | | value | 单元格的值 | string | | valueDisplay | 单元格的显示的值 | string | | style | 样式 | object | 优先级高于 CCI 中 style |

示例：

{
	"code": "code",
	"cellDataType": "long",
	"id": "9EK1Z5QU",
	"type": "input",
	"value": "value",
	"valueDisplay": "valueDisplay",
	"style": {
		"fontSize": "12px",
		"fontColor": "#be680a",
		"backColor": "#B4D5FF"
	}
}

四、API 集合

setXlsx

名称：加载 Excel
定义：actsheet.setXlsx(blob, id, config)
返回：actsheet 实例

| 参数 | 类型 | 说明 | | ------ | ---------------- | -------------------------------- | | blob | File | 网络请求的 Blob 数据 | | id | String | 挂载到页面的 HTML 元素 ID | | config | ActsheetConfig | 初始化 Luckysheet 配置见附录2 |

| 返回 | 类型 | 说明 | | ----- | ---------- | ----------------------- | | sheet | Actsheet | actsheet 实例见附录1 |

示例：

// 表单设计不需要加载 FSC FD
const sheet = await actsheet.setXlsx(resXlsxFile.data, 'actsheet', {
	useCellConfigType: 'admin',
	showtoolbar: false
});

// 用户使用需要加载 FSC FD
const sheet = await actsheet.setXlsx(resXlsxFile.data, 'actsheet', {
	cellValueData: FD,
	cellConfigData: FSC,
	showCustomToolBar: true
});

loadXlsx

名称：加载 Excel
定义：actsheet.loadXlsx(options, id, config)
返回：actsheet 实例，后续加载单元格配置和单元格数据

| 参数 | 类型 | 说明 | | ------- | ---------------- | -------------------------------- | | options | Request | 网络请求配置 | | id | String | 挂载到页面的 HTML 元素 ID | | config | ActsheetConfig | 初始化 Luckysheet 配置见附录2 |

| 返回 | 类型 | 说明 | | ----- | ---------- | ----------------------- | | sheet | Actsheet | actsheet 实例见附录1 |

示例：

const sheet = await actsheet.loadXlsx(
	{
		url: '/template.xlsx',
		method: 'GET',
		data: {},
		headers: {},
		contentType: 'application/json',
		success: () => {
			console.log('加载成功');
		},
		error: (status, message) => {
			console.log(status, message);
		}
	},
	'actsheet',
	{ showCustomToolBar: true }
);

setCellsConfig

名称：加载单元格配置
定义：sheet.setCellsConfig(configs, { isChangeSheet = true } = {})
说明：使用加载单元格成功之后的返回实例，加载单元格配置

| 参数 | 类型 | 说明 | | ------------- | ------- | ---------------------------- | | configs | FSC | 需要加载的配置数据 | | isChangeSheet | boolean | 是否需要加载配置并且切换数据 |

使用说明

==异步函数（async await）==
==isChangeSheet 参数单独加载配置不需要加载FD数据, 设置：false==

示例：

// sheet 为加载表格实例
await sheet.setCellsConfig(FSC, { isChangeSheet: false });

loadCellsConfig

名称：通过网络加载单元格配置
定义：sheet.loadCellsConfig(options, { isChangeSheet = true } = {})
说明：使用加载单元格成功之后的返回实例，加载单元格配置

| 参数 | 类型 | 说明 | | ------------- | --------- | ---------------------------- | | options | Request | 网络请求配置 | | isChangeSheet | boolean | 是否需要加载配置并且切换数据 |

示例：

// sheet 为加载表格实例
await sheet.loadCellsConfig(
    {
        url: '/CellConfigList.json'
        method: "GET",
        data: {},
        headers: {},
        contentType: "application/json",
        success: () => {
        	console.log('加载成功');
        },
        error: (status, message) => {
        	console.log(status, message);
        }
    },
    { isChangeSheet: false }
);

setData

名称：加载单元格数据
定义：sheet.setData(configs)
说明：使用加载单元格成功之后的返回实例，加载单元格数据

| 参数 | 类型 | 说明 | | ------- | ---- | -------------- | | configs | FD | 加载的表格数据 |

注意事项：

==异步函数（async await）==
==加载单元格数据之前，要先加载单元格配置文件==

示例：

// sheet 为加载表格实例
await sheet.setData(FD);

loadData

名称：通过网络加载单元格数据
定义：sheet.loadData(options)
说明：使用加载单元格成功之后的返回实例，加载单元格配置

| 参数 | 类型 | 说明 | | ------- | --------- | ------------ | | options | Request | 网络请求配置 |

示例：

// sheet 为加载表格实例
await sheet.loadData({
    url: '/CellDataList.json'
    method: "GET",
	data: {},
	headers: {},
	contentType: "application/json",
	success: () => {
		console.log('加载成功');
	},
	error: (status, message) => {
		console.log(status, message);
	}
});

getData

名称：获取数据
定义：sheet.getData()
说明：获取当前表格的填写项

| 返回 | 类型 | 说明 | | --------- | ------------------ | ------------------- | | code | string | 当前传入版本 | | name | string | 当前传入名称 | | version | string | 当前传入版本 | | reversion | string | 当前传入重置版本 | | sheets | ReturnSheetsData | 返回的 sheet 页数据 |

ReturnSheetsData 说明

| 参数 | 类型 | 说明 | | ---------- | ----------------- | ------------------ | | pages | ReturnPagesData | 返回的 page 页数据 | | sheetCode | string | sheet 编码 | | sheetIndex | number | sheet 索引 | | sheetName | string | sheet 名称 |

ReturnPagesData 说明

| 参数 | 类型 | 说明 | | ------------- | ------ | --------------- | | cellDataItems | CDI | 返回的CDI数据 | | pageCode | string | page 编码 | | pageIndex | number | page 索引 | | pageName | string | page 名称 |

注意事项：

==异步函数（async await）==
==获取数据时会对表单进行验证==

示例：

// actsheet 引入的组件实例
const sheetData = await actsheet.getData();

saveFieldData

名称：保存数据
定义：sheet.saveFieldData(options)
说明：异步保存数据

| 参数 | 类型 | 说明 | | ------- | --------- | ------------ | | options | Request | 网络请求配置 |

示例：

// actsheet 引入的组件实例
const rs = await actsheet.saveFieldData({
    url: '/save'
    method: "POST",
	data: {},
	headers: {},
	contentType: "application/json",
	success: () => {
		console.log('请求成功');
	},
	error: (status, message) => {
		console.log(status, message);
	}
});

getField

名称：通过运行字段名称获取运行的字段对象
定义：sheet.getField(name)

| 参数 | 类型 | 说明 | | ---- | ------ | ------------------------------------------------------------------ | | name | string | 运行字段的名称，同时该参数也是CCI配置的code, CDI配置的code |

| 返回 | 类型 | 说明 | | ----------- | -------------- | -------------------------------------------------------- | | field | CCI合并CDI | 返回的当前字段配置, CCI合并CDI, CDI优先级高于CDI | | field.value | string | 返回的当前字段的值 |

示例：

// actsheet 引入的组件实例
const field = actsheet.getField('proSupEngSignDateYr');
const value = field.value;

// field 完整示例
{
    "code": "proSupEngSignDateYr",
    "cellDataType": "string",
    "id": "ZQWRCXIQ",
    "type": "input",
    "value": "2023",
    "valueDisplay": "2023",
    "active": true,
    "allowedStyleProperties": "fontSize,strikeout,hAlign,vAlign",
    "code": "proSupEngSignDateYr",
    "options": {},
    "readonly": false,
    "required": false,
    "style": {
        "backColor": "#E7E6E6",
        "bold": false,
        "fontSize": 14,
        "indent": 0,
        "italic": false,
        "shrinkToFit": false,
        "strikeout": false,
        "wordWrap": false
    },
    "target": "AR14",
    "zIndex": 0,
    "settingCellData": true
}

getFieldValue

名称：通过运行字段名称获取运行的字段的值
定义：sheet.getFieldValue(name)

| 返回 | 类型 | 说明 | | ----- | ------ | ------------------ | | value | string | 返回的当前字段的值 |

示例：

// actsheet 引入的组件实例
const value = actsheet.getFieldValue('proSupEngSignDateYr');

setFieldValue

名称：通过运行字段名称设置运行字段
定义：sheet.getFieldValue(name, value)

| 参数 | 类型 | 说明 | | ----- | ------ | ------------------------------------------------------------------ | | name | string | 运行字段的名称，同时该参数也是CCI配置的code, CDI配置的code | | value | string | 设置字段的值 |

示例：

// actsheet 引入的组件实例
actsheet.getFieldValue('proSupEngSignDateYr', '2023-11-24');

getCellValue

名称：获取单元格的值
定义：sheet.getCellValue(location)
说明：通过单元格位置获取 - 区别于 getFieldValue

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 |

示例：

// actsheet 引入的组件实例
const cellValue = actsheet.getCellValue('AR14');

setCellValue

名称：设置单元格的值
定义：sheet.setCellValue(location, value)
说明：通过单元格位置获取 - 区别于 setFieldValue

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | value | string | 设置的值 |

示例：

// actsheet 引入的组件实例
actsheet.setCellValue('AR14', '2023-11-14');

getCellStyle

名称：获取单元格样式
定义：sheet.getCellStyle(location)

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 |

示例：

// actsheet 引入的组件实例
const style = actsheet.getCellStyle('AR14');

// style
{
    "backColor": "#E7E6E6",
    "fontSize": 14,
    "fontColor": "#000000",
    "fontName": "楷体",
    "hAlign": 2,
    "vAlign": 1,
    "wordWrap": false,
    "bold": false,
    "italic": false,
    "strikeout": 0
}

setCellStyle

名称：设置单元格样式
定义：sheet.setCellStyle(location, style)

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | style | object | 样式集合 |

示例：

// actsheet 引入的组件实例
actsheet.setCellStyle('AR14', {
	backColor: '#E7E6E6',
	fontSize: 14,
	fontColor: '#000000',
	fontName: '楷体',
	hAlign: 2,
	vAlign: 1,
	wordWrap: false,
	bold: false,
	italic: false,
	strikeout: 0
});

getCellReadonly

名称：获取单元格只读状态
定义：sheet.getCellReadonly(location)

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 |

示例：

// actsheet 引入的组件实例
const readonly = actsheet.getCellReadonly('AR14');

// 返回值 readonly = true / false

setCellReadonly

名称：获取单元格只读状态
定义：sheet.setCellReadonly(location, value)

| 参数 | 类型 | 说明 | | -------- | ------- | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | value | boolean | 是否只读 |

示例：

// actsheet 引入的组件实例
actsheet.setCellReadonly('AR14', true);

// true 只读不可以编辑单元格
// false 非只读可以编辑单元格

insertImage

名称：插入图片
定义：sheet.insertImage(url, location, param, cellData)

| 参数 | 类型 | 说明 | | -------- | -------------------- | ----------------------- | | url | string or base64 | 插入的图片的地址信息 | | location | string | 单元格位置, e.g：AR14 | | param | ImageInfo | 图片的信息 | | cellData | CellInfo | 单元格的信息 |

| 返回 | 类型 | 说明 | | -------------- | ------ | -------------------------------- | | id | string | 插入图片生成的 ID | | insertImageMap | object | 插入图片生成 ID 对应图片实例集合 |

ImageInfo

| 字段 | 类型 | 说明 | | ---------- | ------- | -------------------- | | width | number | 图片宽度 | | height | number | 图片高度 | | top | number | 图片上位置 | | left | number | 图片左位置 | | offsetTop | number | 图片距离单元格上偏移 | | offsetLeft | number | 图片距离单元格左偏移 | | scale | number | 图片缩放，默认：1 | | movable | boolean | 图片是否可以移动 |

CellInfo

| 字段 | 类型 | 说明 | | ---------- | ------ | --------------------------------------------------------------- | | code | string | 单元格 code, CCI中 code | | handleType | object | 图片操作类型, { isDelete: true } 插入可以删除的图片 | | options | object | 单元格 options 配置项, 参考CCI中 type: "image" 的 options |

使用说明

==异步函数（async await）==

示例：

// actsheet 引入的组件实例
const image = await actsheet.insertImage(
	'http://picsum.photos/100',
	'B10',
	{
		width: 50,
		height: 50,
		offsetTop: 50,
		offsetLeft: 50,
		movable: true
	},
	{
		code: 'AC19'
	}
);

// image 示例
{
    "id": "img_lrstW6e6ni06_1700814051388",
    "insertImageMap": {
        "img_lrstW6e6ni06_1700814051388": {
            "id": "img_lrstW6e6ni06_1700814051388",
            "location": "P13",
            "image": {
                "type": "3",
                "src": "图片地址base64",
                "originWidth": 150,
                "originHeight": 100,
                "default": {
                    "width": 150,
                    "height": 100,
                    "left": 150,
                    "top": 450
                },
                "crop": {
                    "width": 150,
                    "height": 100,
                    "offsetLeft": 0,
                    "offsetTop": 0
                },
                "isFixedPos": false,
                "fixedLeft": 150,
                "fixedTop": 491,
                "border": {
                    "width": 0,
                    "radius": 0,
                    "style": "solid",
                    "color": "#000"
                },
                "handleType": {}
            },
            "movable": true,
            "code": "proSupEngSign",
            "cellData": {
                "code": "proSupEngSign",
                "cellDataType": "string",
                "id": "JG8CPUFY",
                "type": "fadada_ca",
                "value": "{\"action\":\"ca_sign\",\"x\":150,\"y\":450,\"height\":100,\"width\":150,\"offsetTop\":0,\"offsetLeft\":0,\"movable\":true,\"defaultImage\":\"http://picsum.photos/id/237/200/300\"}",
                "valueDisplay": {
                    "action": "ca_sign",
                    "x": 187,
                    "y": 471,
                    "height": 60,
                    "width": 134,
                    "offsetTop": 0,
                    "offsetLeft": 0,
                    "movable": true,
                    "defaultImage": "http://picsum.photos/id/237/200/300"
                },
                "active": true,
                "allowedStyleProperties": "fontSize,strikeout,hAlign,vAlign",
                "code": "proSupEngSign",
                "options": {
                    "action": "ca_sign",
                    "x": 187,
                    "y": 471,
                    "height": 60,
                    "width": 134,
                    "offsetTop": 0,
                    "offsetLeft": 0,
                    "movable": true,
                    "defaultImage": "图片地址base64"
                },
                "readonly": true,
                "required": false,
                "style": {
                    "backColor": "#E7E6E6",
                    "bold": false,
                    "fontSize": 14,
                    "indent": 0,
                    "italic": false,
                    "shrinkToFit": false,
                    "strikeout": false,
                    "wordWrap": false
                },
                "target": "P13",
                "zIndex": 1,
                "settingCellData": true
            }
        },
    }
}

deleteImage

名称：插入图片
定义：sheet.deleteImage(loaction, options = {})

| 参数 | 类型 | 说明 | | -------- | --------------- | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | options | DeleteOptions | 删除配置 |

DeleteOptions

| 字段 | 类型 | 说明 | | ------- | ------------------- | ---------------------------------------------------------------------------- | | order | string | 工作表的索引下标 | | idList | string or array | 要删除图片的 id 集合，也可为字符串"all"，all 为所有的字符串；默认为"all" | | success | function | 删除成功的回调函数 |

使用说明

==异步函数（async await）==

示例：

// actsheet 引入的组件实例
await actsheet.deleteImage('B10');

setSheetCellStyle

名称：不加载单元格配置文件的时候设置单元的样式
定义：sheet.setSheetCellStyle(loaction, style)
说明：表单设计器使用 - 区别 setCellStyle

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | style | object | 单元格样式 |

示例：

// actsheet 引入的组件实例
actsheet.setSheetCellStyle('B10', {
    fontSize: "14px",
    ...
});

setSheetCellValue

名称：不加载单元格配置文件的时候设置单元的值
定义：sheet.setSheetCellValue(loaction, value)
说明：表单设计器使用 - 区别 setCellValue

| 参数 | 类型 | 说明 | | -------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | value | object | 单元格值 |

示例：

// actsheet 引入的组件实例
actsheet.setSheetCellValue('B10', '11111');

getSheetCellStyle

名称：不加载单元格配置文件的时候获取单元格样式
定义：sheet.getSheetCellStyle(loaction, sheetFile)
说明：表单设计器使用 - 区别 getCellStyle

| 参数 | 类型 | 说明 | | --------- | ------ | ----------------------- | | location | string | 单元格位置, e.g：AR14 | | sheetFile | object | sheet 页配置实例 |

示例：

// actsheet 引入的组件实例
const sheetfiles = actsheet.luckysheet.getLuckysheetfile();

sheetfiles.forEach((sheetfile) => {
	const style = actsheet.getSheetCellStyle('B10', sheetfile);
});

changeSheet

名称：切换 sheet
定义：sheet.changeSheet(order, handleType = '', options)

| 参数 | 类型 | 说明 | | ---------- | ------ | ---------------------------------------------------------------- | | order | number | 切换的 sheet 实例下标索引 | | handleType | string | 操作类型 addSheet: 添加， delSheet: 删除， copySheet: 复制 | | options | object | options.success: 成功回调 |

示例：

// actsheet 引入的组件实例
const sheetfiles = actsheet.luckysheet.getLuckysheetfile();

sheetfiles.forEach((sheetfile) => {
	const style = actsheet.getSheetCellStyle('B10', sheetfile);
});

附录

附录 1：ActsheetConfig

ActsheetConfig 配置说明

{
    // 需要展示错误信息
	isErrorTip: true,
	// 轻提示配置
	toastDuration: 3000,
	// 是否锁定点击事件
	isLockClick: true,
	// 是否锁定双击点击事件
	isDBLockClick: false,
	// 是否启用自定义工具栏
	showCustomToolBar: false,
	// 图片是否移动
	isMoveImage: true,
	// 单元格的值数据
	cellValueData: {},
	// 单元格的配置数据
	cellConfigData: {},
	// 使用单元格配置方式 user | admin
	useCellConfigType: 'user',
	// 工具栏配置
	toolBarConfig: {
		fontSize: true, // 字号加减
		cancelLine: true, // 删除线
		horizontalType: true, // 水平对齐
		pages: true // 分页
	},
	// 监听外部点击事件 关闭编辑模式
	listenerOutClick: true,
	// 工具栏回调函数
	customToolBarCallback: {
		// 字号加
		fontAdd: function (data, value) {},
		// 字号减
		fontSub: function (data, value) {},
		// 删除线
		textStrikethrough: function (data, value) {},
		// 下划线
		textUnderline: function (data, value) {},
		// 文字横向
		textHorizontalAlign: function (data, value) {}
	},
	// 错误捕获的回调
	errCallback: function (err) {
		console.error(err);
	},
	// Luckysheet的原生配置 见下表
	...LuckysheetConfig
}

Luckysheet 原生配置项

{
    column: 60, //空表格默认的列数量
    row: 84, //空表格默认的行数据量
    allowCopy: true, //是否允许拷贝
    showtoolbar: true, //是否第二列显示工具栏
    showinfobar: true, //是否显示顶部名称栏
    showsheetbar: true, //是否显示底部表格名称区域
    showstatisticBar: true, //是否显示底部计数栏
    pointEdit: false, //是否是编辑器插入表格模式
    pointEditUpdate: null, //编辑器表格更新函数
    pointEditZoom: 1, //编辑器表格编辑时缩放比例
    data: [],
    title: "Luckysheet Demo", //表格的名称
    userInfo:false,// 右上角的用户信息展示样式，支持 1. boolean类型：false:不展示，ture:展示默认 '<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> rabbit' ，2. HTML模板字符串或者普通字符串，如：'<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> Lucky'或者'用户名'， 3. 对象格式，设置 userImage：用户头像地址 和 userName：用户名 4. 不设置或者设置undefined同设置false
    userMenuItem: [{url:"www.baidu.com", "icon":'<i class="fa fa-folder" aria-hidden="true"></i>', "name":"我的表格"}, {url:"www.baidu.com", "icon":'<i class="fa fa-sign-out" aria-hidden="true"></i>', "name":"退出登陆"}], //点击右上角的用户信息弹出的菜单
    myFolderUrl: "www.baidu.com", //左上角<返回按钮的链接
    config: {}, //表格行高、列宽、合并单元格、公式等设置
    fullscreenmode: true, //是否全屏模式，非全屏模式下，标记框不会强制选中。
    devicePixelRatio: window.devicePixelRatio, //设备比例，比例越大表格分标率越高
    allowEdit: true, //是否允许前台编辑
    loadUrl: "", // 配置loadUrl的地址，luckysheet会通过ajax请求表格数据，默认载入status为1的sheet数据中的所有data，其余的sheet载入除data字段外的所有字段
    loadSheetUrl: "", //配置loadSheetUrl的地址，参数为gridKey（表格主键） 和 index（sheet主键合集，格式为[1,2,3]），返回的数据为sheet的data字段数据集合
    gridKey: "", // 表格唯一标识符
    updateUrl: "", //表格数据的更新地址
    updateImageUrl: "", //缩略图的更新地址
    allowUpdate: false, //是否允许编辑后的后台更新
    functionButton: "", //右上角功能按钮，例如'<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下载</button>    <button id="" class="btn btn-primary btn-danger" style="    padding:3px 6px;    font-size: 12px;    margin-right: 10px;">分享</button>    <button id="luckysheet-share-btn-title" class="btn btn-primary btn-danger" style="    padding:3px 6px;    font-size: 12px;    margin-right: 10px;">秀数据</button>'
    showConfigWindowResize: true, //图表和数据透视表的配置会在右侧弹出，设置弹出后表格是否会自动缩进
    enableAddRow: true,//允许添加行
    enableAddBackTop: true,//允许回到顶部
    // enablePage: false,//允许加载下一页
    autoFormatw: false,  //自动格式化超过4位数的数字为 亿万格式 例：true or "true" or "TRUE"
    accuracy: undefined,  //设置传输来的数值的精确位数，小数点后n位 传参数为数字或数字字符串，例： "0" 或 0
    pageInfo:{
        'queryExps':'',
        'reportId':'',
        'fields':'',
        'mobile':'',
        'frezon':'',
        'currentPage':'',
        "totalPage":10,
        "pageUrl":"",
    },
    editMode: false, //是否为编辑模式
    beforeCreateDom: null,//表格创建之前的方法
    fireMousedown: null, //单元格数据下钻
    lang: 'en', //language
    plugins: [], //plugins, e.g. ['chart']
    forceCalculation:false,//强制刷新公式，公式较多会有性能问题，慎用
    rowHeaderWidth: 46,
    columnHeaderHeight: 20,
    defaultColWidth:73,
    defaultRowHeight:19,
    defaultFontSize:10,
    limitSheetNameLength:true,    //是否限制工作表名的长度
    defaultSheetNameMaxLength:31,  //默认工作表名称的最大长度
    sheetFormulaBar:true, //是否显示公式栏
    showtoolbarConfig:{}, //自定义工具栏
    showsheetbarConfig:{}, //自定义底部sheet页
    showstatisticBarConfig:{}, //自定义计数栏
    cellRightClickConfig:{}, //自定义单元格右键菜单
    sheetRightClickConfig:{}, //自定义底部sheet页右击菜单
}

附录 2：Request

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ---------------------------- | ------ | ------------------------------------------------------------------------ | | url | string | - | 请求地址 | | method | string | - | 请求类型 | | data | object | - | 用于异步请求的额外数据 | | contentType | string | - | 请求的数据类型 | | headers | object | - | 请求的头 | | success | function | - | 加载成功后回调，没有参数 | | error | function (status, message) | - | 加载失败后回调，status为 HTTP 响应状态，如403，message为错误消息。 |

示例：

{
    url: ''
    method: "GET",
	data: {},
	headers: {},
	contentType: "application/json",
	success: () => {
		console.log('加载成功');
	},
	error: (status, message) => {
		console.log(status, message);
	}
}

附录 3：Actsheet

| 参数 | 类型 | 参数 | 说明 | | ----------------- | ---------- | ------------------------------------------------------ | ----------------------------- | | version | string | --- | 当前版本 | | fields | object | --- | 运行时的字段 | | renderView | object | --- | 渲染的组件集合 | | controller | object | --- | 核心控制函数 | | luckysheet | object | --- | luckysheet 实例 | | listener | object | --- | 事件监听实例 | | setXlsx | function | (bolb, id, config: ActsheetConfig) | 参考 API：setXlsx | | setData | function | (configs: FD) | 参考 API：setData | | setCellsConfig | function | (configs: FSC) | 参考 API：setCellsConfig | | loadXlsx | function | (options: Request, id, config = ActsheetConfig) | 参考 API：loadXlsx | | loadData | function | (options: Request) | 参考 API：loadData | | loadCellsConfig | function | (options: Request) | 参考 API：loadCellsConfig | | getData | function | --- | 获取数据参考 API：getData | | saveFieldData | function | (options: Request) | 参考 API：saveFieldData | | getField | function | (name: 运行字段名) | 参考 API：getField | | getFieldValue | function | (name: 运行字段名) | 参考 API：getFieldValue | | setFieldValue | function | (name: 运行字段名, value: 设置的值) | 参考 API：setFieldValue | | getCellValue | function | (location: 单元格位置) | 参考 API：getCellValue | | setCellValue | function | (location: 单元格位置, value: 设置的值) | 参考 API：setCellValue | | getCellStyle | function | (location: 单元格位置) | 参考 API：getCellStyle | | setCellStyle | function | (location: 单元格位置, value: 设置的值) | 参考 API：setCellStyle | | getCellReadonly | function | (location: 单元格位置) | 参考 API：getCellReadonly | | setCellReadonly | function | (location: 单元格位置, value: 设置的值) | 参考 API：setCellReadonly | | insertImage | function | (url, location, param: 配置选项, cellData: 单元格信息) | 参考 API：insertImage | | deleteImage | function | (location: 单元格位置, options: 删除参数) | 参考 API：deleteImage | | setSheetCellStyle | function | (location: 单元格位置, style: 样式) | 参考 API：setSheetCellStyle | | setSheetCellValue | function | (location: 单元格位置, value: 值) | 参考 API：setSheetCellValue | | getSheetCellStyle | function | (location: 单元格位置, sheetFile: sheet 实例) | 参考 API：getSheetCellStyle | | changeSheet | function | (order, handleType, options) | 参考 API：changeSheet |

附录 4：事件监听

| 事件名称 | 返回值 | 说明 | | ------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | | cellMousedownBefore | {cell: 单元格数据, cellName: 单元格名称, sheetFile: 当前 sheet 数据} | 鼠标按下之前事件 | | cellMouseClick | {cell: 单元格数据, cellName: 单元格名称, sheetFile: 当前 sheet 数据, canEdit: 当前单元格是否可以编辑} | 鼠标点击事件 | | cellDblClick | {cell: 单元格数据, cellName: 单元格名称} | 鼠标双击事件 | | selectedChanged:${code} | oldValue: 原来的值, newValue: 改变之后的值, cell: 单元格数据 | 下拉选择框的改变事件 code 表示需要监听的 CCI code 字段 | | imageMoveCallback | data: 图片数据, item: 当前图片实例, imageCtrl: 图片对象 | 图片移动 | | imageResizeCallback | data: 图片数据, item: 当前图片实例, imageCtrl: 图片对象 | 图片改变大小 | | imageMousedownCallback | img: 当前图片实例, imageCtrl: 图片对象 | 图片点击 |

示例

// sheet 为加载表格之后的实例

// 单元格点击之前
sheet.listener.on('cellMousedownBefore', function ({ cell, cellName, sheetFile }) {
	console.log('cellMousedownBefore', cell, cellName, sheetFile);
});

// 单元格点击
sheet.listener.on('cellMouseClick', function ({ cell, cellName, sheetFile }) {
	console.log('cellMouseClick', cell, cellName, sheetFile);
});

// 单元格双击
sheet.listener.on('cellDblClick', function ({ cell, cellName }) {
	console.log('cellDblClick', cell, cellName);
});

// 监听下拉选择
sheet.listener.on('selectedChanged:contractPrjMgmtOrg', function (oldValue, newValue, cell) {
	console.log('selectedChanged:contractPrjMgmtOrg', oldValue, newValue, cell);
});

// 监听图片移动
sheet.listener.on('imageMoveCallback', function (data, item, imageCtrl) {
	console.log('imageMoveCallback', data, item, imageCtrl);
});

// 监听图片缩放
sheet.listener.on('imageResizeCallback', function (data, item, imageCtrl) {
	console.log('imageResizeCallback', data, item, imageCtrl);
});

// 监听图片点击
sheet.listener.on('imageMousedownCallback', function (img, imageCtrl) {
	console.log('imageMousedownCallback', img, imageCtrl);
});

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

actsheet 使用文档

一、安装

二、使用

三、名词解释

1.FSC (FoarmSpecConfig) 格式要求

2.FC (FoarmConfig) 格式要求

3.CCI (CellConfigItem) 格式要求

4.FD (FoarmData) 格式要求

5.CDI (CellDataItem) 格式要求

四、API 集合

setXlsx

loadXlsx

setCellsConfig

loadCellsConfig

setData

loadData

getData

saveFieldData

getField

getFieldValue

setFieldValue

getCellValue

setCellValue

getCellStyle

setCellStyle

getCellReadonly

setCellReadonly

insertImage

deleteImage

setSheetCellStyle

setSheetCellValue

getSheetCellStyle

changeSheet

附录

附录 1：ActsheetConfig

附录 2：Request

附录 3：Actsheet

附录 4：事件监听