dtSelector

open show reloadDatas

概述

dtSelector 是一个下拉联动选择器，开发者可以自定义选择器的风格及样式。

open

打开 dtSelector 模块

open({params}, callback(ret, err))

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：

arrowImage：

  • 类型：字符串类型
  • 描述：（可选项）每个选择器右边的箭头图片，要求本地路径（fs://、widget://），支持png，jpg格式的图片
  • 默认：模块内部箭头

arrowSelectImage：

  • 类型：字符串类型
  • 描述：（可选项）每个选择器右边的箭头被选中的图片，需对arrowImage设置后才有效，要求本地路径（fs://、widget://），支持png，jpg格式的图片
  • 默认：模块内部箭头

itemCount：

  • 类型：数字类型
  • 描述：（可选值）下拉选择器项的数量
  • 默认：2
  • 类型：布尔
  • 描述：（可选项）下拉的列表是否覆盖在整个选择器的下方
  • 默认：false

datas:

  • 类型：数组
  • 描述：数据源，多层次数据结构，可无限添加层级，设置itemCount层数即可
  • 内部字段：
  2.         tid: '1001',        
  3.         text: '项目1',
  4.         datas: [
  5.         {
  6.             tid: '1011',        // （可选项）字符串类型；
  7.             text: '子项目1-1', // 字符串类型；列表中显示的文本
  8.         }, {
  9.             tid: '1012',
  10.             text: '子项目1-2',
  11.         }]
  12.     }, 
  13.     {
  14.         tid: '1002',
  15.         text: '项目2',
  16.         datas: [{
  17.             tid: '2001',
  18.             text: '子项目2-1',
  19.         }, {
  20.             text: '子项目2-2',
  21.         }]
  22. }]

styles：

  • 类型：JSON对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     imgW: 12,                         //（可选项)数字类型；箭头宽；默认：12
  3.     imgH: 12,                            //（可选项)数字类型；箭头高；默认：12
  4.     fontSize: 15,                        // (可选项)数字类型；选择器中字体大小；默认：15
  5.     corner: 0,                        // (可选项)数字类型；选择器圆角；默认：0
  6.     bgColor: '#fff',                    // (可选项)字符串类型；选择器背景色；默认：#fff
  7.     textColor: '#000',                // (可选项)字符串类型；选择器字体色；默认：#000
  9.     selectColor: '#000',            // (可选项)字符串类型；列表选择的字体色；默认：#000
  10.     selectBgColor: '#efeff5',        // (可选项)字符串类型；列表选择的背景色，必须设置selectColor方可生效；默认：#efeff5
  11.     shadowColor: 'RGBA(0,0,0,0.3)',     // (可选项)字符串类型；遮罩层背景色，默认：RGBA(0,0,0,0.3)
  12.     cellH: 40,                        // (可选项)数字类型；列表cell的高度；默认：40
  13.     cellFontSize: 15,                // (可选项)数字类型；列表cell的字体大小；默认：15
  14.     cellMaxShowCount: 5,            // (可选项)数字类型；列表最大显示的行数，超过需拖动显示；默认：5
  15.     cellTextColor: '#000',            // (可选项)字符串类型；列表cell文字颜色；默认：#000
  16. }

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）是否将模块视图固定到窗口上（不跟随窗口上下滚动），如果被其他视图遮挡，请将此值设置为true
  • 默认：false

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：
  • 内部字段：

示例代码

  1. var selectView = api.require('dtSelector');
  3.     rect: {
  4.         x: 0,
  5.         y: 0,
  6.         w: api.frameWidth,
  7.         h: 40
  8.     },
  9.     styles: {
  10.         imgW: 12,
  11.         imgH: 12,
  12.         fontSize: 15,
  13.         corner: 0,
  14.         bgColor: '#fff',
  15.         textColor: '#000',
  16.         selectColor: '#000',
  17.         selectBgColor: '#efeff5',
  18.         shadowColor: 'RGBA(0,0,0,0)'
  19.         cellH: 40,
  20.         cellFontSize: 15,
  21.         cellTextColor: '#000',
  22.         cellMaxShowCount: 5
  23.     },
  24.     datas: [{
  25.         tid: '1001',
  26.         datas: [
  27.         {
  28.             tid: '1011',
  29.             text: '子项目1-1',
  30.         }, {
  31.             tid: '1012',
  32.             text: '子项目1-2',
  33.         }]
  34.     }, 
  35.     {
  36.         tid: '1002',
  37.         text: '项目2',
  38.         datas: [{
  39.             tid: '2001',
  40.             text: '子项目2-1',
  42.             tid: '2002',
  43.             text: '子项目2-2',
  44.         }]
  45.     }],
  46.     itemCount: 2, 
  47.     fixedOn: api.frameName,
  48.     fixed: false,
  49. }, function(ret){
  50.     if (ret.selectIndexes) {
  51.         alert(ret.selectIndexes);
  52.     }
  53. });

可用性

iOS系统 可提供的1.0.0及更高版本

close

关闭数据列表模块

close()

  1. var selectView = api.require('dtSelector');
  2. selectView.close();

可用性

show

显示dtSelector模块

show()

示例代码

可用性

iOS系统 可提供的1.0.0及更高版本

hide

hide()

  1. var selectView = api.require('dtSelector');
  2. selectView.hide();

可用性

iOS系统 可提供的1.0.0及更高版本

reloadDatas

加载新的数据

reloadDatas({params});

params

datas:

  • 类型：数组
  • 描述：数据源，多层次数据结构，可无限添加层级，设置itemCount层数即可
  • 内部字段：
  1. [{
  2.         tid: '1001',        
  3.         text: '项目1',
  4.         datas: [
  5.         {
  6.             tid: '1011',        // （可选项）字符串类型；
  7.             text: '子项目1-1', // 字符串类型；列表中显示的文本
  8.         }, {
  9.             tid: '1012',
  10.             text: '子项目1-2',
  11.         }]
  12.     }, 
  13.     {
  14.         tid: '1002',
  15.         text: '项目2',
  16.         datas: [{
  17.             tid: '2001',
  18.             text: '子项目2-1',
  19.         }, {
  20.             tid: '2002',
  21.             text: '子项目2-2',
  22. }]

示例代码