zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>级联选择器</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=315"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-form-label {
            padding-left: 0;
            padding-right: 0;
            width: 110px;
        }

        .layui-form-item {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">基本用法</div>
                <div class="layui-card-body">
                    <div class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">基本用法：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader1" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">设置默认值：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader2" value="jiangsu,suzhou,shizilin" placeholder="请选择"
                                       class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">移入展开：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader3" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">进阶用法</div>
                <div class="layui-card-body">
                    <div class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">全部禁用：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader4" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部分禁用：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader5" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择即改变：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader6" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">高级用法</div>
                <div class="layui-card-body">
                    <div class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">自定义项：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader7" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">动态加载：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader8" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">搜索功能：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader9" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">表单验证</div>
                <div class="layui-card-body">
                    <form class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">请选择：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader10" placeholder="请选择" class="layui-hide"
                                       lay-verType="tips" lay-verify="required" required/>
                            </div>
                        </div>
                        <div class="layui-form-item text-center">
                            <button class="layui-btn layui-btn-primary icon-btn" type="reset">
                                <i class="layui-icon">&#x1006;</i>重置
                            </button>
                            <button class="layui-btn icon-btn" lay-filter="demoCascaderformSub" lay-submit>
                                <i class="layui-icon">&#xe605;</i>提交
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">常用示例</div>
                <div class="layui-card-body">
                    <div class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">省市区选择：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader11" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">专业选择：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader12" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">更多配置</div>
                <div class="layui-card-body">
                    <div class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">不显示清除：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader13" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">清除时重置：</label>
                            <div class="layui-input-block">
                                <input id="demoCascader14" placeholder="请选择" class="layui-hide"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=315"></script>
<script type="text/javascript" src="../../../assets/module/cascader/citys-data.js"></script>
<script>
    layui.use(['layer', 'form', 'tableX', 'cascader'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var tableX = layui.tableX;
        var cascader = layui.cascader;

        var data = [{
            value: 'beijing',
            label: '北京',
            children: [
                {
                    value: 'gugong',
                    label: '故宫'
                },
                {
                    value: 'tiantan',
                    label: '天坛'
                },
                {
                    value: 'wangfujing',
                    label: '王府井'
                }
            ]
        }, {
            value: 'jiangsu',
            label: '江苏',
            children: [
                {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: '拙政园',
                        },
                        {
                            value: 'shizilin',
                            label: '狮子林',
                        }
                    ]
                }
            ],
        }];

        // 基础用法
        cascader.render({
            elem: '#demoCascader1',
            data: data
        });

        // 设置默认值
        cascader.render({
            elem: '#demoCascader2',
            data: data
        });

        // 移入展开
        cascader.render({
            elem: '#demoCascader3',
            data: data,
            trigger: 'hover'
        });

        // 禁用全部
        cascader.render({
            elem: '#demoCascader4',
            data: data,
            disabled: true
        });

        // 禁用部分
        var data1 = tableX.deepClone(data);
        data1[0].children[2].disabled = true;
        data1[1].children[0].disabled = true;
        data1[1].children[1].children[1].disabled = true;
        cascader.render({
            elem: '#demoCascader5',
            data: data1
        });

        // 选择即改变
        cascader.render({
            elem: '#demoCascader6',
            data: data,
            changeOnSelect: true
        });

        // 自定义项
        cascader.render({
            elem: '#demoCascader7',
            data: data,
            renderFormat: function (labels, values) {
                return labels.join(' || ');
            }
        });

        // 动态加载
        cascader.render({
            elem: '#demoCascader8',
            reqData: function (values, callback, data) {
                setTimeout(function () {  // 模拟网络请求
                    callback(getData(data ? data.value : undefined));
                }, 1500);
            }
        });

        // 模拟网络请求加载数据
        function getData(value) {
            var list = [];
            if (!value) {
                list = [
                    {value: 'beijing', label: '北京', haveChildren: true},
                    {value: 'jiangsu', label: '江苏', haveChildren: true}
                ];
            } else if (value == 'beijing') {
                list = [
                    {value: 'gugong', label: '故宫'},
                    {value: 'tiantan', label: '天坛'},
                    {value: 'wangfujing', label: '王府井'}
                ];
            } else if (value == 'jiangsu') {
                list = [
                    {value: 'nanjing', label: '南京', haveChildren: true},
                    {value: 'suzhou', label: '苏州', haveChildren: true}
                ];
            } else if (value == 'nanjing') {
                list = [
                    {value: 'fuzimiao', label: '夫子庙'}
                ];
            } else if (value == 'suzhou') {
                list = [
                    {value: 'zhuozhengyuan', label: '拙政园'},
                    {value: 'shizilin', label: '狮子林'}
                ];
            }
            return list;
        }

        // 搜索功能
        cascader.render({
            elem: '#demoCascader9',
            data: data,
            filterable: true
        });

        // 表单验证
        cascader.render({
            elem: '#demoCascader10',
            data: data
        });
        form.on('submit(demoCascaderformSub)', function (data) {
            layer.closeAll('tips');
            layer.msg('表单验证通过', {icon: 1});
            return false;
        });

        // 省市区选择
        cascader.render({
            elem: '#demoCascader11',
            data: citysData,
            itemHeight: '250px',
            filterable: true
        });

        // 专业选择
        cascader.render({
            elem: '#demoCascader12',
            itemHeight: '220px',
            data: [{
                label: '计算机学院',
                value: '1',
                children: [{
                    label: '软件技术',
                    value: '1-1'
                }, {
                    label: '计算机网络技术',
                    value: '1-2'
                }, {
                    label: '计算机信息管理',
                    value: '1-3'
                }, {
                    label: '物联网应用技术',
                    value: '1-4'
                }, {
                    label: '数字媒体应用技术',
                    value: '1-5'
                }, {
                    label: '移动互联应用技术',
                    value: '1-6'
                }]
            }, {
                label: '机械工程学院',
                value: '2',
                children: [{
                    label: '模具设计与制造',
                    value: '2-1'
                }, {
                    label: '机械设计与制造',
                    value: '2-2'
                }, {
                    label: '数控技术',
                    value: '2-3'
                }, {
                    label: '机械制造与自动化',
                    value: '2-4'
                }]
            }, {
                label: '商学院',
                value: '3',
                children: [{
                    label: '电子商务',
                    value: '3-1'
                }, {
                    label: '物流管理',
                    value: '3-2'
                }, {
                    label: '报关与国际货运',
                    value: '3-3'
                }, {
                    label: '连锁经营管理',
                    value: '3-4'
                }, {
                    label: '旅游管理',
                    value: '3-5'
                }, {
                    label: '商务英语',
                    value: '3-6'
                }, {
                    label: '会计',
                    value: '3-7'
                }, {
                    label: '金融管理',
                    value: '3-8'
                }, {
                    label: '工商企业管理',
                    value: '3-9'
                }]
            }]
        });

        // 关闭清除按钮
        cascader.render({
            elem: '#demoCascader13',
            data: data,
            clearable: false
        });

        // 清除时重置
        cascader.render({
            elem: '#demoCascader14',
            data: data,
            clearAllActive: true
        });


    });
</script>
</body>
</html>