EasyUI表格DataGrid假分页及获取表格数据

Posted xianya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI表格DataGrid假分页及获取表格数据相关的知识，希望对你有一定的参考价值。

   假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目

   在假分页的情况下获取所有数据：

var totalData = $("#datagrid").datagrid(‘getData‘);

var rows = totalData.originalRows;

完整的Demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">
        <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
        <title></title>
        <script>
            $(document).ready(function() {
                $("#datagrid").datagrid({
                    pagination: true, //分页控件
                    pageSize: 3,
                    pageList: [3, 6, 9],
                    loadFilter: partPurchasePagerFilter
                }).datagrid(‘loadData‘, getData());
                
                $("#btn").click(function(){
                    //获取假分页的所有数据
                    var totalData = $("#datagrid").datagrid(‘getData‘);
                    var rows = totalData.originalRows;
                    $.each(rows,function(i,value){
                        alert("所有行 "+value.stuNo+" "+value.stuName+" "+value.stuSex);
                    })
                    
                    //获取假分页的当前页数据
                    var currentRows = $("#datagrid").datagrid(‘getRows‘);
                    $.each(currentRows,function(i,value){
                        alert("当前页 "+value.stuNo+" "+value.stuName+" "+value.stuSex);
                    })
                });
            });
            
            function getData(){
                var rows = [];
            for(var i=1; i<=10; i++){
                rows.push({
                    stuNo: 2230+i,
                    stuName: ‘Name‘+i,
                    stuSex: ‘男‘
                });
            }
            return rows;
            }

            function partPurchasePagerFilter(data) {
                if(typeof data.length == ‘number‘ && typeof data.splice == ‘function‘) {
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var dg = $(this);
                //返回属性对象
                var opts = dg.datagrid(‘options‘);
                //返回页面对象
                var pager = dg.datagrid(‘getPager‘);
                pager.pagination({
                    onSelectPage: function(pageNum, pageSize) {
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination(‘refresh‘, {
                            pageNumber: pageNum,
                            pageSize: pageSize
                        });
                        dg.datagrid(‘loadData‘, data);
                    }
                });
                if(!data.originalRows) {
                    data.originalRows = (data.rows);
                }
                var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = (data.originalRows.slice(start, end));
                return data;
            }
        </script>
    </head>

    <body>
        <table data-options="fitColumns:true,rownumbers:true" id="datagrid" class="easyui-datagrid" title="学生">
            <thead>
                <tr>
                    <th data-options="field:‘stuNo‘,width:100">学号</th>
                    <th data-options="field:‘stuName‘,width:100"> 姓名 </th>
                    <th data-options="field:‘stuSex‘,width:100">性别</th>
                </tr>
            </thead>            
        </table>
        <button id="btn">获取数据</button>
    </body>
</html>

 

以上是关于EasyUI表格DataGrid假分页及获取表格数据的主要内容，如果未能解决你的问题，请参考以下文章

jQuery easyUI 使用 datagrid 表格

jquery easyui datagrid 分页实现

easyui datagrid 怎么动态获取到表头的名称

easyui 前端分页及前端查询

Jquery EasyUI datagrid后台数据表格生成及分页详解

为啥easyui-datagrid分页控件把所有的都遮住了？