master

分支 (1)

管理

管理

master

active-form_layui
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>activeForm</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>


<button id="qz" style="margin-bottom: 40px;margin-left: 40px">取值</button>
<span id="sdf"></span>
<div id="container">
</div>


<script src="./layui/layui.js"></script>
<script src="activeForm.js"></script>
<script>

    layui.extend({
        xmSelect: 'xm-select',
        activeForm: 'activeForm'
    }).use(['activeForm', 'form', 'jquery'], function () {
        var form = layui.form
        var $ = layui.jquery


        var table_3Inst = new layui.activeForm({
                el: '#container',
                disabled: false,
                columns: [
                    {
                        title: '',
                        type: 'checkbox',
                        field: '',
                    },
                    {
                        title: '线路',
                        type: 'select',
                        field: 'line',
                        required:true,
                        alternative: [{
                            value: '1',
                            name: 'A线'
                        }, {
                            value: 'b',
                            name: 'B线'
                        }],
                        onChange: function (value, row_uuid) {
                            $('[data-uuid="' + row_uuid + '"]').find('[name="tower"]').html('<option>请选择</option><option value="6">#6</option>')
                            form.render()
                        }
                    },
                    {
                        title: '杆塔',
                        type: 'select',
                        field: 'tower'
                    },
                    {
                        title: '飞手',
                        type: 'multi-select',
                        field: 'feishou',
                        xmSelectOption: {
                            data: [{
                                value: 'zhangsan',
                                name: '张三',
                                selected: true
                            }, {
                                value: 'lisi',
                                name: '李四'
                            }],
                        }
                    },
                    {
                        title: '备注',
                        type: 'input',
                        field: 'remark'
                    }
                ],
                data: [{
                    line: {
                        currSelectedValue: '1',

                    },
                    tower: {
                        alternative: [{
                            value: '1',
                            name: '#1'
                        }, {
                            value: '2',
                            name: '#2'
                        }],
                        currSelectedValue: '2',
                    },
                    feishou: {
                        xmSelectOption: {
                            data: [{
                                value: 'zhangsan',
                                name: '张三2',
                                selected: true
                            }, {
                                value: 'lisi',
                                name: '李四2'
                            }],
                        }
                    },
                    remark: '测试的备注'
                }, {
                    line: {
                        currSelectedValue: '1',

                    },
                    tower: {
                        alternative: [{
                            value: '1',
                            name: '#1'
                        }, {
                            value: '2',
                            name: '#2'
                        }],
                        currSelectedValue: '2',
                    },
                    feishou: {},
                    remark: '测试的备注2'
                }],

            },
        );


        $('#qz').on('click',function () {
            console.log(table_3Inst.getValue())

            $('#sdf').html(JSON.stringify(table_3Inst.getValue()))
        })

    })

</script>

</body>
</html>