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);
    }

}

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值