Skip to content

3.2.4 cascader

说明: 省市区三级联动或者诸如游戏大区等等数据联动

使用及参数说明:
js
new xui.cascader({
	id: string,
	rep: obj,
	data: array
})
  • id表示三级联动的容器, 必传
  • rep表示数据源的key, 方便绘制自定义数据源dom, 必传
  • data表示数据源, 没有格式限制, 只需要在rep里面把格式定义好就ok了, 必传
  • 准备好一个容器, 然后给一个id, 初始化一下即可, 选择的值是保存在这个容器的data-value
  • 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.这里是一个简单实例, 例子是随便举的,错了不要打我~

说明: 数据源还是灵活多变的, 我之前用别人写的插件时,就困于数据格式,所以决定自己写一个

js
new xui.cascader({
	id: 'cascader1',
	rep: {
		firKey: 'qqq',
		firList: 'b',
		secKey: 'c',
		secList: 'd',
		thiKey: 'gg'
	},
	data: [
		{
			qqq: 'front',
			b: [
				{
					c: 'html',
					d: [
						{
							gg: 'html5',
						},
					],
				},
				{
					c: 'css',
					d: [
						{
							gg: 'css2',
						},
						{
							gg: 'css3',
						}
					],
				},
				{
					c: 'js',
					d: [
						{
							gg: 'es5',
						},
						{
							gg: 'es6',
						},
						{
							gg: 'es7',
						},
						{
							gg: 'es8',
						}
					],
				},
				{
					c: 'vueJs',
				},
			]
		},
		{
			qqq: 'back',
			b: [
				{
					c: '.net',
					d: [
						{
							gg: '.net2',
						},
					],
				},
				{
					c: 'java',
					d: [
						{
							gg: 'j2ee',
						},
						{
							gg: 'others',
						},
					],
				},
			]
		},
	]
})

MIT Licensed