首页 > 其他 > 详细

easyui datagrid 添加分页事件

时间:2021-06-08 20:16:20      阅读:22      评论:0      收藏:0      [点我收藏+]

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) 
                        }
                    });
                }

 

easyui datagrid 添加分页事件

原文:https://www.cnblogs.com/ckfuture/p/14863784.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!