jquery easyui 中combogrid , datagrid 自定义分页

原创 2014年06月05日 18:08:30

             去掉记录相关字符

去掉前                                                                                        去掉后


第一中方法

1.取到combogrid的datagrid

var comDataGrid = $(itemId).combogrid('grid');

   comdataGrid只是一个table combogrid中的datagrid生成的table对象。断点调试添加监控可以看到是一个table对象

如下图


       在火狐中调试点击上图红色框中的table可以看到下图代码(图片代码就是一个combogird生成的一datagrid)


             

以上源码清楚以后就可以用jquery操作源代码,我们就可以为所欲为(jquery强大的功能你懂得)

var comDataGrid = $(itemId).combogrid('grid');

//查看源码找到需要操作的分页class进行操作

comDataGrid.parent().next().find(".pagination-info").hide();//此处隐藏成功 ;

当然为了更炫可以添加各式特效(这也是这种操作方法的好处)当然弊端也是有的,你必须保证控件已经解析完毕。

解决方案价格setTimeout(function () {

$(itemId).combogrid('grid').parent().next().find(".pagination-info").hide();//此处隐藏成功 ;

},0) setTimeout方法说明:这个方法是javascript自带方法当整个js加载执行完成后开始计时执行,所以只要将其放到combogrid解析的同你js就不会有问题。


第二种方法 通过jquery-easyui中提供的方法进行操作;

通过api我们可以了解到ComboGrid

依赖关系

 所以combogrid可以调用两者的属性方法事件都可以。

datagrid

依赖关系


而pagination

api中的一段说明详细见官方api

displayMsg string 显示页面信息。

所以就要隐藏页面信息。

如下代码:

         //初始化下拉
            selectControl.combogrid({
             此处省略代码段
            });
            //grid自定义
            var grid = selectControl.combogrid('grid');
            grid.datagrid({
                pagination: "false",
                pageSize: data.combox.pageSize == undefined ? 10 : data.combox.pageSize,
                pageList: [5, 10, 20]

            });
            //此处注释代码是说明pagination分页面板参数设置只做参考
            //            dg.datagrid('getPager').pagination({
            //                layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh']
            //            });

//隐藏页面信息
            grid.datagrid('getPager').pagination({ displayMsg:''});
            //分页事件
            grid.datagrid("getPager").pagination({
                onSelectPage: function (pageNumber, pageSize) {
                    queryParam.page = pageNumber;
                    queryParam.rows = pageSize;
                    //重新加载grid
                    loadData(grid, queryParam);

                }
            });


jquery  esayui 是一个开源而且功能相当强大的插件。开源我们可以根据自己需求随便改,js插件多平台都也引用。





相关文章推荐

jQuery EasyUI ComboGrid 集成分页、按键示例

需求: 1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据; 5、在下拉框的文本框...
  • jumtre
  • jumtre
  • 2014年08月20日 16:18
  • 13286

easyUi combogrid 实现分页和动态搜索远程数据

原文地址:http://xinming-me.iteye.com/blog/1308612 最近自己研究了EasyUI combogrid,并实现的其分页。发现网上的资料很少,所以发一份自己的demo...

EasyUI中的combogrid实现分页功能

在jquery.easyUI.js 要实现分页,必须在后台接收参数时声明两个变量:page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数。 这两个属性的名称在e...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

自定义ExtJS控件之Ext下拉树和Ext下拉表格

简介在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

easyui combogrid下拉表格的分页/按键/动态搜索

需求: 1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据; 5、在下拉框的文本框...

easyui的datagrid中editor和combogrid的结合使用

easyui的datagrid中editor和combogrid的结合使用

easyUI在可编辑的datagrid中加入combogrid 实现下拉选择填充列

在公司的项目中,有需要再添加数据的时候,通过下来选择数据来完成数据的填充。 网上找了很多关于datagrid绑定 combogrid的方法,都不能很好的解决问题,于是自己根据easyUI的api完成了...

easyui DataGrid editors扩展之combogrid ,combogrid 下拉选择后填充 editor 列内容方法

首选是对datagrid editors  进行拓展 combogrid jeasyui官网原文:http://www.jeasyui.com/forum/index.php?topic=478....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery easyui 中combogrid , datagrid 自定义分页
举报原因:
原因补充:

(最多只允许输入30个字)