UILinkedPicker

来自于：官方立即使用

open set close hide show

概述

UILinkedPicker 是自定义分级联动选择器模块，支持自定义选择器的大小、位置、内容及其级别（android暂仅最大支持3级）和数据源，可手动设置指定选中项，用于实现固定取值范围的内容选择器，多项内容之间有级联关系；本模块和 UISelector 模块相似，与之相比数据源格式不同，本模块几点信息数据支持自定义

UILinkedPicker - 图1

open

打开选择器

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

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320, //（可选项）数字类型；模块的宽度；默认：所属的 Window 或 Frame 的宽度
  5.     h: 480  //（可选项）数字类型；模块的高度；默认：w
  6. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     bg: 'rgba(0,0,0,0)',     //（可选项）字符串类型；模块背景，支持 rgb、rgba、#，图片路径（本地路径，fs://、widget://）；默认：'rgba(0,0,0,0)'
  3.     text:{                   //（可选项）JSON对象；字体样式；默认值见内部字段
  4.        size: 22,             //（可选项）数字类型；字体大小；默认值：22
  5.        selected: '#fff',     //（可选项）字符串类型；选中字体色，支持 rgb、rgba、#；默认#fff
  6.        normal: '#000'        //（可选项）字符串类型；常态字体色；支持 rgb、rgba、#；默认#000
  7.     },
  8.     item:{                   //（可选项）JSON对象；item 样式；默认值见内部字段
  9.       w: 80,                 //（可选项）数字类型；背景视图的宽；默认值：单元格宽-20
  10.       h: 45,                 //（可选项）数字类型；背景视图的高；默认值：单元格高-20
  11.       normal: '#87ceeb',     //（可选项）字符串类型；常态背景色，支持 rgb、rgba、#；默认值：#87ceeb
  12.       selected: '#218868',   //（可选项）字符串类型；选中后的背景色，支持 rgb、rgba、#；默认值：#218868
  13.       zoomIn: 1.2            //（可选项）数字类型；选中后放大倍数，；默认值：1.2
  14.     }
  15. }

data：

  • 类型：数组对象/字符串
  • 描述：选择器的数据源，若为字符串，则表示 json 文件的路径(支持 widget://、fs:// 协议)，文件格式同下文内部字段
  • 内部字段：
  1. [{
  2.       value:           //JSON对象；结点信息，本数据字段内容可自定义，自定义的结点信息数据会在选中后返回给前端
  3.       children:        //数组类型；结点子级目录的信息组成的数组，类型为 JSON 对象。若该对象内包含 children 字段数据，则表示该结点有子级目录；
  5. }]
  6.                     //举例如下：
  7.                     //一级选择器：[{
  8.                       'value':{
  9.                         'id':1,
  10.                         'name':'A'
  11.                       }
  12.                     },{
  13.                       'value':{
  14.                         'id':2,
  15.                         'name':'B'
  16.                       }
  17.                     },{
  18.                       'value':{
  19.                         'id':3,
  20.                         'name':'C'
  21.                       }
  22.                     },{
  23.                       'value':{
  24.                         'id':4,
  25.                         'name':'D'
  26.                       }
  27.                     }]
  28.                     //二级选择器： [{
  29.                       'value':{
  30.                         'id':10,
  31.                         'name':'A'
  32.                       },
  33.                       'children':[{
  34.                           'value':{
  35.                             'id':11,
  36.                             'name':'10'
  37.                           }
  38.                         },{
  39.                           'value':{
  40.                             'id':12,
  41.                             'name':'11'
  42.                           }
  43.                         },{
  44.                           'value':{
  45.                             'id':13,
  46.                             'name':'12'
  47.                           }
  48.                         },{
  49.                           'value':{
  50.                             'id':14,
  51.                             'name':'13'
  52.                           }
  53.                         }]
  54.                     },{
  55.                       'value':{
  56.                         'id':20,
  57.                         'name':'B'
  58.                       },
  59.                       'children':[{
  60.                           'value':{
  61.                             'id':21,
  62.                             'name':'20'
  63.                           }
  64.                         },{
  65.                           'value':{
  66.                             'id':22,
  67.                             'name':'21'
  68.                           }
  69.                         },{
  70.                           'value':{
  71.                             'id':23,
  72.                             'name':'22'
  73.                           }
  74.                         },{
  75.                           'value':{
  76.                             'id':24,
  77.                             'name':'23'
  78.                           }
  79.                         }]
  80.                     },{
  81.                       'value':{
  82.                         'id':30,
  83.                         'name':'C'
  84.                       },
  85.                       'children':[{
  86.                           'value':{
  87.                             'id':31,
  88.                             'name':'30'
  89.                           }
  90.                         },{
  91.                           'value':{
  92.                             'id':32,
  93.                             'name':'31'
  94.                           }
  95.                         },{
  96.                           'value':{
  97.                             'id':33,
  98.                             'name':'32'
  99.                           }
  100.                         },{
  101.                           'value':{
  102.                             'id':34,
  103.                             'name':'33'
  104.                           }
  105.                         }]
  106.                     },{
  107.                       'value':{
  108.                         'id':40,
  109.                         'name':'D'
  110.                       },
  111.                       'children':[{
  112.                           'value':{
  113.                             'id':41,
  114.                             'name':'40'
  115.                           }
  116.                         },{
  117.                           'value':{
  118.                             'id':42,
  119.                             'name':'41'
  120.                           }
  121.                         },{
  122.                           'value':{
  123.                             'id':43,
  124.                             'name':'42'
  125.                           }
  126.                         },{
  127.                           'value':{
  128.                             'id':44,
  129.                             'name':'43'
  130.                           }
  131.                         }]
  132.                     }]
  133.                     //三级选择器：  [{
  134.                       'value':{
  135.                         'id':10,
  136.                         'name':'A'
  137.                       },
  138.                       'children':[{
  139.                           'value':{
  140.                             'id':11,
  141.                             'name':'10'
  142.                           },
  143.                           'children':[{
  144.                                  'value':{
  145.                                     'id':111,
  146.                                     'name':'301'
  147.                                  }
  148.                               },{
  149.                                  'value':{
  150.                                     'id':112,
  151.                                     'name':'302'
  152.                                  }
  153.                            }]
  154.                         },{
  155.                           'value':{
  156.                             'id':12,
  157.                             'name':'11'
  158.                           },
  159.                           'children':[{
  160.                                  'value':{
  161.                                     'id':211,
  162.                                     'name':'303'
  163.                                  }
  164.                               },{
  165.                                  'value':{
  166.                                     'id':212,
  167.                                     'name':'304'
  168.                                  }
  169.                            }]
  170.                         },{
  171.                           'value':{
  172.                             'id':13,
  173.                             'name':'12'
  174.                           },
  175.                           'children':[{
  176.                                  'value':{
  177.                                     'id':311,
  178.                                     'name':'331'
  179.                                  }
  180.                               },{
  181.                                  'value':{
  182.                                     'id':312,
  183.                                     'name':'332'
  184.                                  }
  185.                            }]
  186.                         },{
  187.                           'value':{
  188.                             'id':14,
  189.                             'name':'13'
  190.                           },
  191.                           'children':[{
  192.                                  'value':{
  193.                                     'id':411,
  194.                                     'name':'341'
  195.                                  }
  196.                               },{
  197.                                  'value':{
  198.                                     'id':412,
  199.                                     'name':'342'
  200.                                  }
  201.                            }]
  202.                         }]
  203.                     },{
  204.                       'value':{
  205.                         'id':20,
  206.                         'name':'B'
  207.                       },
  208.                       'children':[{
  209.                           'value':{
  210.                             'id':21,
  211.                             'name':'20'
  212.                           },
  213.                           'children':[{
  214.                                  'value':{
  215.                                     'id':213,
  216.                                     'name':'213'
  217.                                  }
  218.                               },{
  219.                                  'value':{
  220.                                     'id':214,
  221.                                     'name':'214'
  222.                                  }
  223.                            }]
  224.                         },{
  225.                           'value':{
  226.                             'id':22,
  227.                             'name':'21'
  228.                           },
  229.                           'children':[{
  230.                                  'value':{
  231.                                     'id':221,
  232.                                     'name':'221'
  233.                                  }
  234.                               },{
  235.                                  'value':{
  236.                                     'id':222,
  237.                                     'name':'222'
  238.                                  }
  239.                            }]
  240.                         },{
  241.                           'value':{
  242.                             'id':23,
  243.                             'name':'22'
  244.                           },
  245.                           'children':[{
  246.                                  'value':{
  247.                                     'id':231,
  248.                                     'name':'231'
  249.                                  }
  250.                               },{
  251.                                  'value':{
  252.                                     'id':232,
  253.                                     'name':'232'
  254.                                  }
  255.                            }]
  256.                         },{
  257.                           'value':{
  258.                             'id':24,
  259.                             'name':'23'
  260.                           },
  261.                           'children':[{
  262.                                  'value':{
  263.                                     'id':241,
  264.                                     'name':'241'
  265.                                  }
  266.                               },{
  267.                                  'value':{
  268.                                     'id':242,
  269.                                     'name':'242'
  270.                                  }
  271.                            }]
  272.                         }]
  273.                     },{
  274.                       'value':{
  275.                         'id':30,
  276.                         'name':'C'
  277.                       },
  278.                       'children':[{
  279.                           'value':{
  280.                             'id':31,
  281.                             'name':'30'
  282.                           },
  283.                           'children':[{
  284.                                  'value':{
  285.                                     'id':311,
  286.                                     'name':'311'
  287.                                  }
  288.                               },{
  289.                                  'value':{
  290.                                     'id':312,
  291.                                     'name':'312'
  292.                                  }
  293.                            }]
  294.                         },{
  295.                           'value':{
  296.                             'id':32,
  297.                             'name':'31'
  298.                           },
  299.                           'children':[{
  300.                                  'value':{
  301.                                     'id':321,
  302.                                     'name':'321'
  303.                                  }
  304.                               },{
  305.                                  'value':{
  306.                                     'id':322,
  307.                                     'name':'322'
  308.                                  }
  309.                            }]
  310.                         },{
  311.                           'value':{
  312.                             'id':33,
  313.                             'name':'32'
  314.                           },
  315.                           'children':[{
  316.                                  'value':{
  317.                                     'id':331,
  318.                                     'name':'331'
  319.                                  }
  320.                               },{
  321.                                  'value':{
  322.                                     'id':331,
  323.                                     'name':'332'
  324.                                  }
  325.                            }]
  326.                         },{
  327.                           'value':{
  328.                             'id':34,
  329.                             'name':'33'
  330.                           },
  331.                           'children':[{
  332.                                  'value':{
  333.                                     'id':341,
  334.                                     'name':'341'
  335.                                  }
  336.                               },{
  337.                                  'value':{
  338.                                     'id':342,
  339.                                     'name':'342'
  340.                                  }
  341.                            }]
  342.                         }]
  343.                     },{
  344.                       'value':{
  345.                         'id':40,
  346.                         'name':'D'
  347.                       },
  348.                       'children':[{
  349.                           'value':{
  350.                             'id':41,
  351.                             'name':'40'
  352.                           },
  353.                           'children':[{
  354.                                  'value':{
  355.                                     'id':411,
  356.                                     'name':'411'
  357.                                  }
  358.                               },{
  359.                                  'value':{
  360.                                     'id':412,
  361.                                     'name':'412'
  362.                                  }
  363.                            }]
  364.                         },{
  365.                           'value':{
  366.                             'id':42,
  367.                             'name':'41'
  368.                           },
  369.                           'children':[{
  370.                                  'value':{
  371.                                     'id':421,
  372.                                     'name':'421'
  373.                                  }
  374.                               },{
  375.                                  'value':{
  376.                                     'id':422,
  377.                                     'name':'422'
  378.                                  }
  379.                            }]
  380.                         },{
  381.                           'value':{
  382.                             'id':43,
  383.                             'name':'42'
  384.                           },
  385.                           'children':[{
  386.                                  'value':{
  387.                                     'id':431,
  388.                                     'name':'431'
  389.                                  }
  390.                               },{
  391.                                  'value':{
  392.                                     'id':432,
  393.                                     'name':'432'
  394.                                  }
  395.                            }]
  396.                         },{
  397.                           'value':{
  398.                             'id':44,
  399.                             'name':'43'
  400.                           },
  401.                           'children':[{
  402.                                  'value':{
  403.                                     'id':441,
  404.                                     'name':'441'
  405.                                  }
  406.                               },{
  407.                                  'value':{
  408.                                     'id':442,
  409.                                     'name':'442'
  410.                                  }
  411.                            }]
  412.                         }]
  413.                     }]

rows：

  • 类型：数字
  • 描述：（可选项）滚动内容时可见的内容行数，只接受大于1的奇整数。
  • 默认值：5

indexs：

  • 类型：数组
  • 描述：（可选项）各列默认选中项 item 的下标(不可超过本列 item 总数)组成的数组
  • 默认值：[0,0…] //数组个数和级数对应

bounce：

  • 类型：布尔
  • 描述：（可选项）列表滑动到头是否弹动
  • 默认值：true

fixedOn：

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

fixed:

  • 类型：布尔
  • 描述：（可选项）模块是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.    eventType:'show',               //字符串类型；交互事件的类型；
  3.                                    //取值范围：
  4.                                    //show（模块打开成功）
  5.                                    //selected（选择器选中内容）
  6.    selects:[{                      //数组类型；从各级目录选取的内容信息组成的数组，若选择器是自定义的二级选择器，则本数组包含两个元素，若选择器是自定义的三级选择器，则此数组包含三个元素
  7.        index: 1,                   //数字类型；选取的数据在所在数组内的索引
  8.        value: {'id':1,'name':'北京'}//JSON对象；可自定义的结点的信息
  9.    }]
  10. }

示例代码

  1. var UILinkedPicker = api.require('UILinkedPicker');
  2. UILinkedPicker.open({
  3.     rect: {
  4.         x: 30,
  5.         y: api.frameHeight / 2 - 170,
  6.         w: api.frameWidth - 60,
  7.         h: 340
  8.     },
  9.     styles: {
  10.         bg: 'rgba(0,0,0,0)',
  11.         text: {
  12.             size: 14,
  13.             selected: '#fff',
  14.             normal: '#000'
  15.         },
  16.         item: {
  17.             w: 80,
  18.             h: 45,
  19.             normal: '#87ceeb',
  20.             selected: '#218868',
  21.             zoomIn: 1.2
  22.         }
  23.     },
  24.     rows: 5,
  25.     indexs: [1, 2, 3],
  26.     bounce: false,
  27.     fixedOn: api.frameName,
  28.     fixed: false,
  29.     data: [{
  30.         'value': {
  31.             'id': 1,
  32.             'name': 'A'
  33.         }
  34.     }, {
  35.         'value': {
  36.             'id': 2,
  37.             'name': 'B'
  38.         }
  39.     }, {
  40.         'value': {
  41.             'id': 3,
  42.             'name': 'C'
  43.         }
  44.     }, {
  45.         'value': {
  46.             'id': 4,
  47.             'name': 'D'
  48.         }
  49.     }, {
  50.         'value': {
  51.             'id': 5,
  52.             'name': 'E'
  53.         }
  54.     }, {
  55.         'value': {
  56.             'id': 6,
  57.             'name': 'F'
  58.         }
  59.     }, {
  60.         'value': {
  61.             'id': 7,
  62.             'name': 'G'
  63.         }
  64.     }, {
  65.         'value': {
  66.             'id': 8,
  67.             'name': 'H'
  68.         }
  69.     }, {
  70.         'value': {
  71.             'id': 9,
  72.             'name': 'I'
  73.         }
  74.     }, {
  75.         'value': {
  76.             'id': 10,
  77.             'name': 'J'
  78.         }
  79.     }]
  80. }, function(ret, err) {
  81.     if (ret) {
  82.         alert(JSON.stringify(ret));
  83.     } else {
  84.         alert(JSON.stringify(err));
  85.     }
  86. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

set

设置选择器的选中项

set({params})

params

indexs：

  • 类型：数组
  • 描述：（可选项）各列默认选中项 item 的下标(不可超过本列 item 总数)组成的数组
  • 默认值：[0,0…]//数组个数和级数对应

示例代码

  1. var UILinkedPicker = api.require('UILinkedPicker');
  2. UILinkedPicker.set({
  3.     indexs: [2, 3, 6]
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭选择器

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏选择器

hide()

示例代码

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

补充说明

隐藏选择器，并没有从内存里清除

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的选择器

show()

示例代码

  1. var UILinkedPicker = api.require('UILinkedPicker');
  2. UILinkedPicker.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本