dtSelector

概述

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

open

打开 dtSelector 插件

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

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)插件的位置及尺寸
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,   //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w: 320, //(可选项)数字类型;插件的宽度;默认值:所属的 Window 或 Frame 的宽度
    h: 40  //(可选项)数字类型;插件的高度;默认值:40
}

arrowImage:

  • 类型:字符串类型
  • 描述:(可选项)每个选择器右边的箭头图片,要求本地路径(fs://、widget://),支持png,jpg格式的图片
  • 默认:插件内部箭头

arrowSelectImage:

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

itemCount:

  • 类型:数字类型
  • 描述:(可选值)下拉选择器项的数量
  • 默认:2

cover:

  • 类型:布尔
  • 描述:(可选项)下拉的列表是否覆盖在整个选择器的下方
  • 默认:false

datas:

  • 类型:数组
  • 描述:数据源,多层次数据结构,可无限添加层级,设置itemCount层数即可
  • 内部字段:
[{
        tid: '1001',		
        text: '项目1',
        datas: [
        {
            tid: '1011',		// (可选项)字符串类型;
            text: '子项目1-1', // 字符串类型;列表中显示的文本
        }, {
            tid: '1012',
            text: '子项目1-2',
        }]
    }, 
    {
        tid: '1002',
        text: '项目2',
        datas: [{
            tid: '2001',
            text: '子项目2-1',
        }, {
            tid: '2002',
            text: '子项目2-2',
        }]
}]

styles:

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

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:插件依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)是否将插件视图固定到窗口上(不跟随窗口上下滚动),如果被其他视图遮挡,请将此值设置为true
  • 默认:false

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:
  • 内部字段:
{
    status: true,				// 布尔类型,用来判断操作是否成功
    msg: '打开成功',			// 操作结果消息
    index: 0,					// 所点击的选择器索引(open接口返回无此参数)
    selectIndexes: [1, 1], // 选择器操作后,返回的对应索引数组
}

示例代码

var selectView = api.require('dtSelector');
selectView.open({
    rect: {
        x: 0,
        y: 0,
        w: api.frameWidth,
        h: 40
    },
    styles: {
        imgW: 12,
        imgH: 12,
        fontSize: 15,
        corner: 0,
        bgColor: '#fff',
        textColor: '#000',
        selectColor: '#000',
        selectBgColor: '#efeff5',
        shadowColor: 'RGBA(0,0,0,0)'
        cellH: 40,
        cellFontSize: 15,
        cellTextColor: '#000',
        cellMaxShowCount: 5
    },
    datas: [{
        tid: '1001',
        text: '项目1',
        datas: [
        {
            tid: '1011',
            text: '子项目1-1',
        }, {
            tid: '1012',
            text: '子项目1-2',
        }]
    }, 
    {
        tid: '1002',
        text: '项目2',
        datas: [{
            tid: '2001',
            text: '子项目2-1',
        }, {
            tid: '2002',
            text: '子项目2-2',
        }]
    }],
    itemCount: 2, 
    fixedOn: api.frameName,
    fixed: false,
}, function(ret){
    if (ret.selectIndexes) {
        alert(ret.selectIndexes);
    }
});

可用性

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

close

关闭数据列表插件

close()

示例代码

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

可用性

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

show

显示dtSelector插件

show()

示例代码

var selectView = api.require('dtSelector');
selectView.show();

可用性

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

hide

hide()

示例代码

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

可用性

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

reloadDatas

加载新的数据

reloadDatas({params});

params

datas:

  • 类型:数组
  • 描述:数据源,多层次数据结构,可无限添加层级,设置itemCount层数即可
  • 内部字段:
[{
        tid: '1001',		
        text: '项目1',
        datas: [
        {
            tid: '1011',		// (可选项)字符串类型;
            text: '子项目1-1', // 字符串类型;列表中显示的文本
        }, {
            tid: '1012',
            text: '子项目1-2',
        }]
    }, 
    {
        tid: '1002',
        text: '项目2',
        datas: [{
            tid: '2001',
            text: '子项目2-1',
        }, {
            tid: '2002',
            text: '子项目2-2',
        }]
}]

示例代码

var selectView = api.require('dtSelector');
selectView.reloadDatas({
    datas: [{
        tid: '1001',		
        text: '项目1',
        datas: [
        {
            tid: '1011',		// (可选项)字符串类型;
            text: '子项目1-1', // 字符串类型;列表中显示的文本
        }, {
            tid: '1012',
            text: '子项目1-2',
        }]
    }, 
    {
        tid: '1002',
        text: '项目2',
        datas: [{
            tid: '2001',
            text: '子项目2-1',
        }, {
            tid: '2002',
            text: '子项目2-2',
        }]
    }]
});

可用性

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/21