当前位置：首页 > article >正文

JS宏实例：数据透视工具的制作（四）

article 2025/2/23 21:03:28

上一节中，我们完成了核心的计算代码部分，本节中将完善事件代码

一、创建所有需求的事件函数

1、窗体初始化

// 窗体初始化
function pivotForm_Initialize(){} 
function typeSet_Initialize(){} 
function valueSet_Initialize(){} 
function allColTypeSet_Initialize(){}

上述是四个窗体显示前会执行的事件

2、主窗体部分事件

// pivotForm 主窗体事件
function pivotForm_CommandButton1_Click(){} 
function pivotForm_CommandButton2_Click(){} 
function pivotForm_CommandButton3_Click(){} 
function pivotForm_CommandButton4_Click(){} 
function pivotForm_CommandButton5_Click(){} 
function pivotForm_CommandButton6_Click(){}
function pivotForm_TextEdit1_Change(){} 
function pivotForm_ListBox1_DblClick(cancel){} 
function pivotForm_ListBox2_DblClick(cancel){}
function pivotForm_ListBox3_DblClick(cancel){} 
function pivotForm_ListBox4_DblClick(cancel){} 
function pivotForm_ListBox5_DblClick(cancel){}

3、附属窗体事件

// typeSet 单个字段设置窗体事件
function typeSet_CommandButton1_Click(){} 
function typeSet_CommandButton2_Click(){} 
function typeSet_CommandButton3_Click(){}
function typeSet_ComboBox1_Change(){} 
function typeSet_ComboBox2_Change(){}

// valueSet 值字段设置窗体事件
function valueSet_CommandButton1_Click(){} 
function valueSet_CommandButton2_Click(){} 
function valueSet_CommandButton3_Click(){}
function valueSet_ComboBox1_Change(){} 
function valueSet_ComboBox2_Change(){} 
function valueSet_ComboBox3_Change(){}
function valueSet_ComboBox4_Change(){} 
function valueSet_ListBox1_Click(){}

// allColTypeSet 字段类型设置窗体事件
function allColTypeSet_CommandButton1_Click(){} 
function allColTypeSet_ComboBox1_Change(){} 
function allColTypeSet_ComboBox2_Change(){}

注意：上述事件函数可以在全局定义，然后通过代理或闭包的方式去拦截它的调用，从而更改它的行为，因此，我们可以定义一个事件类和一个事件绑定方法来完成这一操作

二、事件类的构造函数

1、代码

commandButtonClick

// 事件类
function Events() {}
Events.prototype = {
	formInitialize: function(userform, obj, moveObj) {
		// userform 是一个窗体对象
		// obj 是一个对象，对象中的key是控件名称，值是一个数组存储默认值，或初始化
		// moveObj key = 要移动的控件名称，value = [left, top, height, width]
		for (let key in obj) {
			let str = key.match(/[a-zA-Z]+/g);
			if (str === "CommandButton" || str === "Label") {
				userform.Controls(key).Caption = obj[key][0];
			} else if (str === "ComboBox" || str === "ListBox") {
				obj[key].slice(1).forEach(i => userform.Controls(key).AddItem(i));
				userform.Controls(key).Value = obj[key][0];
			} else if (str === "TextEdit") {
				userform.Controls(key).Value = obj[key][0];
			}
		}
		
		for (let key in moveObj) {
			userform.Controls(key).Left = moveObj[0];
			userform.Controls(key).Top = moveObj[1];
			userform.Controls(key).Height = moveObj[2];
			userform.Controls(key).Width = moveObj[3];
		}
	},
	
	commandButtonClick: function(fu) {return fu;},
	
	textEditChange: function(fu) {return fu;},
	
	comboBoxChange: function(fu) {return fu;},
	
	listBoxDblClick: function(fu, cancel) {return fu;},
}

2、说明

在原型链中，定义了五个方法：

formInitialize：窗体初始化事件，也就是打开窗体要执行的操作
- 参数
  - userform：窗体对象
  - obj：对象中的key是控件名称，值是一个数组存储默认值，或初始化操作数据
  - moveObj：key 是要移动的控件名称，value = [left, top, height, width]
- 局限性
  - 未给出所有控件的操作方式
  - 为给出所有属性的操作
- 优化方式
  - 通过Proxy对象来拦截该函数的调用，给他增加其他行为
  - 通过闭包，给它添加额外的操作等
commandButtonClick：命令按钮的点击事件，点击按钮时，执行传入的函数fu
textEditChange：文本框内容发生变化时，执行传入的操作函数fu
comboBoxChange：组合框内容发生变化时，执行传入的操作函数fu
listBoxDblClick：在列表框中双击某一元素时，执行传入的操作函数fu