Amaze UI

Cascader

通常用于一组不同层级数据的筛选

基础用法

Copy
<div id="am-cascader"></div>
<script type="text/javascript">
$(function(){
  $('#am-cascader').cascader({
    data: [{
      value: 'beijing',
      label: '北京',
      children: [{
        value: 'haidian',
        label: '海淀',
        children: [{
          value: 'zgc',
          label: '中关村'
        }]
      },{
        value: 'chaoyang',
        label: '朝阳',
        children: [{
          value: 'aoti',
          label: '奥体'
        }]
      }]
    }, {
      value: 'sichuan',
      label: '四川',
      children: [{
        value: 'chengdu',
        label: '成都',
        children: [{
          value: 'cxl',
          label: '春熙路',
        }]
      },{
        value: 'mianyang',
        label: '绵阳'
      }],
    }],
  })
})
</script>

使用树数据结构,

  • value - 表示选项值
  • label - 表示显示值
  • children - 表示子级

在线运行

默认选项

使用参数 defaultValue 设置默认选中项

Copy
<div id="am-cascader-value"></div>
<script type="text/javascript">
$(function(){
  $('#am-cascader-value').cascader({
    data: [{
      value: 'beijing',
      label: '北京',
      children: [{
        value: 'haidian',
        label: '海淀',
        children: [{
          value: 'zgc',
          label: '中关村'
        }]
      },{
        value: 'chaoyang',
        label: '朝阳',
        children: [{
          value: 'aoti',
          label: '奥体'
        }]
      }]
    }, {
      value: 'sichuan',
      label: '四川',
      children: [{
        value: 'chengdu',
        label: '成都',
        children: [{
          value: 'cxl',
          label: '春熙路',
        }]
      },{
        value: 'mianyang',
        label: '绵阳'
      }],
    }],
    defaultValue: ['sichuan','chengdu']
  })
})
</script>

组合用法

Cascader 的 select 应用 amazeui插件 selected,使用 selectOption 应用样式


Copy
<div id="am-cascader2"></div>
<br>
<button type="button" class="am-btn am-btn-get">获取数据</button>
<script type="text/javascript">
$(function(){
  $('#am-cascader2').cascader({
    data: [{
      value: 'beijing',
      label: '北京',
      children: [{
        value: 'haidian',
        label: '海淀',
        children: [{
          value: 'zgc',
          label: '中关村'
        }]
      },{
        value: 'chaoyang',
        label: '朝阳',
        children: [{
          value: 'aoti',
          label: '奥体'
        }]
      }]
    }, {
      value: 'sichuan',
      label: '四川',
      children: [{
        value: 'chengdu',
        label: '成都',
        children: [{
          value: 'cxl',
          label: '春熙路',
        }]
      },{
        value: 'mianyang',
        label: '绵阳'
      }],
    }],
        selectOption: {
          btnWidth: '200px',
          btnSize: 'sm',
          btnStyle: 'primary',
        }
  });
  $('.am-btn-get').click(function() {
    alert( $('#am-cascader2').cascader('get') )
  })
})
</script>

详细设置参看插件 selected 部分

在线运行

参数说明

参数类型描述
dataarray下拉框数据
defaultValuearray默认选中项
selectOptionobjectselected 插件的参数应用

方法

get 返回选中项数据

自定义事件

change.cascader.amui select 选项改变立即触发