cmp.tableList 类
上下左右联动滚动容器组件
类似于excel的布局风格，滚动内容区域时：左右滚动时，左边的行列表不会滚动头部导航栏可以滚动；上下滚动时，头部导航栏不滚动，左边行列表滚动，目前提供两组风格，开发者可自行配置
- 纯列表展示（左边行列表是数字）
- 可选进行选择的数据展示（左边行列表有选择框）
构造函数
cmp.tableList
cmp.tableList
(
-
container
-
options
)
Object
参数:
| 名称 | 类型 | 标识 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
container
| String | 必选 | 列表容器标识，querySelector能定位的css选择器均可，比如：id、.class等,如："#id"、".class"(必须符合以上两种形式的查询) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
options
| Object | 必选 | 配置参数
|
返回值:
[Object]
返回tableList对象
对象提供的方法
- 如果设置的是可选择类型的：则提供 getChoosedData方法，返回被选中的数据
var tableList = cmp.tableList("linkContainer",....);
var choosedData = tableList.getChoosedData();
示例:
<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":"流水号"
},//表头数据格式（必须）
theme:{
headerStyle:"background:#728197;color:#ececed;font-size:20px;font-weight:bolder;",//列表头部样式，以css字符串的形式
sidebarStyle:"background:#ffffff;color:#bcbec1;",//侧边栏样式，以css字符串的形式
rowClass:"table-content-list-default"//列表class类，由开发者自己定义，一般是定义的错峰显示的不同底色的类
},//主题颜色包含了头部，索引列，行间错峰颜色,每一对数组值代表了|前面是背景色，后面是字体样式
headerH:32,//头部高度
sidebarW:50,//索引列的宽度
rowH:41,//数据列表行高
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>