easyui-datagrid使用load()保持分页显示数量

easyui snippet 2017-6-20 14:41:26

我之前用easyui-datagrid都是使用的下面这种方法加载数据，查询按钮就是再调一次这个方法。这样做有个小问题，就是在设置了非默认分页参数时，再点查询按钮（即执行下面这个方法）分页显示的数量又会回到默认值（此处为20）。

function queryDemoByCondition() {
    var name = $('#name').textbox('getValue');
    var age = $('#age').textbox('getValue');
    var lastModifiedStartTime = $('#lastModifiedStartTime').datebox('getValue');
    var lastModifiedEndTime = $('#lastModifiedEndTime').datebox('getValue');
    var gender = $('#gender').combobox('getValue');
    var valid = $('#valid').combobox('getValue');
    $('#demoTable').datagrid(
      {
            url : "queryDemoListByCondition",
            loadMsg : '数据加载中,请稍后...',
        pagination : true,
        singleSelect : true,
        height : 400,
        pageSize : 20,
        fitColumns :true,
            queryParams : {
        name : name,
        age : age,
        lastModifiedStartTime : lastModifiedStartTime,
        lastModifiedEndTime : lastModifiedEndTime,
        gender : gender,
        valid : valid
    },
    columns : [ [
    {
            field : 'id',
        title : 'id',
        width : 80
    },
    {
           field : 'name',
                                    title : '姓名',
                                    width : 60,
                                },
                                {
                                    field : 'age',
                                    title : '年龄',
                                    width : 60,
                                },
                                {
                                    field : 'gender',
                                    title : '性别',
                                    width : 60,
                                    formatter : function(value, row, index) {
                                        if (value == 10) {
                                            return '女';
                                        } else if (value == 20) {
                                            return '男';
                                        } else
                                            return '';
                                    }
                                },
                                {
                                    field : 'lastModifiedBy',
                                    title : '最后修改人id',
                                    width : 180
                                },
                                {
                                    field : 'lastModifiedTime',
                                    title : '最后修改时间',
                                    width : 160,
                                    formatter : function(value, row, index) {
                                        if (value != null) {
                                            var valueSplit = value.split(".");
                                            if (valueSplit.length == 2) {
                                                return valueSplit[0];
                                            }
                                        }
                                        return value;
                                    }
                                },
                                {
                                    field : 'addedBy',
                                    title : '新增人',
                                    width : 100
                                },
                                {
                                    field : 'addedTime',
                                    title : '新增时间',
                                    width : 160,
                                    formatter : function(value, row, index) {
                                        if (value != null) {
                                            var valueSplit = value.split(".");
                                            if (valueSplit.length == 2) {
                                                return valueSplit[0];
                                            }
                                        }
                                        return value;
                                    }
                                },
                                {
                                    /*
                                     * valid 有效状态 T=有效 F=无效
                                     */
                                    field : 'valid',
                                    title : '有效状态',
                                    width : 60,
                                    formatter : function(value, row, index) {
                                        if (value == 'T') {
                                            return "有效";
                                        } else if (value == 'F') {
                                            return "无效";
                                        } else {
                                            return "";
                                        }
                                    }
                                },
                                {
                                    field : 'code',
                                    title : '操作',
                                    width : 60,
                                    formatter : function(value, row, index) {
                                        var pkId = row.pkId;
                                        var valid = row.valid;
                                        if (valid == 'T') {

                                            return "<div><a href='javascript:void(0)' class='easyui-linkbutton' data-options='toggle:true' onclick='changeStatus("
                                                    + pkId
                                                    + ","
                                                    + '"'
                                                    + valid
                                                    + '"' + ")'>有效</a></div>";
                                        } else {

                                            return "<div><a href='javascript:void(0)' class='easyui-linkbutton' data-options='toggle:true' onclick='changeStatus("
                                                    + pkId
                                                    + ","
                                                    + '"'
                                                    + valid
                                                    + '"' + ")'>无效</a></div>";
                                        }
                                    }
                                } ] ]
                    });
}

参考easyui官方文档http://www.jeasyui.com/documentation/index.php
解决这个问题可以使用load方法，如下：

function queryDemoByConditionByClick(){
    $('#demoTable').datagrid('load');
}

不过要注意这样做点击查询按钮后会回到第一页。