Skip to content

seajs autoPage.js(自动分页)

awei.yu edited this page Apr 9, 2016 · 1 revision

说明:用于移动端数据分页

api:

int(config):
        说明:初始化函数,用于配置分页信息
        参数说明:
            {
                //分页数据容器id
                "contId":"container_hot",
                //分页模式 默认值:0(下拉加载);1:点击加载
                “loadMode”:1,
                //获取数据地址
                "url":"",
                //分页数据源对应的键名,"result.data"则会将返回json数据中result.data中的数据分条传入"draw"方法中。如果没有数据包装,"dataKey"可留空
                "dataKey":"result.data"
                //默认初始页 格式key=value(根据后台接口设置key值)
                "pageNow":"pageNo=1",
                //分页数据条数 格式key=value(根据后台接口设置key值)
                "pageSize":"pageSize=5",
                //在执行int方法后是否立即加载默认页数据,默认true
                "autoRun":false,
                //http请求类型,默认"get"
                "method":"post",
                //获取不到数据时候的提示信息
                "emptyTip":[String/Element]
                //每条数据的处理回调,此函数一般用于渲染数据,返回类型(String/Element)
                "draw":function(rs,addition){
                     //rs:该页的一条数据
                     //addition:其它数据({
                         baseJson:完整返回数据
                         index:当前条数
                    })
                }
                //每页数据绘制完毕的回调函数,rs为该页json数据(多条)
                "onFinishDraw":function(rs){
 
                },
                //默认情况下,分页插件会通过当前返回的数据项和pageSize对比来判断数据是否加载完毕。也可通过设置以下方法来实现自定义的判断,该方法的传入参数不基于"dataKey",为完整的请求数据
                "isLoadOver":function(baseRs){
                    return true/false;
                }
            }
setConfig(key,value):
    说明:用于对分页配置进行动态修改
    参数说明:
        key(String):要修改的配置键名(支持多级)
        value:对应的修改值
getConfig(key):
    说明:用户获取某个配置项
    参数说明:
        key(String):要获取的配置型键名
    返回值:
        对于配置项的值
update(page):
    说明:一般用于在动态修改完分页配置之后,更新分页数据
    参数说明:
        page(String/Number/null):更新完配置后默认加载的数据页
        String:key=value(同int参数中的pageNow);
        Number:页码
        Null:默认加载第1页
formatData(baseData,itemJson):
    说明:用于将字符串中的json引用值替换为json实际值
    实例:
        formatData("hello {who}",{who:"world"});
        返回:hello world
pageNow:
    说明:属性值。用于获取当前页码

关于config.draw的示例

说明:draw方法用于数据渲染,可以这么理解:
比如每个分页中有10条数据,draw方法就是用来渲染这10条数据的每一条的样子

Function类型

(1) 返回Node

draw:function(rs){
   var div=document.createElement("div");
   div.innerHTML=rs.name;
   return div;
}

(2)返回String

draw:function(rs){
   return "<div>"+rs.name+</div>;
}

String类型(简单粗暴,一般这种配置即可满足需求)

通过关键字{}来实现数据引用

draw:"<div>{name}<div>"
You can’t perform that action at this time.