问题描述:在operamasks-ui的omGrid的分页条中没有pageSize的下拉选择框,而这个功能也是一个很实用的功能,本问题对omGrid进行扩展,实现该功能。
解决方案:通过扩展omGrid,为omGrid增加选项limits,其取值为一个数组,如[10,20,50,100],功能实现效果如下图:
插件代码如下:
/* * Depends: * om-grid.js */ (function($) { /** * 为表格增加分页下拉 */ $.omWidget.addInitListener('om.omGrid',function(){ var grid=this,op = this.options; var limit = op.limit; var limits=op.limits || [10,20,50,100]; if($.inArray(limit,limits)==-1){ limits.push(op.limit); } //.pLimit var limitDiv = $("<div class='pGroup'><div class='pLimit'><select></select><div></div>"); var select = $("select",limitDiv); $.each(limits,function(i,v){ select.append($("<option></option>").attr("value",v).text(v)); }); select.val(limit); select.change(function(){ grid.option("limit",parseInt(select.val())); //需要跳转到第1页 grid.reload(1); }); $(".pDiv2",this.pDiv).prepend(limitDiv); }); })(jQuery);
测试代码:
$('#grid').omGrid({ title : '表格', dataSource:'data.json', limit:10, limits:[10,20,50,100], colModel : [ {header : 'ID', name : 'id', width : 100}, {header : '地区', name : 'city', width : 120}, {header : '地址', name : 'address', align : 'left'} ] });