cmp.tableList 类

上下左右联动滚动容器组件
类似于excel的布局风格，滚动内容区域时：左右滚动时，左边的行列表不会滚动头部导航栏可以滚动；上下滚动时，头部导航栏不滚动，左边行列表滚动，目前提供两组风格，开发者可自行配置

  • 纯列表展示（左边行列表是数字）
  • 可选进行选择的数据展示（左边行列表有选择框）

定义于: doc\doc\cmp_doc_all\cmp-listview-doc.js:82
模块: listview

构造函数

cmp.tableList

cmp.tableList
(
  • container
  • options
)

定义于 doc\doc\cmp_doc_all\cmp-listview-doc.js:82

参数:

名称类型标识描述
container String 必选

列表容器标识，querySelector能定位的css选择器均可，比如：id、.class等,如："#id"、".class"(必须符合以上两种形式的查询)

options Object 必选

配置参数

名称类型标识描述
fields Object 必选

用于头部导航栏显示的显示内容，格式如：
{"key1":"计划表","key2":"姓名"}
key:代表的是对应列数据关键字，key的值代表的是对应导航栏展示的文字

type Number 必选

列表数据是否是可选择的

  • 1:默认不可选择(数字排序)
  • 2，可进行选择的

radio Boolean 必选

是否只能进行单选 true 只能单选，false进行多选(默认：false)

params Object 必选

上拉下拉刷新请求函数需要的参数,格式：{ticket: "luodx"}

[pageSize] Number 可选

分页数，默认20

[theme] String 可选

主题颜色，默认#449aba

[captionType] Number 可选

下拉上拉控件显示类型

  • 0:不显示条数，只显示文字
  • 1:显示条数和文字（默认）

[purpose] Number 可选

列表用作的方式，应用场景当首次请求无数据时，以一个开发者自定义的html来展示.

  • 1：普通内容展示；
  • 2：搜索内容展示
  • 以后进行扩展
  • -1:开发者自己渲染无数据的页面，还是要走开发者定义的渲染方法，只是返回的数据为空

dataFunc Function 必选

上拉下拉刷新请求数据的函数

[multiLevel] Boolean 可选

是否是多级查看
true 会出现一个向右的按钮，可进行到下一级的回调函数，false：不会出现向右的按钮

[multiLevelCallback] Boolean 可选

如果可进行下一级查看 进入下一级的回调函数

[down] Object 可选

下拉控件的文字、数据数量配置

名称类型标识描述
[contentdown] String 可选
在下拉可刷新状态时，下拉刷新控件上显示的标题内容（默认："下拉可以刷新"）
[contentover] String 可选
在释放可刷新状态时，下拉刷新控件上显示的标题内容（默认："释放立即刷新"）
[contentrefresh] String 可选
正在刷新状态时，下拉刷新控件上显示的标题内容（默认："正在刷新..."）
[contentprepage] String 可选
请求数据条数超过一屏了，需要显示【上一页】的文字
[up] Object 可选

上拉控件的文字、数据数量配置

名称类型标识描述
[contentdown] String 可选
在上拉可刷新状态时，上拉刷新控件上显示的标题内容（默认："上拉显示更多"）
[contentrefresh] String 可选
正在加载状态时，上拉加载控件上显示的标题内容（默认："正在加载..."）
[contentnomore] String 可选
请求完毕若没有更多数据时显示的提醒内容（默认："没有更多数据了"）
[contentnextpage] String 可选
请求数据条数满一屏了，需要显示【下一页】的文字
[callback] Function 可选

点击列表数据回调函

示例:

    <script>
        cmp.ready(function(){
            var linkContainer = document.getElementById("linkContainer");
            linkContainer.style.height = (window.innerHeight - document.getElementsByTagName("header")[0].offsetHeight)+"px";
            linkContainer.style.height = "430px";  //设置列表容器高度
            cmp.tableList("#linkContainer",{
                fields:{
                    "0":"产品线",
                    "1":"版本号",
                    "2":"功能模块",
                    "3":"紧急程度",
                    "4":"流水号"
                },//表头数据格式（必须）
                down:{
                    contentdown: '下拉可以刷新',//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: '释放立即刷新',//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: '正在刷新...'//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                },
                up:{
                    contentdown: '加载更多',//可选，在上拉可刷新状态时，上拉刷新控件上显示的标题内容
                    contentrefresh: '正在加载...',//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有了'//可选，请求完毕若没有更多数据时显示的提醒内容；
                },
                dataFunc:dataFunc, //配置加载数据的方法
                callback:function(result){
                    console.log(result);
                }
            })
        });
        function dataFunc(param, options){ //获取数据的方法
            cmp.ajax({
                url:"../../data/widget/cmp-listview-tableList.json", //数据格式请参照该json数据格式
                type : "GET",
                native:false,
                success:function(result){ //获取数据成功
                    var success = options.success; //将options中的success取出来（该success是组件内部的方法）
                    result.total = 20; //需要设置数据总条数
                    success(result);//执行组件内部的success方法
                },
                error:function(error){
                    var error = options.error;//将options中的erro取出来（该error是组件内部的方法）
                    error();//执行组件内部的error方法
                }
            });
        }
    </script>
<script>
    //数据格式
    {
        "fields":{
        "0":"产品线",
                "1":"版本号",
                "2":"功能模块",
                "3":"紧急程度",
                "4":"流水号"
    },
        "data":[
        {"0":"12234112234112234112241122","1":"3.50sp1","2":"协同办公","3":"紧急","4":"33333","lock":true},
        {"0":"4234234","1":"3.qwe","2":"文化建设","3":"紧急","4":"33333"},
        {"0":"爱迪生","1":"斯蒂芬","2":"啊实打实","3":"紧急","4":"33333"},
        {"0":"4324","1":"是飒飒","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"12234112234112234112241122","1":"3.50sp1","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"4234234","1":"3.qwe","2":"文化建设","3":"紧急","4":"33333"},
        {"0":"爱迪生","1":"斯蒂芬","2":"啊实打实","3":"紧急","4":"33333"},
        {"0":"4324","1":"是飒飒","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"12234112234112234112241122","1":"3.50sp1","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"4234234","1":"3.qwe","2":"文化建设","3":"紧急","4":"33333"},
        {"0":"爱迪生","1":"斯蒂芬","2":"啊实打实","3":"紧急","4":"33333"},
        {"0":"4324","1":"是飒飒","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"12234112234112234112241122","1":"3.50sp1","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"4234234","1":"3.qwe","2":"文化建设","3":"紧急","4":"33333"},
        {"0":"爱迪生","1":"斯蒂芬","2":"啊实打实","3":"紧急","4":"33333"},
        {"0":"4324","1":"是飒飒","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"12234112234112234112241122","1":"3.50sp1","2":"协同办公","3":"紧急","4":"33333"},
        {"0":"4234234","1":"3.qwe","2":"文化建设","3":"紧急","4":"33333"},
        {"0":"爱迪生","1":"斯蒂芬","2":"啊实打实","3":"紧急","4":"33333"},
        {"0":"4324","1":"是飒飒","2":"协同办公","3":"紧急","4":"33333"}
    ]
    }
</script>
Top