Easyui 分页工具条自动带指定查询参数queryParams

背景

在一个后台管理模块有使用了easyUI组件，然而就如何自动带上搜索历史参数进行分页时也一致，保持结果符合搜索条件，如存在条件，结果为100页，点击下一页时也带入搜索条件。

解决方式是使用 $grid.datagrid 的 queryParams 参数，非常简单，由于该问题查询了两次百度，故记录一下。

场景和原理

查询列表页，存在搜索条件，查询点击按钮，table列表

页面加载时就会触发内容列表加载一次，当触发查询按钮时，触发函数 queryRecord 即重新加载一次

$grid.datagrid({}); 该触发方式也会重新请求一次接口进行数据reload

由于使用了同一个 $grid 对象，传入 queryParams 会动态更新 $grid的内部查询参数，所以触发

$grid.datagrid({}); 是就已经加载了新增请求url的参数进入，故分页可以直接添加查询参数！

案例

 <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="javascript:queryRecord();">查询</a>

案例代码

$(function () {
	$grid.datagrid({
	            rownumbers: false,
	            singleSelect: false,
	            method: 'get',
	            toolbar: '#tp',
	            pagination: 'true',
	            remoteSort: false,
	            url: "/xxxx/_query/", // 知道加载的异步数据接口地址
	            columns: [columnJson],
	            pageSize: 20,
	            pageList: [10, 20, 30, 40, 50],
	            onDblClickRow: function (rowIndex, rowData) {
	               // 双击操作
	            }
	        });
	    });
});

 function queryList(param) {
 	 // param为对象
     $grid.datagrid({queryParams: param})
 }
 
  // 该方法用于点击查询按钮时触发
function queryRecord() {
     queryList(searchForm.serializeObject());
 }
 
$.fn.serializeObject = function() {
    let a = this.serializeArray();
    let o = {};
    $.each(a, function() {
        if (o[this.name]) {
            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;
};