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

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

一、创建所有需求的事件函数 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：命令按钮的点击事件，点击按钮时，执行传入的函数futextEditChange：文本框内容发生变化时，执行传入的操作函数fucomboBoxChange：组合框内容发生变化时，执行传入的操作函数fulistBoxDblClick：在列表框中双击某一元素时，执行传入的操作函数fu

暂未写玩，后续直接在这里补充