论坛首页 Web前端技术论坛

【Operamasks-UI】omGrid中增加PageSize下拉

浏览 3975 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2013-06-29  

 

问题描述:在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'} ]
});

 

 

 

 

  • 大小: 8.3 KB
   发表时间:2013-07-03  
功能挺实用的,谢谢啦!
0 请登录后投票
   发表时间:2013-07-12  
高手,麻烦问一下omGrid有没有方法可以使用整个grid不可编辑(数据提交前可以行编辑,ajax提交后,不可以再行编辑,没找着相应的api方法)?
谢谢了!
0 请登录后投票
   发表时间:2013-07-14  
sunshineshinesun 写道
高手,麻烦问一下omGrid有没有方法可以使用整个grid不可编辑(数据提交前可以行编辑,ajax提交后,不可以再行编辑,没找着相应的api方法)?
谢谢了!


可以尝试一下$("#grid").omGrid({editMode:'none'}),不过这样会导致grid重新被渲染。 
另外,可以入群312531189讨论OMUI的问题
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics