3.2.4 cascader

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

使用及参数说明:

new xui.cascader({
    id: string,
    rep: obj,
    data: array
})

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

效果展示

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

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

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',
                        },
                    ],
                },
            ]
        },
    ]
})