【easyui】js中动态拼接查询参数

需求描述

公司前端框架使用easyui + layUI，当我们需要开发一个导出功能，调用window.location.href方式弹出新的页面，导出数据表格时发现：

1. 此处传参只能传url的字符串，因此参数必须类似于https://blog.csdn.net/xuexiiphone?xx1=xx1&xx2=xx2
2. 此时，我们需要通过不同组件的getValue方法或者val()的方式，获取到相应的参数以及参数名。将其拼接到url后面。
3. 如果查询条件特别多，则url会写的很长，而且不利于后期维护。

实现步骤

1. 实现getFormData方法，通过遍历表单内的ID，将ID以及value以key-value的形式返回一个map数组。

//根据表单id,获取表单元素值，返回json
//form参数为form表单的ID，此处可以自己定义
function getFormData(form) {
    var o = {};
    var a;
    if ((typeof form) == "string") {
        a = $("#" + form).serializeArray();
    } else {
        a = form.serializeArray();
    }

    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
}

3. 实现getUrlParams(url)方法，将获取到的key-value值，拼接到url后面

/**
 * 动态拼接URL参数 
 * @param url         需要调用的url字符串
 * @return url		  将searchForm表单中的查询参数，逐个拼接到url后面
 */
function getUrlParams(url) {
	var paramDatas = getFormData("searchForm");
	for(var k in paramDatas){
        var value = paramDatas[k] !==undefined ? paramDatas[k] : '';
        if(value != "") {
			url = url + "&"+k+"="+value;
        }
    }
    //如果有一个或者一个以上参数的&符号，需要将第一个转换为？
    url = url.replace('&', '?');
    return url
}

3. 这样，我们在调用函数的时候，就可以很简单的实现参数传递

//导出按钮
	function exportClick() {
		var url = getUrlParams("localhost:8080/exportListByUser.do")
		window.location.href = url;
	}