easyui 前端分页及前端查询

Posted 2021-12-25 xtreme

1、静态分页核心方法

// 前端分页 -- 将datagrid的loadFilter属性设置为这个方法名即可
function partPurchasePagerFilter(data) 
    if (typeof data.length == ‘number‘ && typeof data.splice == ‘function‘) 
        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);
    
    if(opts.queryParams.searchText && opts.queryParams.likeFields) // 实现前端查询过滤
        var sTxt = opts.queryParams.searchText,
            fields = opts.queryParams.likeFields;
        var nRows = data.originalRows.filter(function(row)
                        var isMatch = false;
                        fields.split(‘,‘).map(function(field) 
                             if (sTxt && row[field] && row[field].indexOf(sTxt.trim()) < 0) 
                                  
                              else if(row[field])
                                isMatch = true
                             
                        );
                        return isMatch;
                    );
        data.total = nRows.length;
        data.rows = (nRows.slice(start, end));
    else 
        data.rows = (data.originalRows.slice(start, end));
    
    
    return data;

 

2、触发前端查询过滤方式

   /**
    * 前端方式查询表格
    * @param tb (object): 表格对象
    * @param fields(string): 匹配的字段属性（多个以逗号分隔）
    * @param text(string): 检索的文本
    * @eg: searchFun($(‘#userTable‘), ‘name,sex‘, ‘赵公子‘);
    **/
    function searchFun(tb,fields,text) 
      // 传递查询参数
      $.extend(tb.datagrid(‘options‘).queryParams,searchText: text,likeFields: fields);
      // 触发表格数据前端刷新
      tb.parents(‘.datagrid-wrap‘).find(‘.pagination-load‘).click();
    

 

至此完整的前端分页算完成<(*￣▽￣*)/