选择列表--左边选择到右边，右边选择到左边，支持回滚-------自制

兮滴

于 2018-09-19 12:20:37 发布

阅读量1.7k

点赞数

分类专栏： js自制demo

本文链接：https://blog.csdn.net/hwc_dd/article/details/82770341

版权

js自制demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图，样式还没调：（话说丑的中用。。。。。。。）

直接上：

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="layer-v3.1.1/layer/mobile/need/layer.css" rel="stylesheet" type="text/css" />
    <script src="jQueryDownload/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="layer-v3.1.1/layer/layer.js" type="text/javascript"></script>
    <script src="bootstrap-4.1.3-dist/js/bootstrap.js" type="text/javascript"></script>
    <link href="bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; height: 550px">
                <table id="left" border="1" style="width: 100%; text-align: center">
                </table>
            </div>
            <div class="clearfix visible-xs" style="text-align: center">
                <div style="height: 40%">
                </div>
                <input type="button" value="全部向右" id="runright" /><br />
                <input type="button" value="全部向左" id="runlwft" /><br />
                <input type="button" value="撤销" id="tian" />
            </div>
            <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; height: 550px">
                <table id="rigth" border="1" style="width: 100%; text-align: center">
                </table>
            </div>
        </div>
    </div>
    <script>
        //********************接受设置*******************//
        //排序列
        var missilesort;
        //未选择数组数据
        var laftdata = [{ name: '选择我', id: '1' }, { name: '选择我2', id: '2' }, { name: '选择我3', id: '3' }, { name: '选择我4', id: '4' }, { name: '选择我5', id: '5' }, { name: '选择我6', id: '6' }];
        //已选择数组数据
        var rigthdata = [{ name: '选择我', id: '1' }, { name: '选择我2', id: '2' }];
        //定义参数
        var mytablel = $("#left");
        var mytabler = $("#rigth");
        //记录操作信息
        var cilckeit = [];
        //分离已选择的数据
        laftdata = $.grep(laftdata, function (msg) {
            return $.grep(rigthdata, function (msgr) {
                return msgr.id == msg.id;
            }).length <= 0;
        })
        //未设置默认排序规则,添加一列排序--未完成（该功能）
        if (missilesort == '' || missilesort == undefined) {
            var a = []; var b = [];
            laftdata = $.each(laftdata, function (li, le) {
                $.extend(le, { missileleftid: li });
                a.push(le);
            });
            rigthdata = $.each(rigthdata, function (ri, re) {
                re = $.extend(re, { missileleftid: ri });
                b.push(re)
            });
            laftdata = a;
            rigthdata = b;
        }
        //刷新重置函数
        var initall = function () {
            (function ($) {
                mytablel.html('');
                mytabler.html('');
                $.each(laftdata, function (i, e) {
                    mytablel.append('<tr isid=' + JSON.stringify(e) + '><td>' + e.name + '</td></tr>')
                })
                $.each(rigthdata, function (i, e) {
                    mytabler.append('<tr isid=' + JSON.stringify(e) + '><td>' + e.name + '</td></tr>')
                })
            })(jQuery);
            //初始化点击事件
            mytable();
        }
        //注册需要重复的点击事件
        var mytable = function () {
            $.each(mytablel.find('tr'), function (i, e) {
                $(e).off("click")
                $(e).on("click", function () {
                    //记录操作前的状态,转换摆脱引用类型值会跟着改变的问题
                    cilckeit.push({ 'laftdata': JSON.parse(JSON.stringify(laftdata)), 'rigthdata': JSON.parse(JSON.stringify(rigthdata)) });
                    var cce = JSON.parse($(e).attr('isid'));
                    laftdata = $.grep(laftdata, function (msg) { return msg.id != cce.id });
                    rigthdata.push(cce);
                    initall();
                })
            })
            $.each(mytabler.find('tr'), function (i, e) {
                $(e).off("click")
                $(e).on("click", function () {
                    //记录操作前的状态
                     cilckeit.push({ 'laftdata': JSON.parse(JSON.stringify(laftdata)), 'rigthdata': JSON.parse(JSON.stringify(rigthdata)) });
                    var cce = JSON.parse($(e).attr('isid'));
                    rigthdata = $.grep(rigthdata, function (msg) { return msg.id != cce.id });
                    laftdata.push(cce);
                    initall();
                })
            })
        }
        //注册不需要重复的点击事件按钮的点击是事件
        var ontbtn = function () {
            $("#runright").on('click', function () {
                //记录操作前的状态
                 cilckeit.push({ 'laftdata': JSON.parse(JSON.stringify(laftdata)), 'rigthdata': JSON.parse(JSON.stringify(rigthdata)) });
                $.each(laftdata, function (i, e) {
                    rigthdata.push(e);
                });
                laftdata = [];
                initall();
            });
            $("#runlwft").on('click', function () {
                //记录操作前的状态
                 cilckeit.push({ 'laftdata': JSON.parse(JSON.stringify(laftdata)), 'rigthdata': JSON.parse(JSON.stringify(rigthdata)) });
                $.each(rigthdata, function (i, e) {
                    laftdata.push(e);
                });
                rigthdata = [];
                initall();
            });
            $("#tian").on('click', function () {
                console.log(cilckeit);
                if (cilckeit.length == 0) {
                    layer.msg('我也是有脾气的，老子不干了！')
                }
                rigthdata = cilckeit[cilckeit.length - 1].rigthdata;
                laftdata = cilckeit[cilckeit.length - 1].laftdata;
                cilckeit.pop();
                initall();
            });
        }
        //初始化方法
        var init = function () {
            //执行初始构造
            initall();
            //执行按钮的点击事件
            ontbtn();
        }
        //执行初始化--功能入口
        init();
    </script>
</body>
</html>

兮滴

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
选择列表--左边选择到右边，右边选择到左边，支持回滚-------自制

效果图，样式还没调：（话说丑的中用。。。。。。。）直接上：&lt;!DOCTYPE html&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns...
复制链接

扫一扫