联动菜单 - AuxUI - 模块化前端UI框架

数据格式

必须存在id、name（名称）、parentid（父ID）这三个字段，最顶级菜单parentid对应值为0


{
    '1000' : {"id":"1000", "name":"北京", "parentid":"0"},
    '1001' : {"id":"1001", "name":"北京市", "parentid":"1000"},
    '1002' : {"id":"1002", "name":"东城区", "parentid":"1001"},
    '1003' : {"id":"1003", "name":"西城区", "parentid":"1001"},
    '1004' : {"id":"1004", "name":"丰台区", "parentid":"1001"},
    '1005' : {"id":"1005", "name":"江苏", "parentid":"0"},
    '1006' : {"id":"1006", "name":"无锡", "parentid":"1005"},
    '1007' : {"id":"1007", "name":"苏州", "parentid":"1005"},
    '1008' : {"id":"1008", "name":"太平镇", "parentid":"1007"},
    '1009' : {"id":"1009", "name":"相城区", "parentid":"1007"}
} 

//或者

[
    {"id":"1000", "name":"北京", "parentid":"0"},
    {"id":"1001", "name":"北京市", "parentid":"1000"},
    {"id":"1002", "name":"东城区", "parentid":"1001"},
    {"id":"1003", "name":"西城区", "parentid":"1001"},
    {"id":"1004", "name":"丰台区", "parentid":"1001"},
    {"id":"1005", "name":"江苏", "parentid":"0"},
    {"id":"1006", "name":"无锡", "parentid":"1005"},
    {"id":"1007", "name":"苏州", "parentid":"1005"},
    {"id":"1008", "name":"太平镇", "parentid":"1007"},
    {"id":"1009", "name":"相城区", "parentid":"1007"}
]

原始Select联动菜单

<!-- html -->
<div class="select-container"></div>

<!-- js -->
<script type="text/javascript">
auxui(['linkage'], function() {
    var data = [
        {"id":"1000", "name":"北京", "parentid":"0"},
        {"id":"1001", "name":"北京市", "parentid":"1000"},
        {"id":"1002", "name":"东城区", "parentid":"1001"},
        {"id":"1003", "name":"西城区", "parentid":"1001"},
        {"id":"1004", "name":"丰台区", "parentid":"1001"},
        {"id":"1005", "name":"江苏", "parentid":"0"},
        {"id":"1006", "name":"无锡", "parentid":"1005"},
        {"id":"1007", "name":"苏州", "parentid":"1005"},
        {"id":"1008", "name":"太平镇", "parentid":"1007"},
        {"id":"1009", "name":"相城区", "parentid":"1007"}
    ];
    $('.select-container').linkage({
        data : data,
        title : '下拉选择',
        type : 'select',
        callback : function(d){
            console.log(d);
        }
    });

});
</script>

美化后Select联动菜单

默认

尺寸

<!-- html -->
<div class="select-container"></div>

<!-- js -->
<script type="text/javascript">
auxui(['linkage'], function() {
    var data = [
        {"id":"1000", "name":"北京", "parentid":"0"},
        {"id":"1001", "name":"北京市", "parentid":"1000"},
        {"id":"1002", "name":"东城区", "parentid":"1001"},
        {"id":"1003", "name":"西城区", "parentid":"1001"},
        {"id":"1004", "name":"丰台区", "parentid":"1001"},
        {"id":"1005", "name":"江苏", "parentid":"0"},
        {"id":"1006", "name":"无锡", "parentid":"1005"},
        {"id":"1007", "name":"苏州", "parentid":"1005"},
        {"id":"1008", "name":"太平镇", "parentid":"1007"},
        {"id":"1009", "name":"相城区", "parentid":"1007"}
    ];
    $('.select-container').linkage({
        size : '',
        height : 200,
        data : datas,
        title : '请选择',
        type : 'selectX',
        callback : function(d){
          console.log(d);
        }
    });

});
</script>

Select选项

名称	类型	描述
size	string	默认undefined，控件尺寸大小，可选：`xs，sm，lg`，仅`type`为`selectX`时有效
height	number	最大高度，下拉列表高度，超出自动出现滚动条，仅`type`为`selectX`时有效
data	object	数据集合
title	string	标题
type	string	联动菜单类型，可选：`select、selectX`
callback	function	回调函数

下拉列表联动菜单

<!-- html -->
<input type="text" class="form-control linkage-dropdown" placeholder="点选择" readonly="">

<!-- js -->
<script type="text/javascript">
auxui(['linkage'], function() {
    var data = [
        {"id":"1000", "name":"北京", "parentid":"0"},
        {"id":"1001", "name":"北京市", "parentid":"1000"},
        {"id":"1002", "name":"东城区", "parentid":"1001"},
        {"id":"1003", "name":"西城区", "parentid":"1001"},
        {"id":"1004", "name":"丰台区", "parentid":"1001"},
        {"id":"1005", "name":"江苏", "parentid":"0"},
        {"id":"1006", "name":"无锡", "parentid":"1005"},
        {"id":"1007", "name":"苏州", "parentid":"1005"},
        {"id":"1008", "name":"太平镇", "parentid":"1007"},
        {"id":"1009", "name":"相城区", "parentid":"1007"}
    ];
    $('.linkage-dropdown').linkage({
        btn : {
            cancel : true,
            confirm : true
        },
        skin : 'info',
        title : '下拉列表联动菜单',
        data : datas,
        type : 'dropdown',
        callback : function(d){
            $('.linkage-dropdown').val(d.text);
            console.log(d.ui);  //美化后的DOM
            console.log(d.value);   //选择项值
            console.log(d.text);    //选择项文本
            console.log(d.btnIndex);    //被按下的按钮索引
        }
    });

});
</script>

弹窗联动菜单

底部弹出框

<!-- html -->
<input type="text" class="form-control linkage-popover" placeholder="点选择" readonly="">

<!-- js -->
<script type="text/javascript">
auxui(['linkage'], function() {
    var data = [
        {"id":"1000", "name":"北京", "parentid":"0"},
        {"id":"1001", "name":"北京市", "parentid":"1000"},
        {"id":"1002", "name":"东城区", "parentid":"1001"},
        {"id":"1003", "name":"西城区", "parentid":"1001"},
        {"id":"1004", "name":"丰台区", "parentid":"1001"},
        {"id":"1005", "name":"江苏", "parentid":"0"},
        {"id":"1006", "name":"无锡", "parentid":"1005"},
        {"id":"1007", "name":"苏州", "parentid":"1005"},
        {"id":"1008", "name":"太平镇", "parentid":"1007"},
        {"id":"1009", "name":"相城区", "parentid":"1007"}
    ];
    $('.linkage-popover').linkage({
        btn : {
            cancel : true,
            confirm : true
        },
        skin : 'info',
        title : '下拉列表联动菜单',
        data : datas,
        type : 'popover',
        callback : function(d){
            $('.linkage-popover').val(d.text);
            console.log(d.ui);  //美化后的DOM
            console.log(d.value);   //选择项值
            console.log(d.text);    //选择项文本
            console.log(d.btnIndex);    //被按下的按钮索引
        }
    });

});
</script>

下拉列表/弹窗联动菜单选项

名称	类型	描述
btn	object	按钮控制： `cancel`为`true`显示取消按钮， `confirm`为`true`显示确认按钮
skin	string	主题样式可选：`default、primary、success、info、warning、danger`
height	number	最大高度，默认400，下拉列表高度，超出自动出现滚动条
data	object	数据集合
title	string	标题
type	string	联动菜单类型，可选：`dropdown、popover`
callback	function	回调函数