silver-cascade-selector v1.0.1

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 )
  重新渲染组件，传入每列需要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