bui.list Class

Defined in: src/scripts/ui/bui.list.js:8

Module: UI

列表自动分页加载及刷新

注意field的配置,其中的field:{data:"data"} 为请求以后返回的数组所在字段, 对比示例的json理解. 如果结果是数组, 无需配置

list = scroll + pullrefresh 把scroll的数据请求逻辑封装,只需要传id,url,data,模板的生成器,field(把数据映射),如果需要你的页面的逻辑比较复杂,建议参考 bui.scroll

预览地址: demo

方法说明:

refresh: 手动刷新数据
option: 获取设置参数
widget: 获取依赖的scroll控件,然后使用scroll的方法

Constructor

`bui.list`

(

option

)

Defined in src/scripts/ui/bui.list.js:8

Parameters:

option Object
- id String
  
  [控件id]
- url String
  
  [数据请求地址]
- [data] [数据请求许可参数, 分页及分页大小在field 配置, 默认请求的分页是: "page","pageSize", 这里只能是对象, 如果需要JSON.stringify 转换接口才能正确接收, 可以增加一个 needJsonString: true 参数, 会进行内部转换] Object optional
- [method] ["GET" || "POST"] String optional
- [headers] [通过header传输的参数 {}] Object optional
- [dataType] [默认 json | jsonp | script | xml | html | text] String optional
- [contentType] [get默认 'text/html;charset=UTF-8', 如果需要由$.ajax处理, 可以传 "" | post默认: 'application/x-www-form-urlencoded'(表单,接口跨域需要设置这个) | 'multipart/form-data'(表单里有file文件) | 'application/json'(后端要用@requestbody接收) 前端传过去的参数要用 JSON.stringify 转换下] String optional
  
  '
- [timeout] [默认:20000] Number optional
- [headers] [ {}] Object optional
- [localData] [1.4.5新增,本地数据,格式保持跟接口返回数据一致,如果有本地数据,不再请求] Object optional
- [field] [ 请求及返回的真实字段, 例如: 请求的分页字段为 "pagination", 大小字段名为: "psize" , 返回的数据为 {"result":[]}, 则filed= { page:"pagination",size:"psize",data:"result" }] Object optional
- [field.page] [ 默认: "page", 分页的字段名, 如果分页的字段名不是"page",需要更改] String optional
- [field.size] [ 默认: "pageSize", 每页多少条的字段名, 如果条数的字段名不是"pageSize",需要更改,但不能为"length"] String optional
- [field.data] [ 默认: "", 返回的字段的数组在哪个字段, 例如, 返回的数据为 {"result":[]}, 则filed= {data:"result"} , 返回的数据有层级,则使用对象字符串, 例如 {"result":{ data: [] }} 则 filed ] String optional
- [page] [映射的请求的数据页数, 默认:1] Number optional
- [pageSize] [映射的请求每页多少条, 默认:10] Number optional
- [children] [列表的选择器,默认: ".bui-list"] String optional
- [handle] [列表的循环子元素,默认: ".bui-btn"] String optional
- [direction] [1.5.6新增滚动的方向,默认 y || x ;] String optional
- [handleMove] [ 1.6.3 默认 "main" || "head", 下拉的时候一起拖动的位置, 数据量较多建议选择head] String optional
- [stopHandle] [1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候] String optional
- [height] [列表的高度,0 自适应] Number optional
- [cacheHeight] [ 1.6.2新增, 默认 true | false 使用缓存的高度计算,false 则动态获取页面高度计算] Boolean optional
- [urlrule] [1.6.2新增, 默认false | true (替换url的内容) 例如: 网易新闻的url规则 http://url.com/data-(page)-(size).json 替换成 http://url.com/data-1-10.json] Boolean optional
- [relative] [请求的路径是否使用相对模块路径,默认: false(相对项目路径) | true(相对模块路径)] Boolean optional
- [commandRefresh] [刷新的操作,跟jquery操作dom一样, 默认是"html"|"append"|"prepend"|] String optional
- [commandLoad] [加载的操作,跟jquery操作dom一样, 默认是"append"|"prepend"|] String optional
- [needJsonString] [1.4.6新增,默认 false|true. true时会尝试把数据转换为string. 这个主要配合list控件的特殊请求使用,正常都是一个对象, 如果为true,后台一般以@requestBody 接收,postman的body 是raw 的形式] Boolean optional
- autoNext Boolean
  
  [ 默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条 ]
- autoScroll Boolean
  
  [ 默认true 滚动到底部触发, false 自己监听 ]
- autoUpdatePage Boolean
  
  [ 1.5.3 新增, 默认true 自动更新分页, 如果不是,则需要自己手动调用一次 uiList.updatePage()]
- refresh Boolean
  
  [ 允许下拉刷新, 默认true | false ]
- [scroll] [1.5.6新增默认true(允许滚动加载) | false] Boolean optional
- [template] [ 请求到数据以后生成的模板,需要返回html字符串] Function optional
- [onBeforeInit] [ 1.5.1新增初始化前触发] Function optional
- [onInited] [ 1.5.1新增初始化以后触发] Function optional
- [onBeforeRefresh] [ 1.5.2新增, 刷新前执行] Function optional
- [proxy] [1.5.5新增, 内部修改接口为相对路径,值为:代理的二级目录,例如: 接口地址 http://easybui.com/api/getUser?id=123 配置 proxy: "/api" 这样接口请求就变成 api/getUser?id] String optional
- [onRefresh] [ 刷新数据以后的回调] Function optional
- [onBeforeLoad] [ 1.5.2新增, 加载前执行] Function optional
- [onLoad] [ 第1次及加载以及滚动加载以后执行,在数据渲染后] Function optional
- [onFail] [ 失败的回调] Function optional
- [callback] [ 点击每个handle的回调] Function optional
- refreshTips.start String
  
  [ 开始加载的文本提醒,"刷新中.." ]
- refreshTips.release String
  
  [ 下拉的文本提醒,"松开刷新" ]
- refreshTips.end String
  
  [ 下拉高度不足提醒,"下拉刷新" ]
- refreshTips.fail String
  
  [ 下拉加载失败提醒,"点击加载" ]
- refreshTips.success String
  
  [ 成功提醒,"刷新成功" ]
- scrollTips Object
  - start String
    [ 开始加载的文本提醒,"努力加载中.." ]
  - end String
    [ 上拉加载的提醒,"上拉加载更多" ]
  - fail String
    [ 上拉加载失败提醒,"点击重新加载" ]
  - nodata String
    [ 没有数据的提醒,"没有更多内容" ]

Example:

html:

        <div id="scrollList" class="bui-scroll">
                                            <div class="bui-scroll-head"></div>
                                            <div class="bui-scroll-main">
                                                <ul class="bui-list">
                                                </ul>
                                            </div>
                                            <div class="bui-scroll-foot"></div>
                                        </div>

js:

      // 假设: userlist.json 返回的数据格式为: { status:200, list:[] }, 配置 field: {data:"list"}
                                       // 初始化
                                        var uiList = bui.list({
                                            id: "#scrollList",
                                            url: "http://www.easybui.com/demo/json/shop.json",
                                            pageSize:5,
                                            data: {},
                                            // 如果返回的数组字段不在data,通过field重新定义
                                            field: {
                                                page: "page",
                                                size: "pageSize",
                                                data: "data"
                                            },
                                            template: function (data) {
                                                var html = "";
                                                data.map(function(el, index) {
                                                   html +=`<li class="bui-btn bui-box">
                                                        <div class="bui-thumbnail"><img src="${el.image}" alt=""></div>
                                                        <div class="span1">
                                                            <h3 class="item-title">${el.name}</h3>
                                                            <p class="item-text">${el.address}</p>
                                                            <p class="item-text">${el.distance}公里</p>
                                                        </div>
                                                        <span class="price"><i>￥</i>${el.price}</span>
                                                    </li>`
                                                });
                                               return html;
                                            }

Index
Methods
Events

Item Index

Events

Methods

`destroy`

(

[bool] [ 默认: false 销毁部分 | true 销毁全部]

)

Defined in src/scripts/ui/bui.list.js:662

Available since 1.4.2

[销毁控件]

Parameters:

[bool] [ 默认: false 销毁部分 | true 销毁全部] Boolean optional

Example:

       //销毁
                                                   uiList.destroy();

`empty`

(

[bool] [ 默认: false 销毁部分 | true 销毁全部]

)

Defined in src/scripts/ui/bui.list.js:646

Available since 1.4.7

[清空数据]

Parameters:

[bool] [ 默认: false 销毁部分 | true 销毁全部] Boolean optional

Example:

       //清空数据
                                                   uiList.empty();

`init`

(

[option] [参数控件本身]

)

chainable

Defined in src/scripts/ui/bui.list.js:243

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

[option] [参数控件本身] Object optional

`lock`

() chainable

Defined in src/scripts/ui/bui.list.js:573

Available since 1.6.3

不允许滚动加载

Example:

       //uiScroll基于顶部例子
                                                   uiScroll.lock();

`lockrefresh`

() chainable

Defined in src/scripts/ui/bui.list.js:591

Available since 1.6.3

不允许下拉刷新

Example:

       //uiScroll基于顶部例子
                                                   uiScroll.lockrefresh();

`modify`

(

[option] [ 修改参数,跟初始化一样是一个对象.]

)

chainable

Defined in src/scripts/ui/bui.list.js:744

修改多个参数,但不执行初始化

Parameters:

[option] [ 修改参数,跟初始化一样是一个对象.] Object optional

Example:

       //修改多个参数
                                                   uiList.modify( {url:"", data:{"keyword":"关键字"}  );

`option`

(

[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]

)

chainable

Defined in src/scripts/ui/bui.list.js:709

获取设置参数

Parameters:

[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] String | object optional
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传] String | number | boolean | function optional

Example:

       //获取所有参数
                                                   var option = uiList.option();
                                            
                                                   //获取某个参数
                                                   var id = uiList.option( "id" );
                                            
                                                   //修改data参数,只是修改,不初始化. 如果修改多个参数,会自动初始化, 在onLoad 参数里面变成死循环.
                                                   uiList.option( "data",{"keyword":"关键字"} );
                                            
                                                   //修改多个参数
                                                   uiList.option( {"height":200} );

`refresh`

()

Defined in src/scripts/ui/bui.list.js:516

Available since 1.3.0

刷新方法,有动画效果

Example:

       //获取依赖控件
                                                   uiList.refresh();

`reload`

()

Defined in src/scripts/ui/bui.list.js:534

Available since 1.5.4

重新加载,无动画

Example:

       //获取依赖控件
                                                   uiList.reload();

`resize`

(

[option] [ 可以不传]
[option.width] [ 如果不传则自动计算]
[option.height] [ 如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算]

)

chainable

Defined in src/scripts/ui/bui.list.js:764

Available since 1.5.3

重新计算高度

Parameters:

[option] [ 可以不传] Object optional
[option.width] [ 如果不传则自动计算] Number optional
[option.height] [ 如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算] Number optional

Example:

       //重新计算高度
                                                   uiList.resize();

`unlock`

() chainable

Defined in src/scripts/ui/bui.list.js:627

Available since 1.6.3

允许滚动加载

Example:

       //uiScroll基于顶部例子
                                                   uiScroll.unlock();

`unlockrefresh`

() chainable

Defined in src/scripts/ui/bui.list.js:609

Available since 1.6.3

不允许下拉刷新

Example:

       //uiScroll基于顶部例子
                                                   uiScroll.unlockrefresh();

`updatePage`

()

Defined in src/scripts/ui/bui.list.js:483

Available since 1.5.3

更新分页以判断是否最后一页. 一般用于autoUpdatePage:false下使用, 比方数据渲染有延迟,等渲染以后再调用该方法

Example:

       //更新分页
                                                   uiList.updatePage();

`widget`

(

[name] [ 依赖控件名 scroll]

)

Defined in src/scripts/ui/bui.list.js:690

获取依赖的控件

Parameters:

[name] [ 依赖控件名 scroll] String optional

Example:

       //获取依赖控件
                                                   var uiListScroll = uiList.widget("scroll");
                                            
                                                   //使用scroll的方法
                                                   uiListScroll.nextPage();

Events

`off`

Defined in src/scripts/ui/bui.list.js:806

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] [ 事件类型: "refreshbefore"(刷新前触发) | "refresh"(刷新后触发) | "success"(请求成功时触发) | "fail" (请求失败时触发) | "onloadbefore" | "onload"] String optional
[callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

       uiListScroll.off("refresh");

`on`

Defined in src/scripts/ui/bui.list.js:786

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] [ 事件类型: "refreshbefore"(刷新前触发) | "refresh"(刷新后触发) | "success"(请求成功时触发) | "fail" (请求失败时触发) | "onload"] String optional
[callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

       uiList.on("refresh",function () {
                                                       // 点击的菜单
                                                       console.log(this);
                                                   });

BUI

bui.list Class

列表自动分页加载及刷新

预览地址: demo

方法说明:

Constructor

bui.list

Parameters:

Example:

Item Index

Methods

Events

Methods

destroy

Parameters:

Example:

empty

Parameters:

Example:

init

Parameters:

lock

Example:

lockrefresh

Example:

modify

Parameters:

Example:

option

Parameters:

Example:

refresh

Example:

reload

Example:

resize

Parameters:

Example:

unlock

Example:

unlockrefresh

Example:

updatePage

Example:

widget

Parameters:

Example:

Events

off

Event Payload:

Example:

on

Event Payload:

Example:

`bui.list`

`destroy`

`empty`

`init`

`lock`

`lockrefresh`

`modify`

`option`

`refresh`

`reload`

`resize`

`unlock`

`unlockrefresh`

`updatePage`

`widget`

`off`

`on`