zoukankan      html  css  js  c++  java
  • easyui 前端分页及前端查询

    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||1; // 修复查找无数据时,pageNum变为0的情况,导致又重新加载数据
                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 || '').trim(),
                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) < 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));
    data.total = data.originalRows.length; }
    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(); }

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

  • 相关阅读:
    String
    Array常用方法
    Array类
    ruby调试/练习时的小技巧
    集合类对象的遍历处理办法
    Tech road one step 7-Noc to 13-Nov
    Tech road one step 31-Oct 6-Nov
    TechRoad_oneStep_17-23 10
    TechRoad_oneStep_1001
    TechRoad_oneStep_0919
  • 原文地址:https://www.cnblogs.com/xtreme/p/10986525.html
Copyright © 2011-2022 走看看