freeys-transferex
/
demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>

    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./layui/css/modules/layui-icon-extend/iconfont.css" media="all">
    <script src="./layui/layui.js"></script>
</head>
<body>
<div class="layui-form">
    <div class="layui-form-item" lay-filter="demoForm">
        <div class="layui-inline">
            <input type="checkbox" lay-filter="demoName" name="demoName" value="10" title="张三"
            >
            <input type="checkbox" lay-filter="demoName" name="demoName" value="11" title="李四"
            >
            <input type="checkbox" lay-filter="demoName" name="demoName" value="12" title="王五"
            >
            <input type="checkbox" lay-filter="demoName" name="demoName" value="13" title="二麻子"
            >
            <input type="checkbox" lay-filter="demoName" name="demoName" value="14" title="李拐子"
            >
        </div>
    </div>
    <div class="layui-form-item">
        <div id="demo-transfer"></div>
    </div>
</div>
<script>
    layui.extend({
        transferex: './layui/exmodules/transferex'
    });
    layui.use(['form', 'layer', 'transferex'], function () {
        var $ = layui.$
            , form = layui.form
            , layer = layui.layer
            , transferex = layui.transferex;
        var id = 'demo-transfer';

        form.on('checkbox(demoName)', function (data) {
            if (data.elem.checked) {
                transferex.addData({'value': data.value, 'title': data.elem.title}, id)
            } else {
                transferex.remove(data.value, id);
            }
        });

        form.render();
        var title = ['列表一', '列表二'];
        transferex.render({
            elem: '#demo-transfer'  //绑定元素
            , title: title
            , showSearch: true
            , remove: true
            , data: [
                {"value": "1", "title": "李白"}
                , {"value": "2", "title": "杜甫"}
                , {"value": "3", "title": "苏轼"}
                , {"value": "4", "title": "李清照"}
                , {"value": "6", "title": "巴金"}
                , {"value": "7", "title": "冰心"}
                , {"value": "8", "title": "矛盾"}
                , {"value": "9", "title": "贤心"}
            ]
            , id: id //定义索引
            , width: 480,
            height: 660
            , onRemove: function (data, index) {
                layer.msg(title[index] + '删除数据:' + JSON.stringify(data));
            }
        });

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