EasyUI中通过id获取不知道具体类型表单控件的值，通过自写map实现

我在用freemarker封装自定义的datagrid时有这样的需求：

我会根据表格的的列属性自动为表格生成相应的查询条件，默认为easyui-textbox类型的

通过接口支持用户自定义其他的类型，例如numberbox，datebox等

这样就出现了一个问题，我在点击查询的时候程序不知道查询条件是什么类型的所以没法用("#XXX").textbox("getValue"),(“#XXX”).datebox(“getValue”)等这样的官方提供的方法来获取值，而通过$(“#XXX”).val()这样的js通过方法却获取不到值，因为easyui会在页面加载的时候会对标签进行渲染，从而改变了标签的结构，这样就比较尴尬了。。。

通过一顿纠结之后，我准备是用类似map集合的方法来实现记录用户的修改类型的操作，在用户修改控件之后便对其进行记录，key为控件的id，value为控件的值。在获取值得时候对其进行判断，如果修改了值就对他进行对应类型的获取操作。

这样操作首先需要先建立构建map的实现方法，因为js中是没有map这个类型的，我这边是通过一个类似C++中的结构体的方式来实现的，看代码：

function Map() {
this.arr = new Array();
var struct = function(key, value) {
this.key = key;
this.value = value;
};

this.put = function(key, value){
for (var i = 0; i < this.arr.length; i++) {
if ( this.arr[i].key === key ) {
this.arr[i].value = value;
return;
}
}
this.arr[this.arr.length] = new struct(key, value);
};

this.get = function(key) {
for (var i = 0; i < this.arr.length; i++) {
if ( this.arr[i].key === key ) {
return this.arr[i].value;
}
}
return null;
};

this.values=function(){
var value=[]
for (var i = 0; i < this.arr.length; i++) {
value.push(this.arr[i].value);
}
return value.join(",");
};

this.remove = function(key) {
var v;
for (var i = 0; i < this.arr.length; i++) {
v = this.arr.pop();
if ( v.key === key ) {
continue;
}
this.arr.unshift(v);
}
};

this.size = function() {
return this.arr.length;
};

this.isEmpty = function() {
return this.arr.length <= 0;
};

this.contains = function(key) {
for (var i = 0; i < this.arr.length; i++) {
if ( this.arr[i].key === key ) {
return i;
}
}
return -1;
}
}

测试操作：

var map = new Map();
map.put("c_username","numberbox");
map.put("d_startdate","datebox");
console.info(map.values());
console.info(map.contains("c_username"));

经过测试是可以使用的

这个是具体的是实现方法：

function getValues(key){
var returnVal;
if(map.contains(key)>-1){
var type = map.get(key);
switch (type)
{
case "combobox":
returnVal = $("#tb_"+key).combobox("getValue");//$("#tb_"+key)是我自定义的格式
break;
case "numberbox":
returnVal = $("#tb_"+key).numberbox("getValue");
break;
case "datebox":
returnVal = $("#tb_"+key).datebox("getValue");
break;
case "datetimebox":
returnVal = $("#tb_"+key).datetimebox("getValue");
break;

}
}else{//默认使用textbox获取
returnVal = $("#tb_"+key).textbox("getValue");
return returnVal
}
}