easyui使用心得 - datagrid前端分页

$("#dg").datagrid();

四个相关属性:pageList,pageSize,pagination,loadFilter

  1. pageList和pageSize一起,定义分页的大小
  2. pagination 显示分页工具栏
  3. loadFilter 加载过滤器,可以过滤和格式化数据后显示。

利用loadFilter进行前端分页:

    该属性接受一个function,这样写,便能分页了:

function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array  
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

    另外,easyui包里,有一个datagrid-filter.js文件,该文件有一个方法myLoadFilter:

function myLoadFilter(data){
		var name = getPluginName(this);
		var state = $.data(this, name);
		var opts = state.options;
		
		if (name == 'datagrid' && $.isArray(data)){
			data = {
				total: data.length,
				rows: data
			};
		}
		if (!opts.remoteFilter){
			if (!state.filterSource){
				state.filterSource = data;
			}
			data = $.extend({}, state.filterSource);
			if (opts.filterRules.length){
				var rows = [];
				for(var i=0; i<data.rows.length; i++){
					var row = data.rows[i];
					if (isMatch(row)){
						rows.push(row);
					}
				}
				data = {
					total: data.total - (data.rows.length - rows.length),
					rows: rows
				};
			}
			if (opts.pagination){
				var dg = $(this);
				var pager = dg.datagrid('getPager');
				pager.pagination({
					onSelectPage:function(pageNum, pageSize){
	                    opts.pageNumber = pageNum;
	                    opts.pageSize = pageSize;
	                    pager.pagination('refresh',{
	                        pageNumber:pageNum,
	                        pageSize:pageSize
	                    });
	                    dg.datagrid('loadData', state.filterSource);
					}
				});
				var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
				var end = start + parseInt(opts.pageSize);
				data.rows = data.rows.slice(start, end);
			}
		}
		return data;
		
		function isMatch(row) {
		    var rules = opts.filterRules;
		    for (var i = 0; i < rules.length; i++) {
		        var rule = rules[i];
		        var source = row[rule.field];
		        if (source || source == "" || typeof (source) == "number") {
		            var op = opts.operators[rule.op];
		            if (!op.isMatch(source, rule.value)) { return false }
		        }
		    }
		    return true;
		}
	}

这个方法也是前端分页的,有时候设置pagination为true,但未能成功分页时,多半是这个方法没有起作用,所以要自己写个像pagerFilter这样的方法,显示的设置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值