公司基于jqgrid封装了一个标签，最近客户有了一个新的需求，那就是可以动态添加分页里面每页条数的选项，我查了又再查jqgrid的API，发现jqgrid没有获取pager对象的方法，jqgrid把pager当做是grid的一部分了，同时密封起来，这个跟easyui可以通过getPager方法可以获取pager对象不一样，然后通过pager.pagination进行刷新分页。虽然说jqgrid没有开放相关的接口，但是问题还是要解决，于是我转换一种思路，那就是直接操作html元素，要知道现在大多数基于javascript语言开发的富客户端框架的组件基本单元都是html元素，无论是extjs、还是基于jQuery javascript库的各种ui了。
第一步我使用浏览器chrome提供的调试插件找到分页页数选项其实是一个select元素，那么我要添加页数选项就仅仅是往里面添加一个option元素而已，于是我的问题变成了如何找到这个select元素，在调试插件看到这个select元素没有id，也没有name属性，html dom定义的document就只有getElementsByTagName()了，其实是用原生的html dom也是可以实现的，不过是自己稍微多做一些判断，例如这里select有什么特殊的属性等等，再话唠一下就是，功能强大的jQuery库html dom操作都是基于上面做封装的。我选择jQuery，不过我没有jQuery的标签选择器，因为我发现这个select元素的外层有个td元素有id，所以我是选中这个id找到td，再在这个td里面找到select元素，这样效率上面应该会快一点。到了这里，往页数选项添加新每页页数已经是可以了，添加每页页数之后你选中这个页数，jqgrid会更新查询的，但是你要想做到的效果是添加了新每页页数选项后就根据它进行分页查询的话，那么就要选中这个页数，我使用$(this).val();对select进行赋值，但是没有触发查询。接下来我就要查找触发grid分页查询的事件，由于数值更改都是针对select的，所以我主要在jqgrid源码里面找到这个select元素，于是我赋值这个select的class值ui-pg-selbox进行查找，终于让我在1946行(jquey.jqGrid4.4.1.src.js)找到在这个select上面绑定了change事件，所以我给select添加option后，我需要给select赋值，赋值之后我还需要手动触发change事件。具体代码实现如下：
function changePager(){
var pagerCenter =$(‘#pager_list_pager_center‘);//获取td
pagerCenter.find(‘select‘).each(function(){//在td里面再查找select元素
if($(this).hasClass(‘ui-pg-selbox‘)){//目前select的class值为ui-pg-selbox
$(this).append(‘<option id="a‘+1+‘" value="‘+1+‘">全部</option>‘);//往select添加option
$(this).val(1);//给select赋值
$(this).trigger(‘change‘);//触发select的change事件
}
});
}
图片如下：
原文地址：http://blog.csdn.net/mindfeel/article/details/40373841
