集智平台中报表使用js中Map实现动态自动回填

需求背景

客户在使用集智平台有这样一个需求,数据库中存储了相应的键值对,客户希望页面填报的时候只要选择了对应的键,另外单元格的值就自动填写。

对于这种键值对的存储,在Java中使用Map可以轻松实现,但是在jsMap就需要自己来实现了。

本文即通过实现jsMap数据结构,然后通过单元格的自动计算调用自定义js函数来解决上面提到的需求。

实现步骤

1、 设计报表

要求在页面上输入管号的时候,规格能自动填入。B1C1分别取出来管号和规格的所有数据,并设其扩展方式为”不可扩展”,详见下图,具体用途在下面详细说明。

2、 jsMap实现

实现上面的需求只需要Map的创建,以及Mapputget方法,这里只贴出这几点的具体实现,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.keyelement.value获取KEYVALUE),失败返回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.keyelement.value获取KEYVALUE),失败返回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();