master

分支 (2)

管理

管理

master

develop

layui-component
/
labelSelector.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>标签选择器</title>
    <link href="layui/css/layui.css" rel="stylesheet" />
</head>

<body>

    <div class=" layui-main">
        <h2 style="margin:20px 0">基于Layui开发的labelSelector插件演示案例</h2>
        <blockquote class="layui-elem-quote">
            <legend>使用案例一</legend>
        </blockquote>
        <div id="example1"></div>

        <blockquote class="layui-elem-quote">
            <legend>使用案例二</legend>
        </blockquote>
        <div id="example2"></div>

        <blockquote class="layui-elem-quote">
            <legend>使用案例三</legend>
        </blockquote>
        <div id="example3"></div>

        <blockquote class="layui-elem-quote">
            <legend>使用案例四————基于layer实现</legend>
        </blockquote>
        <button type="button" class="layui-btn" id="labelSelectorButton">点击选择人员标签</button>
    </div>

    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.config({ base: 'layui-exts' }).extend({
            'labelSelector': '/labelSelector/js/labelSelector'
        });

        layui.use(['labelSelector', 'jquery', 'layer'], function () {
            let $ = layui.jquery,
                layer = layui.layer,
                labelSelector = layui.labelSelector;

            labelSelector.render({
                isAllowAddLabel: true,
                data: [
                    {
                        id: 1,
                        title: '性格',
                        label: [{ title: '平稳', value: 1 }, { title: '憨厚', value: 2 }, { title: '不守时', value: 3 }, { title: '测试', value: 6 }, { title: '撒旦', value: 7 }, { title: '这种', value: 9 }]
                    },
                    {
                        id: 2,
                        title: '爱好',
                        label: [{ title: '篮球', value: 4 }, { title: 'rap', value: 5 }]
                    }
                ],
                elem: "#example1",
                isAllowSelectTip: true,
                clicked: function (hasSelected, hasSelectedTitle) {
                    console.log(hasSelected);
                    console.log(hasSelectedTitle)
                }
            });

            labelSelector.render({
                data: [
                    {
                        id: 1,
                        title: '性格',
                        label: [{ title: '平稳', value: 1 }, { title: '憨厚', value: 2 }, { title: '不守时', value: 3 }, { title: '测试', value: 6 }, { title: '撒旦', value: 7 }, { title: '这种', value: 9 }]
                    },
                    {
                        id: 2,
                        title: '爱好',
                        label: [{ title: '篮球', value: 4 }, { title: 'rap', value: 5 }]
                    }
                ],
                elem: "#example2",
                isAllowClose: true,
                isAllowSelectTip: true,
                tab: {
                    tabClass: 'layui-tab-card',
                    checkboxSkin: 'tag'
                },
                clicked: function (ele, hasSelected, hasSelectedTitle) {
                    console.log(hasSelected);
                    console.log(hasSelectedTitle)
                }
            });

            labelSelector.render({
                isAllowAddLabel: true,
                data: [
                    {
                        id: 1,
                        title: '性格',
                        label: [{ title: '平稳', value: 1 }, { title: '憨厚', value: 2 }, { title: '不守时', value: 3 }, { title: '测试', value: 6 }, { title: '撒旦', value: 7 }, { title: '这种', value: 9 }]
                    },
                    {
                        id: 2,
                        title: '爱好',
                        label: [{ title: '篮球', value: 4 }, { title: 'rap', value: 5 }]
                    }
                ],
                elem: "#example3",
                isAllowClose: true,
                isAllowSelectTip: true,
                window: {
                    btn: true,
                    title: { text: "演示案例四，请选择合适的标签？", style: "color:red" }
                },
                tab: {
                    tabClass: 'layui-tab-brief',
                    checkboxSkin: 'tag'
                },
                confirm: function (hasSelected, hasSelectedTitle) {
                    if (hasSelected.length > 0) {
                        layer.msg("您已经选择了【" + hasSelectedTitle.toString() + "】！")
                    } else {
                        layer.msg("您还没有任何的选择！");
                    }
                },
                cancel: function () {
                    layer.msg("您已经点击了取消按钮！");
                }
            });

            $('#labelSelectorButton').on('click', function () {
                let index = layer.open({
                    title: "人员标签选择",
                    type: 1,
                    area: ['550px', '400px'],
                    maxmin: true,
                    resize: true,
                    success: function (layero, index) {
                        labelSelector.render({
                            isAllowAddLabel: true,
                            data: [
                                {
                                    id: 1,
                                    title: '性格',
                                    label: [{ title: '平稳', value: 1 }, { title: '憨厚', value: 2 }, { title: '不守时', value: 3 }, { title: '测试', value: 6 }, { title: '撒旦', value: 7 }, { title: '这种', value: 9 }]
                                },
                                {
                                    id: 2,
                                    title: '爱好',
                                    label: [{ title: '篮球', value: 4 }, { title: 'rap', value: 5 }]
                                }
                            ], //数据格式
                            defaultSelected: [1, 2], //默认选中值，对应data下每一个label项子项的value值
                            elem: $(layero).find(".layui-layer-content"), //绑定元素
                            window: {
                                title: { text: '请选择人员所属标签？', style: "color:#16baaa", isAllowShowSelectedRatio: true, ratioStyle: "color:Red" }, //窗口标题text及其样式style（style仅支持css的写法）
                                btn: true //是否开启窗体按钮，默认为false，开启后才可有对应的confim方法和cancel方法
                            },
                            tab: {
                                isAllowClose: false, //是否允许tab上有关闭按钮
                                tabClass: 'layui-tab-brief', //tab的样式，空为默认样式，layui-card是卡片样式，layui-tab-brief为简约样式
                                tabContentStyle: 'padding-top:15px', //每个tab下对应的css样式
                                checkboxSkin: 'tag', //tab中标签的样式，支持primary和tag两种风格，默认为primary风格
                                change: function (layero, tabId, data) { //tab的change事件，三个参数，第一个参数是tab对应的jquery对象，第二个为tabId，第三个tab对应的数据项
                                    console.log("tabId发生改变");
                                },
                                delete: function (layero, data) { //tab的删除事件，二个参数，第一个参数是tab对应的jquery对象，第二个tab对应的数据项
                                    console.log("table被移除");
                                }
                            },
                            isAllowSelectTip: false, //是否允许选择提示，如果允许将会使用layer.msg的形式弹出选择提示
                            clicked: function (ele, hasSelected, hasSelectedTitle) { //标签点击事件，第一个参数是对应的标签的jquery对象，第二个返回全部已选中值，第三个参数为全部已选中值的标题
                                console.log(hasSelected);
                                console.log(hasSelectedTitle)
                            },
                            confirm: function (hasSelected, hasSelectedTitle) { //确定事件，当btn为true时生效，第一个返回全部已选中值，第二个参数为全部已选中值的标题
                                console.log(hasSelected);
                                console.log(hasSelectedTitle)
                                layer.close(index);
                            },
                            cancel: function () { //取消事件，当btn为true时生效
                                layer.close(index);
                            },
                            addNewLabel: function (tabId, labelTitle) {  // 返回格式{success:true/false,labelValue:label对应的ID}
                                return { success: true, labelValue: 1 };
                            }
                        });
                    }
                })
            });
        });
    </script>
</body>

</html>