layui動態表格數據選擇添加穿梭框代碼

非廢話start：兄嘚~如果你想看簡單的穿梭框演示的話就看：https://www.layui.com/demo/transfer.html

如果你想看表格的穿梭框的話，如下圖（是這樣么？）：

 

 是的話，你就點點頭~

廢話就多說：上代碼~

Html代碼

　　　　<div class="right">
            <span id="unAssigned" class="right-span title">未分配的學生</span>
            <span class="right-span"></span>
            <span id="assigned" class="right-span title"></span>
            <div class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" id="keyWord" placeholder="學號/學生名稱模糊搜索" class="layui-input">
                </div>
                <div class="layui-btn-group">
                    <button id="reload" class="layui-btn">搜索</button>
                    <!--<button id="submit" class="layui-btn">保存</button>-->
                </div>
            </div>
            <div id="transTable"></div>
        </div>

JS代碼

首先要替換你項目中該路徑（\layui\lay\modules）下的一個文件（transfer.js）

 百度雲鏈接：https://pan.baidu.com/s/1XBUdHVscsOvj6X-bYKyI4w 提取碼：m6na

　　　　　　layui.use(['table', 'transfer'], function () {
                var transfer = layui.transfer,
                    table = layui.table,
                    $ = layui.$,
                    data1 = [],
                    data2 = [];//數據轉換表
                function getTable() {
                    //表格列
                    var cols = [
                        { type: 'checkbox', fixed: 'left' }
                        , { field: 'classCode', title: '班級編碼', align: 'center' }
                        , { field: '', title: '班級名稱', align: 'center', templet: function () { return className; } }
                        , { field: 'sNum', title: '學號', align: 'center' }
                        , { field: 'sName', title: '學生名稱', align: 'center' }
                        //, { field: 'age', title: '年齡', align: 'center' }
                        //, { field: 'sex', title: '性別', align: 'center' }
                        //, { field: 'createdTime', title: '創建時間', sort: true, templet: function (d) { return changeBJTime(d.createdTime); }, align: 'center' }
                    ]
                    //表格配置文件
                    var tabConfig = { 'page': true, 'limit': 10, 'limits': [20, 50, 100], 'height': 600 }

                    var tb1 = transfer.render({
                        elem: "#transTable",//指定元素
                        cols: cols, //表格列  支持layui數據表格所有配置
                        data: [data1, data2], //[左表數據,右表數據[非必填]]
                        tabConfig: tabConfig //表格配置項 支持layui數據表格所有配置
                    })
                }

                //插入
                $('#transTable').on('click', "#left-btn-1", function () {
                    var list = [];
                    //右表
                    var checkData = table.checkStatus('left-table-1');
                    var arr = checkData.data;
                    $(arr).each(function (index) {
                        var obj = {
                            classCode: classCode,
                            groupId: $('.checked').attr('id'),
                            studentId: this.theId,
                            createdBy: jsid
                        };
                        list.push(obj);
                    })

                    $.ajax({
                        type: 'post',
                        url: '/Api/Class/Add',
                        contentType: 'application/json',
                        dataType: 'json',
                        data: JSON.stringify(list),
                        success: function (data) {

                        }
                    })
                });

                //刪除
                $('#transTable').on('click', "#right-btn-1", function () {
                    var list = [];

                    var checkData = table.checkStatus('right-table-1');
                    var arr = checkData.data;
                    $(arr).each(function () {
                        var obj = {
                            groupId: $('.checked').attr('id'),//小組主鍵
                            studentId: this.theId             //學生主鍵
                        };
                        list.push(obj);
                    })
                    $.ajax({
                        type: 'post',
                        url: '/Api/Class/Delete',
                        contentType: 'application/json',
                        data: JSON.stringify(list),
                        success: function (data) {
                        }
                    })
                })
            })
        })

根據你真是的需求進行實際操作和編寫。栗子：https://www.sucaihuo.com/js/4098.html

有什么不明白的可隨時評論，我看到就會回復哦~

看到這了，小主大人，手留余香，點個贊白~