java接收前端easyui datagrid传递的数组参数

这篇文章分享一下怎么在easyui的datagrid刷新表格时，在后端java代码中接收datagrid传递的数组参数。

数组来源于技能的tagbox（标签框），tagbox和combobox的区别是tagbox可以选择多项。

标签框渲染的代码为

    $("#skill_ids").tagbox({
		url: "/chongwu_skill_category/selectAll",
		valueField: "id",
		textField: "name",
		width: 300,
		hasDownArrow: true,
		groupField: "type",
		panelHeight: "auto",
		prompt: "--请选择技能--",
		groupFormatter: function(group){
	        return "<span class='red'>" + skillTypes[group] + "</span>";
	    },
		formatter: function(row) {
			return "<img width='18' src='" + row.image + "' />&nbsp;" + row.name;
		}
	});

然后页面上方的搜索按钮绑定刷新表格事件，会获取3个下拉框的值并传到后端。

    $("#search").linkbutton({
		iconCls: "icon-search"
	}).click(function() {
		let categoryId = $("#category_id").combobox("getValue");
		let roleId = $("#role_id").combobox("getValue");
		let skillIds = $("#skill_ids").tagbox("getValues");

		$("#chongwu_list").datagrid("load", {
			roleId: roleId,
			skillIds: skillIds,
			categoryId: categoryId
		});
	});

但是传递参数的时候，发现参数的格式和我们想要的不太一样

参数名居然带了一个数组的[]，很显然这不是我们想要的结果。

改进后的代码

    $("#search").linkbutton({
		iconCls: "icon-search"
	}).click(function() {
		let categoryId = $("#category_id").combobox("getValue");
		let roleId = $("#role_id").combobox("getValue");
		let skillIds = $("#skill_ids").tagbox("getValues");

		$("#chongwu_list").datagrid("load", {
			roleId: roleId,
			categoryId: categoryId,
			skillIds: JSON.stringify(skillIds)
		});
	});

此时参数格式是正确的，把数组转成了json格式的字符串。

然后在后端java通过List<Integer> skillIds参数接收，点击搜索按钮居然报错了，不能把String转为List<Integer>

这时候就要借助spring的转换器来完成类型转换了，创建一个Converter的实现类，并声明为Spring组件。

package cn.edu.sgu.www.mhxysy.converter;

import com.alibaba.fastjson.JSON;
import org.springframework.core.convert.converter.Converter;
import org.springframework.stereotype.Component;

import java.util.List;

/**
 * String ==> List<Integer>的转换器
 * @author heyunlin
 * @version 1.0
 */
@Component
public class StringToListOfIntegerConverter implements Converter<String, List<Integer>> {

    @Override
    public List<Integer> convert(String source) {
        return JSON.parseArray(source, Integer.class);
    }

}

重启项目，重新查询一次，这一次成功了，查询到符合条件的唯一一条数据。

上面已经提供了完美的解决方案，当然，方案不唯一，可以把数组所有元素通过一个字符连接起来，然后在后端通过相同的字符分割，也能得到想要的数组。（博主一开始也是这么实现的）