zoukankan      html  css  js  c++  java
  • 左边列表多选可以批量移动到右边列表,右边列表页可以批量移动到左边列表,可以实现前端自动搜索 ajax 传递List

    #set($layout = "layout/null.vm")
    <style type="text/css">
        li {
            list-style: none;
        }
    
        .select-content {
            float: right;
            height: 36px;
            line-height: 36px;
            margin-right: 305px;
            background: white;
            color: rgb(149, 149, 149);
             180px;
            position: relative;
            top: 50%;
            margin-top: -18px;
        }
    
        .down-drop {
            float: right;
            height: 36px;
            background: rgb(235, 235, 235);
        }
    
        .select-content .location {
            padding-left: 16px;
            float: left;
            height: 36px;
            padding-right: 14px;
        }
    
        .location img {
            margin-top: 9px;
        }
    
        .select-box {
            display: none;
        }
    
        .select-box ul li img {
            margin-left: 16px;
            margin-right: 14px;
        }
    
        .nav .select-content ul {
            position: relative;
            border: none;
            background: white;
            z-index: 1;
        }
    
        .select-box ul li {
            border-bottom: 1px solid rgb(216, 216, 216);
        }
    
        .select-box ul li:first-child {
            border-top: 1px solid rgb(216, 216, 216);
        }
    
        .selitem {
            font-size: 15px;
            margin-top: 5px;
        }
    
        .selitem li {
            margin-top: 5px;
            cursor: pointer;
        }
    
        .selitem input {
            margin-right: 5px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
    
            //移到右边
            $('#add').click(function () {
                //获取选中的选项,删除并追加给对方
                //获取选中的选项,删除并追加给对方
                //alert(123);
                $("#select1 input:checkbox[name='loc']:checked").each(function () {
                    $(this).prop("checked", false);
                    $(this).parent().appendTo('#select2');
                });
    
                $('#select1 li:checkbox:checked').appendTo('#select2');
            });
    
            //移到左边
            $('#remove').click(function () {
                $("#select2 input:checkbox[name='loc']:checked").each(function () {
                    $(this).parent().appendTo('#select1');
                });
            });
    
            // 左侧
            $("#input1").bind("change keyup paste ", function () {
                var val = $(this).val();
                // 遍历select1下的input实现自动搜索
                $("#select1 input:checkbox[name='loc']").each(function () {
    
                    if (val == "") {
                        $(this).parent().show();
                    }
                    else {
                        var itemv = $(this).next();
                        if (itemv.text().indexOf(val) > -1) {
                            $(this).parent().show();
                        }
                        else {
                            $(this).parent().hide();
                        }
                        // console.log(itemv.text());
                    }
                });
    
            })
            // 右侧
            $("#input2").bind("change keyup paste ", function () {
                var val = $(this).val();
                // 遍历select1下的input实现自动搜索
                $("#select2 input:checkbox[name='loc']").each(function () {
                    if (val == "") {
                        $(this).parent().show();
                    }
                    else {
                        var itemv = $(this).next();
                        if (itemv.text().indexOf(val) > -1) {
                            $(this).parent().show();
                        }
                        else {
                            $(this).parent().hide();
                        }
                    }
                });
            })
    
        });
    </script>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    #if($conStaticTemplate)商品静态模板更新
                    #else 商品静态模板新增
                    #end
                </h4>
            </div>
            <form id="conStaticTemplateEdit_form" method="post" class="form-horizontal bv-form" novalidate="novalidate">
                <input type="hidden" id="id" name="id" value="$!{conStaticTemplate.id}"/>
                <button type="submit" class="bv-hidden-submit" style="display: none;  0px; height: 0px;"></button>
                <div class="modal-body">
                    <div class="row">
    
                        <div class="col-sm-10">
                            <div class="form-group has-feedback">
                                <label class="col-sm-4 control-label" style="padding-left: 0px;">模板名称</label>
                                <div class="col-sm-8" style="padding-left: 0px;">
                                    <input class="form-control" id="temName" name="temName"
                                           value="$!{conStaticTemplate.temName}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="padding-left: 10px;">
                        <div class="col-sm-5 panel-body panel panel-default" style=" 320px;">
                            <input type="search" id="input1" onchange="search1()" class="form-control">
                            <ul id="select1" style="height: 300px;overflow-y: auto;padding-left: 3px;" class="selitem">
                                #foreach( $item in $conSellerGoodsList)
                                    <li onclick="testLi('$!{item.goodsNo}')">
                                        <input type="checkbox" name="loc" id="$!{item.goodsNo}"
                                               value="$!{item.goodsNo}"><span>$!{item.goodsName}</span></li>
                                #end
                            </ul>
                        </div>
                        <div class="col-sm-1" style="text-align: center;">
                            <div>
                                <div style="margin-top: 40px;margin-bottom: 20px;">
                                    <span id="add"><input type="button" class="btn btn-primary" value=">>"/></span>
                                </div>
                                <div>
                                    <span id="remove"><input type="button" class="btn btn-primary" value="<<"/></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5 panel-body panel panel-default" style=" 320px;">
                            <input type="search" id="input2" class="form-control">
                            <ul id="select2" style="height: 300px;overflow-y: auto;padding-left: 3px;" class="selitem">
    
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="conStaticTemplate_sumbit222" type="button" class="btn btn-primary" onclick="saveStaticGoods()">
                        保存
                    </button>
                    <a href="#" class="btn btn-info" data-dismiss="modal">关闭</a>
                </div>
            </form>
        </div>
    </div>
    <script src="${assetModule}/static/script/conStaticTemplate/conStaticTemplateEdit.js"></script>
    <script type="text/javascript">
        function testLi(id) {
            $("#" + id + "").prop("checked", !$("#" + id + "").prop('checked'));
        }
    
        // 保存静态模板商品
        function saveStaticGoods() {
            // 模板名称
            var temName = $("#temName").val();
            var arrayColumn =[];
            $("#select2 input:checkbox[name='loc']").each(function () {
                var itemv = $(this).val();
                arrayColumn.push(itemv);
            });
            console.log(arrayColumn);
    
            // 调用ajax
            jQuery.ajax({
                type: "post",
                url: "conStaticTemplate/saveStaticGoods.do",
                dataType: "json",
                data: {listGoods:arrayColumn,temName:temName},
                traditional: true,
                success: function (data) {
                    console.log(data);
                    if (data.resultCode == 1) {
                        alert("修改成功")
                    } else {
                        alert("修改失败")
                    }
                    return true;
                }
            });
        }
    </script>

    后台

    @RequestMapping(value = "/saveStaticGoods.do")
    public @ResponseBody
    Object saveStaticGoods(HttpServletRequest request, String[] listGoods, String temName) {
    List<String> lsitBoxGoods = Arrays.asList(listGoods);
    System.out.println(temName);
    return "";
    }
  • 相关阅读:
    STL——pair
    STL——stack
    Python学习之编程基础
    开学第一课,课课有总结
    DNS域名解析
    FTP文件传输服务
    DHCP原理及配置
    Linux中配置网卡
    indoe与block解析
    Linux系统安全管理
  • 原文地址:https://www.cnblogs.com/honghong75042/p/12559903.html
Copyright © 2011-2022 走看看