jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码-Java开发

要实现jQuery EasyUI datagrid在翻页以后仍能记录被选中行所对应数据的功能，我们可以通过以下步骤实现：

要实现jQuery EasyUI datagrid在翻页以后仍能记录被选中行所对应数据的功能，我们可以通过以下步骤实现：

步骤一：记录选中行的数据

使用EasyUI datagrid中提供的onSelect和onUnselect事件，分别在用户选中和取消选中某一行的时候，记录该行所对应的数据，并将数据存储在一个数组中。具体代码如下：

var selectedRows = [];  // 存储被选中行数据的数组

// datagrid的onSelect事件
function onSelect(index, row){
    selectedRows.push(row);  // 将选中行数据添加到数组中
}

// datagrid的onUnselect事件
function onUnselect(index, row){
    // 在数组中移除取消选中行的数据（使用jQuery的grep函数）
    selectedRows = $.grep(selectedRows, function(n,i){
        return n.id !== row.id;
    });
}

以上代码中，我们通过定义一个selectedRows的全局数组来记录所有被选中的行数据。在datagrid的onSelect事件中，每次选中某一个行时就将该行所对应的数据添加到selectedRows数组中，而在onUnselect事件中，则是将该行所对应的数据从数组中移除。

步骤二：自定义分页插件

由于默认分页控件翻页时会重新加载页面，因此我们需要自定义分页插件，在翻页时不刷新页面，以保持记录选中行的数据的完整性。具体代码如下：

// 自定义分页控件（继承于EasyUI的pagination）
$.extend($.fn.pagination.defaults, {
    onSelectPage: function(pageNumber, pageSize){
        // 获取当前datagrid的数据
        var options = $(this).datagrid('options');
        var queryParams = options.queryParams;

        // 修改分页信息
        queryParams.page = pageNumber;
        queryParams.rows = pageSize;
        options.pageNumber = pageNumber;
        options.pageSize = pageSize;

        // 重新加载datagrid数据
        $(this).datagrid('loadData', queryParams);

        // 循环设置选中的行（使用jQuery的each函数）
        $.each(selectedRows, function(i, row){
            var index = $(this).datagrid('getRowIndex', row);
            $(this).datagrid('selectRow', index);
        });
    }
});

以上代码中，我们重写了EasyUI的pagination控件的onSelectPage事件。在该事件中，我们首先获取当前datagrid的数据，并修改分页信息（pageNumber和pageSize），然后重新加载datagrid的数据。

最后，我们使用jQuery的each函数遍历selectedRows数组中的每一个元素，通过datagrid的getRowIndex函数获取该元素对应的行在datagrid中的索引，然后使用datagrid的selectRow函数设置该行被选中。

示例代码一

<!-- HTML代码 -->
<table id="mygrid"></table>
<div id="mypaginator"></div>

// JS代码
$(document).ready(function(){
    // 初始化datagrid
    $('#mygrid').datagrid({
        url: 'get_data.php',
        pagination: true,
        columns: [[
            {field:'id', title:'ID'},
            {field:'name', title:'名称'}
        ]],
        onSelect: function(index, row){  // 修改为onSelect事件
            selectedRows.push(row);
        },
        onUnselect: function(index, row){  // 修改为onUnselect事件
            selectedRows = $.grep(selectedRows, function(n,i){
                return n.id !== row.id;
            });
        }
    });

    // 初始化自定义分页插件
    $('#mypaginator').pagination({
        total: 100,
        pageSize: 10,
        onSelectPage: function(pageNumber, pageSize){
            var options = $('#mygrid').datagrid('options');
            var queryParams = options.queryParams;
            queryParams.page = pageNumber;
            queryParams.rows = pageSize;
            options.pageNumber = pageNumber;
            options.pageSize = pageSize;
            $('#mygrid').datagrid('loadData', queryParams);
            $.each(selectedRows, function(i, row){
                var index = $('#mygrid').datagrid('getRowIndex', row);
                $('#mygrid').datagrid('selectRow', index);
            });
        }
    });
});

示例代码二

<!-- HTML代码 -->
<table id="mygrid"></table>

// JS代码
$(document).ready(function(){
    // 初始化datagrid（不需要分页控件）
    $('#mygrid').datagrid({
        url: 'get_data.php',
        pagination: false,
        columns: [[
            {field:'id', title:'ID'},
            {field:'name', title:'名称'}
        ]],
        onSelect: function(index, row){  // 修改为onSelect事件
            selectedRows.push(row);
        },
        onUnselect: function(index, row){  // 修改为onUnselect事件
            selectedRows = $.grep(selectedRows, function(n,i){
                return n.id !== row.id;
            });
        }
    });

    // 添加翻页控件并绑定事件
    $('#prevbtn').click(function(){
        var pager = $('#mygrid').datagrid('getPager');
        var options = pager.data('pagination').options;

        if(options.pageNumber > 1){
            options.pageNumber -= 1;  // 修改pageNumber属性
            $(pager).pagination('select', options.pageNumber);  // 触发onSelectPage事件
        }
    });

    $('#nextbtn').click(function(){
        var pager = $('#mygrid').datagrid('getPager');
        var options = pager.data('pagination').options;
        var total = options.total;
        var pageSize = options.pageSize;
        var maxPage = Math.ceil(total / pageSize);

        if(options.pageNumber < maxPage){
            options.pageNumber += 1;  // 修改pageNumber属性
            $(pager).pagination('select', options.pageNumber);  // 触发onSelectPage事件
        }
    });

    // 自定义分页插件
    $('#mygrid').datagrid('getPager').pagination({
        total: 100,
        pageSize: 10,
        onSelectPage: function(pageNumber, pageSize){
            var options = $('#mygrid').datagrid('options');
            var queryParams = options.queryParams;
            queryParams.page = pageNumber;
            queryParams.rows = pageSize;
            options.pageNumber = pageNumber;
            options.pageSize = pageSize;
            $('#mygrid').datagrid('loadData', queryParams);
            $.each(selectedRows, function(i, row){
                var index = $('#mygrid').datagrid('getRowIndex', row);
                $('#mygrid').datagrid('selectRow', index);
            });
        }
    });
});

以上两个示例代码分别实现了自定义翻页插件和使用按钮进行翻页的功能。在实际使用过程中，可以根据具体需求进行适当修改。