easyui datagrid 添加分页事件

1.定义一个datagrid 

 <table id="dg" style="width: 100%; height: 100%;" title=""  pagination="true" singleSelect="true" rownumbers="true"></table>

2.初始化datagrid

   //初始化datagrid
                $("#dg").datagrid({
                    title: title,
                    toolbar: '#tb',
                    url: '',
                    fitColumns: false,
                    pagination: true,
                    rownumbers: true,
                    singleSelect: false,
                    selectOnCheck: false,
                    loadMsg: "正在加载数据...",//
                    frozenColumns: [[
              
                        
                    ]],
                    columns: [[
                        { field: 'ID', title: '序号', align: 'center', hidden: true },
                        {
                            field: 'operate', title: '操作', align: 'center', width: 60,
                            formatter: function (value, row, index) {

                          
                                var str = '<img src="/Themes/easyui/icons/pencil.png" title="修改" alt="修改" onclick="Edit()">&nbsp;&nbsp;<img src="/Themes/easyui/icons/cancel.png" title="删除" alt="删除" onclick="Del()">';

                                return str;
                            }
                        },
                        { field: 'DeviceCode', title: '编号', width: 90, align: 'center', sortable: true },
                        {
                            field: 'DeviceType', title: '类型', sortable: 'true', width: 80, align: 'center', sortable: true
                        },
                        { field: 'Manufacturer', title: '制造厂家', width: 110, align: 'center', sortable: true },
                        { field: 'SpecificationType', title: '规格型号', width: 90, align: 'center', sortable: true },
                        { field: 'CertificateCode', title: '证书编号', width: 100, align: 'center', sortable: true },
                        { field: 'VerificationInstitution', title: '检定机构', width: 100, align: 'center' },
                        { field: 'CheckDate', title: '检定日期', width: 100, align: 'center' },
                        { field: 'ChkeckExpireDate', title: '到检时间', width: 100, align: 'center' },
                        {
                            field: 'CheckPeriod', title: '检定周期', width: 60, align: 'center'
                        },
                        {
                            field: 'UseStatusName', title: '使用状态', width: 70, align: 'center'
                        },
                        {
                            field: 'UseStatus', title: '使用状态', width: 0, hidden: true
                        },
                        {
                            field: 'DevieceLevel', title: '级别', width: 0, hidden: true
                        },
                        {
                            field: 'DesignParameters', title: '设计参数', width: 0, hidden: true
                        },
                        {
                            field: 'SetupPosition', title: '安装位置', width: 90, align: 'center'
                        },
                        { field: 'FileNames', title: '文件名称', width: 80, hidden: true },
                        {
                            field: 'FilePaths', title: '附件', width: 120,
                            formatter: function (value, row, index) {

                                var str = '';
                                //../Files/UploadFile/Safety/

                                //判断是否存在附件
                                if (value != undefined) {
                                    if (value != '') {
                                        var arryFilePaths = new Array();
                                        var arryFileNames = new Array();
                                        arryFilePaths = value.split(",");
                                        arryFileNames = row.FileNames.split(",");
                                        //console.log('arryFilePaths=', arryFilePaths);

                                        for (i = 0; i < arryFilePaths.length; i++) {
                                            str += '&nbsp;<a href="../Files/UploadFile/Safety/' + arryFilePaths[i] + '" title="' + arryFileNames[i] + '"><img src="/Themes/easyui/icons/report_go.png"></a>';
                                        }
                                    }
                                }
                                return str;
                            }
                        }
                       
                    ]],
                    pagination: true
                   
                });

3.添加分页事件监听

 var pg = $("#dg").datagrid("getPager");
                if (pg) {
                    $(pg).pagination({
                        onBeforeRefresh: function () {
                            //刷新前
                        },
                        onRefresh: function (pageNumber, pageSize) {
                           //刷新时
                        },
                        onChangePageSize: function () {
                           //更改分页数字
                        },
                        onSelectPage: function (pageNumber, pageSize) {
                            //分页选择,上一页、下一页、首页、尾页

                            //如果想保持datagrid继续编号 就添加以下代码
                            var gridOpts = $('#dg').datagrid('options');
                            gridOpts.pageNumber = pageNumber;
                            gridOpts.pageSize = pageSize;

                            //调用后台ajax方法获取动态数据
                            getData(pageNumber, pageSize, null, null) 
                        }
                    });
                }

 

posted @ 2021-06-08 17:37  创客未来  阅读(682)  评论(0编辑  收藏  举报