【SpreadJS v15.2 新特性介绍】“Name Box”名称栏组件化，使用更灵活

收藏

本帖最后由爱迪生于 2022-9-15 12:07 编辑

SpreadJS v15.2支持名称框组件。
1.UI行为:
image.png932837829.png

1.1名称框由“选择器”和“下拉菜单”组成
1.1.1选择器：显示选择
选择更改时，显示更改选择：
image.png273482360.png

设置选择后，显示活动单元格：
image.png53415221.png

选择图形时，显示图形名称：
image.png489954223.png

当 selection 等于命名范围或表名时，显示名称：
image.png783437499.png

1.1.2下拉列表：显示自定义名称列表
自定义名称列表包括以下内容：

自定义名称列表：显示命名范围，如果单击项目，导航到命名范围：
image.png559080199.png

2.支持的主题
SpreadJS：
image.png515453490.png

Excel2013白色：
image.png854829406.png

Excel2013浅灰色：
image.png913320617.png

Excel2013深灰色：
image.png629565734.png

Excel2016多彩：
image.png745823058.png

Excel2016深灰色：
image.png935133972.png

Excel2016黑色：
image.png686304626.png

3.API：
GC.Spread.Sheets.NameBox：

复制代码

GC.Spread.Sheets.NameBox.NameBox：

/**
* Represents name box.
* @class
* @param {HTMLElement|string} host The DOM Element.
* @param {GC.Spread.Sheets.Workbook} spread The workbook which the namebox bound.
* @param {GC.Spread.Sheets.NameBox.INameBoxOptions} [options] options of the name box.
*/
constructor (host: HTMLElement | string, workbook: GC.Spread.Sheets.Workbook, options?: GC.Spread.Sheets.NameBox.INameBoxOptions)
/**
* get the NameBox host element.
* @example
* var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
* var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('nameBox'), spread);
* var host = nameBox.getHost();
*/
function getHost(): HTMLElement
/**
* refresh the NameBox and sync the name box value to the work sheet selection.
* @example
* var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
* var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('nameBox'), spread);
* nameBox.refresh();
*/
function refresh(): void
/**
* Dispose the NameBox and unbind all events.
* @example
* var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
* var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('nameBox'), spread);
* // do something
* nameBox.dispose();
*/
function dispose(): void

复制代码

名称框选项GC.Spread.Sheets.NameBox.INameBox 选项：

interface INameBoxOptions {
/**
* Indicates the drop down list element max height.
* the default value is 500(px).
*/
dropDownMaxHeight?: number;
/**
* Indicates whether enable add custom name when input a name which is not existed to the selector.
* the default value is true.
*/
enableAddCustomName?: boolean;
/**
* Indicates whether enable navigate to the named range or drawing item when input its name or click on custom list item.
* the default value is true.
*/
enableNavigateToRange?: boolean;
/**
* Indicates whether show the custom name list dropdown indicator.
* the default value is true.
*/
showCustomNameList?: boolean;

复制代码

4.示例代码：
4.1设置名称框选项
4.1.1创建名称框时设置：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var namebox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById("namebox"), spread, {
dropDownMaxHeight: 200
});

复制代码

4.1.2使用名称框实例设置选项：

复制代码

4.2示例：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('nameBox'), spread, {
showCustomNameList: false
});
nameBox.refresh();
spread.destroy();
nameBox.dispose();

复制代码

		自动登录	找回密码
密码			立即注册

0 个回复