使用js中Map实现动态自动回填
需求背景
有这样一个需求，数据库中存储了相应的键值对，客户希望页面填报的时候只要选择了对应的键，另外单元格的值就自动填写。
对于这种键值对的存储，在Java中使用Map可以轻松实现，但是在js中Map就需要自己来实现了。
本文即通过实现js的Map数据结构，然后通过单元格的自动计算调用自定义js函数来解决上面提到的需求。
实现步骤
1、 设计报表
要求在页面上输入管号的时候，规格能自动填入。B1和C1分别取出来管号和规格的所有数据，并设其扩展方式为“不可扩展”，详见下图，具体用途在下面详细说明。
2、 js中Map实现
实现上面的需求只需要Map的创建，以及Map的put和get方法，这里只贴出这几点的具体实现，Map的完整实现见文章最后。
function Map() {
this.elements = new Array();
//向MAP中增加元素（key, value)
this.put = function (_key, _value) {
this.elements.push({key:_key, value:_value});
};
//获取指定KEY的元素值VALUE，失败返回NULL
this.get = function (_key) {
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
}
}
}
catch (e) {
return null;
}
};
……
3、 发布报表的页面实现我们的需求
发布报表完整jsp我们不再赘述，这里只看自定义js函数的实现
/**
参数说明：
keys：报表中传递过来的键串，即B1中的管号值
values：报表中传递过来的值串，即C1中的规格值
key：页面上选择的键值，用于查找对应的值
*/
function write(keys,values,key){
//将取出的键值字符串分别存入键值数组
var arr_keys = keys.split(“,”);
var arr_values = values.split(“,”);
//取键数组长度，若值数组长度超出，则舍弃
var length = arr_keys.length;
//新建map对象
var map = new Map();
//将键值数组存入map中
for(var i=0;i<length;i++){
map.put(arr_keys[i],arr_values[i]);
}
return map.get(key);
}
4、 在自动计算中调用自定义js函数
最后我们在报表单元格C3的自动计算中调用上面定义的js函数即可，见下图。
另附Map实现完整代码：
/*
* MAP对象，实现MAP功能
* written by saint
*
接口：
* size() 获取MAP元素个数
* isEmpty() 判断MAP是否为空
* clear() 删除MAP所有元素
* put(key, value) 向MAP中增加元素（key, value)
* remove(key) 删除指定KEY的元素，成功返回True，失败返回False
* get(key) 获取指定KEY的元素值VALUE，失败返回NULL
* element(index) 获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
* containsKey(key) 判断MAP中是否含有指定KEY的元素
* containsValue(value) 判断MAP中是否含有指定VALUE的元素
* values() 获取MAP中所有VALUE的数组（ARRAY）
* keys() 获取MAP中所有KEY的数组（ARRAY）
*
. * 例子：
. * var map = new Map();
*
* map.put(“key”, “value”);
* var val = map.get(“key”)
* ……
*
*/
function Map() {
this.elements = new Array();
//获取MAP元素个数
this.size = function () {
return this.elements.length;
};
//判断MAP是否为空
this.isEmpty = function () {
return (this.elements.length < 1);
};
//删除MAP所有元素
this.clear = function () {
this.elements = new Array();
};
//向MAP中增加元素（key, value)
this.put = function (_key, _value) {
this.elements.push({key:_key, value:_value});
};
//删除指定KEY的元素，成功返回True，失败返回False
this.remove = function (_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
}
catch (e) {
bln = false;
}
return bln;
};
//获取指定KEY的元素值VALUE，失败返回NULL
this.get = function (_key) {
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
}
}
}
catch (e) {
return null;
}
};
//获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
this.element = function (_index) {
if (_index < 0 || _index >= this.elements.length) {
return null;
}
return this.elements[_index];
};
//判断MAP中是否含有指定KEY的元素
this.containsKey = function (_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
}
}
}
catch (e) {
bln = false;
}
return bln;
};
//判断MAP中是否含有指定VALUE的元素
this.containsValue = function (_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
bln = true;
}
}
}
catch (e) {
bln = false;
}
return bln;
};
//获取MAP中所有VALUE的数组（ARRAY）
this.values = function () {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
};
//获取MAP中所有KEY的数组（ARRAY）
this.keys = function () {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
};
}
var map = new Map();