【SpreadJS v15.2 新特性介绍】“Name Box”名称栏组件化，使用更灵活
本帖最后由 爱迪生 于 2022-9-15 12:07 编辑SpreadJSv15.2支持名称框组件。
1.UI行为:
1.1名称框由“选择器”和“下拉菜单”组成
1.1.1选择器：显示选择
选择更改时，显示更改选择：
设置选择后，显示活动单元格：
选择图形时，显示图形名称：
当 selection 等于命名范围或表名时，显示名称：
1.1.2下拉列表：显示自定义名称列表
自定义名称列表包括以下内容：
[*]工作簿自定义名称和表达式类型等于GC.Spread.CalcEngine.ExpressionType.reference
[*]活动工作表自定义名称和表达式类型等于GC.Spread.CalcEngine.ExpressionType.reference
[*]所有工作表的所有表的名称
自定义名称列表：显示命名范围，如果单击项目，导航到命名范围：
2.支持的主题
SpreadJS：
Excel2013白色：
Excel2013浅灰色：
Excel2013深灰色：
Excel2016多彩：
Excel2016深灰色：
Excel2016黑色：
3.API：
GC.Spread.Sheets.NameBox：
/**
* Gets the NameBox instance by the host element.
* @param {HTMLElement|string} host The host element or the host element id.
* @returns {GC.Spread.Sheets.NameBox.NameBox} The NameBox instance.
* @example
* var spread = new GC.Spread.Sheets.Workbook("ss");
* var nameBox = new GC.Spread.Sheets.NameBox.NameBox('nameBox', spread);
* var nameBoxInstance = GC.Spread.Sheets.NameBox.findControl('nameBox');
*/
findControl(host: HTMLElement|string): GC.Spread.Sheets.NameBox.NameBoxGC.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 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使用名称框实例设置选项：namebox.options.enableAddCustomName = false.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();
页:
[1]