silver-cascade-selector

cascade-selector

cascade-selector

Features

• 功能：

  • 多级联动选择某个对象，例如：

    • 在多个频道有多个节目的情况下，选择相应的频道和节目
    • 省市区的选择

  • 支持任意级扩展

• 样式示例：

demo

• chrome 下采用移动端模式查看，设置分辨率为1920*1080

http://g.alicdn.com/silvermine/cascade-selector/1.0.0/demo/index.html

Installation

• npm install silver-cascade-selector

Usage

• script 标签引入
  • <script src="//g.alicdn.com/silvermine/cascade-selector/{version}/index.min.js"></script>
• import or require
  • 首先，npm install silver-cascade-selector
  • import Selector from 'silver-cascade-selector' 或者
    const Selector = require('silver-cascade-selector)

API

• new window.tvcnpt.CascadeSelector(opt) or new Selector(opt)

  example:

    /**
    * constructor 组件构造函数
    * @memberOf CascadeSelector.prototype
    * @method constructor
    * @param opt {Object} 组件配置参数
    *   @param {Object} opt.config  组件配置
    *       @param {Dom}       opt.config.container      组件所在的容器
    *       @param {Array}     opt.config.setContents    数组中为每列元素的html片段字符串
    *       @param {boolean}   opt.config.hasDetail      是否有最后一列‘查看详情’
    *       @param {Function}  [opt.config.getRowIndex]  获取某一列的行index，参数（data, col）
    *       @param {Boolean}   opt.config.animation      是否要动画效果
    *   @param {Object} opt.data       渲染所需数据 
    *   @param {Array}  [opt.indexArr] 每一列默认focus在哪一行(不传根据getRowIndex获取在哪一行)
    *   @param {Array}  opt.nameArr    下一级数据的字段名字数组
    */
    	
    let opt = {};
    let container = document.querySelector('.page-wrapper');
    let data = channelData.data;
    let nameArr = ['channelList', 'itemList'];
    
    // 设置每一列中展示的内容
    let setContents = [],
        setContent0 = function (data) {
          return '' + data.channelName;
        },
        setContent1 = function (data) {
          return '' + data.itemName;
        },
        setContent2 = function (data) {
          return '详情';
        };
  
    // 获取某一列focus所在的行
    let getRowIndex = function (data, col) {
      switch (col) {
        case 0:
          return 0;
        case 1:
          return 3;
        case 2:
          return 0;
        default:
          return 0;
      }
    }
  
    setContents.push(setContent0);
    setContents.push(setContent1);
    setContents.push(setContent2);
  
    let selectorConfig = {
      container: container,
      setContents: setContents,
      getRowIndex: getRowIndex,
      hasDetail: true,
      animation: true
    };
  
    opt.config = selectorConfig;
    opt.nameArr = nameArr;
    opt.data = data;
    //opt.indexArr = [1, 2]; // 初始状态下每列的focus所在的行, 不传将根据getRowIndex函数计算得到
  
    const selector = new Selector(opt);
  

  • 注：渲染所需的数据结构

      {
      	"channeList" : [
      		{
      			"itemList": [
      				{
      					"itemName" : "快乐星球"
      				},
      				{
      					...
      				},
      				{
      					...
      				}
      			] 
      		},
      		{
      			...
      		},
      		{
      			...
      		},
      		...
      	]
      }		
    

• on(event, callback)
  注册回调事件, 可注册事件包括

  • 'ok'
  • 'selectIndexChange'
  • 'blur'
  • 'hide'

  回调函数中的参数 e 包括:

  • e.data 当前节点的数据
  • e.node 当前的节点

  example

    const onok = function(e) {
      console.log(e.data);
      console.log(e.node);
    } 
  
    this.selector.on('ok', onok);
  
    this.selector.on('selectIndexChange', e => {
      console.log('------cascade selectIndexChange------', e.node);
    });
  
    this.selector.on('hide', e => {
      console.log('--------cascade selector hide--------');
    })
  
    this.selector.on('blur', e => {
      console.log('---------cascade node blur------');
    })
  

• un(event, callback)
  注销回调事件，和注册回调事件对应

  example:

    selector.un('ok', onok);
  

• show([index])
  显示组件，参数index可选，表示组件第一列focus所在的行

  example:

    selector.show(2);
  

• hide()
  隐藏组件

  example:

    selector.hide();
  

• destroy()
  销毁组件

  example:

    selector.destroy();
  

• reRender([indexArr][,data] )
  重新渲染组件，传入每列需要foucs在那一行的数组, 以及渲染数据，这两个参数都是可选

  example:

    selector.reRender([2]);
  

• getCurFocusNode()
  获取当前foucs在的节点

  example:

    let node = selector.getCurFocusNode();
    console.log('current focus node: ', node);
  

• getName()
  获取组件名

  example:

    let name = selector.getName();
  

• 详细api文档可访问jsdoc api 列表：
  http://g.alicdn.com/silvermine/cascade-selector/1.0.0/doc/CascadeSelector.html

Tests

• see demo folder