layui transfer 遇到的相关问题

动态显示穿梭框内容 并加了一个新的div进行存储添加的内容

效果


问题
1.transfer无法渲染的问题 已解决
transfer初始化 1.忘记引入css文件 2.后台数据必须要有 value 和title这两个参数 ，否则解析的数据条数一致但是只会显示undefined ，建议传值的时候，将 id改成value，将需要显示的值拼接并改成title
2.动态添加标签，事件不触发，函数报错，无法找到已定义的函数 已解决
通过父标签动态给字标签绑定事件
3. 存储已选的div从下往上删除时第三个开始会出现多个删除现象 ，从上往下删则不会。（未解决）

**引入jS css**
<!-- 为了不影响原来的样式，新样式是直接引入layui2.5 放在layui下面的-->
 <link th:href="@{/layui/layui/css/layui.css}" rel="stylesheet"/>
 <script th:src="@{/layui/layui/layui.js}"></script>
  <h2 align="center " style="margin: 30px">样品选择</h2>
        <div class="layui-row">
            <div class="layui-inline layui-form" style="width:15%; margin-left: 127px;margin-top: 10px">
                <select name="patternCateId" id="patternCateId" lay-filter="patternCate">
                    <option value="">请选择主题</option>
                    <option th:each="patternCate,patternStat:${patternCates}"
                            th:value="${patternCate.id}"
                            th:text="${patternCate.patternCateName}"
                            th:selected="${patternCateId == patternCate.id}"
                    ></option>
                </select>
            </div>
        </div>
        <div class="layui-row">
            <div id="test1" class="demo-transfer" style="position:absolute;margin-left: 127px;margin-top: 10px"></div>
            <div class="layui-transfer-active" style="margin: 178px 613px;position: absolute" >
                <button type="button" id="add" class="layui-btn  layui-btn-primary "
                        data-index="0" style="border-color: #e61673;
              background-color: #e61673;">添加</button>
            </div>
            <div style="width: 400px; height: 360px; border: 1px solid #EEEEEE;position:absolute;margin-left: 680px;margin-top: 10px">
                <div class="layui-transfer-header  ">
                    <span>已有样品</span>
                </div>
                <div id="dataList" style="overflow: scroll; height: 320px" >
                </div>
            </div>
        </div>

<script>
 layui.use([ 'layer', 'form', 'upload','transfer'], function () {
        let layer = layui.layer,
            form = layui.form,
            transfer = layui.transfer,
            $ = layui.$;


//transfer渲染
        $.ajax({
            type: "post",
            contentType: "application/json;charset=UTF-8",
            async: false,
            // dataType:JSON,
            cache: false,
            url: "/share/list4Trans",
            data: {
                // patternCateId:1
            },
            success: function (res) {
                transfer.render({
                    elem: '#test1'  //绑定元素
                    , title: ['待选样品', '候选样品']
                    , parsedData: function (res) {
                        return {
                            "value": res.value,//数据值 必须  
                            "title": res.title //数据标题  必须
                        }
                    },
                    data: res
                    , id: 'demo1' //定义索引
                });
            }
        });
}）;


    //后端传入数据
    let dataList = [[${dataList}]];
 /*穿梭框修改以及数据获取*/
 将后台传来的数据显示在存储的div中
        show();
        let i=0;
        function show(){
            let con = '';
            $("#dataList").html("");
            for (let value of dataList) {
                let id = value.value;
                //为条数据添加删除按钮 ，并为按钮添加事件，动态添加事件无法直接添加，会无法识别函数，只能通过js绑定
                con = con + "<li  style='padding: 0 10px;height: 32px'>" + value.title + "&nbsp;&nbsp;&nbsp;&nbsp;" +
                    "<input type='button' text='" + id + "' id='pattern_" + id + "'    style='color: #FFFFFF;line-height: 17px;" +
                    "height: 20px;'  class='layui-btn layui-btn-sm layui-btn-primary'value='删除' ></li>"
                $("#dataList").on("click", "#pattern_" + id, function () {
                    let id = $("#" + this.id).attr("text");
                    console.log(id)
                    // console.log(data)
                    for (let k of dataList) {
                        console.log(k.value);
                        if (k.value == id) {
                            if (i > 0) {
                                i = 0;
                                return;
                            }else {
                                i = i+1;
                                dataList.splice(k, 1);
                                console.log(id,"::"+i);
                                show();
                            }
                        }
                    }

                });
            }
            $("#dataList").append(con);
        }


//将transfer选中的数据存入div中
  $("#add").click(function () {
            add();
        });
        function add(){
            //获取穿梭框已选中的数据  getData 填的id为初次渲染时定义的索引，不是div id 
            let data=transfer.getData("demo1");
            console.log(1);
            let  i=0;
            for (let k of data) {
                let flag = true;
                for (let h of dataList) {
                    if (h.value === k.value) {
                        flag = false;
                    }
                }
                if (flag) {
                    dataList.push(k);
                    i= i+1;
                }
            }
            if (i>0){
                show();
            }
        }

//每次更换主题，重新渲染transfer，该操作为异步
      form.on('select(patternCate)', function () {
            let patternTitle = $('#patternTitle').val();//获取输入框的值
            let patternCateId = $('#patternCateId').val();//获取输入框的值
            $.ajax({
                type: "post",
                // contentType: "application/json;charset=UTF-8",
                async: false,
                // dataType:JSON,
                cache: false,
                url: "/share/list4Trans",
                data: {
                    patternCateId: patternCateId
                },
                success: function (res) {
                    transfer.render({
                        elem: '#test1'  //绑定元素
                        , title: ['待选样品', '候选样品']
                        , parsedData: function (res) {
                            return {
                                "value": res.value,//数据值
                                "title": res.title //数据标题
                            }
                        },
                        data: res
                        , id: 'demo1' //定义索引
                    });
                }
            });
        });
</script>