穿梭框layui.transfer
冰貂主人
2024-04-09 15:59:09
0

<div id="test1" class="demo-transfer"></div>
<script type="text/javascript">
var leftNum=0;
        layui.use(['form','transfer'],function(){
            var form=layui.form;
            var transfer=layui.transfer;
            //transfer基础效果
            transfer.render({
                elem: '#test1'
                ,data: {$member}
                ,title: ['待选', '已选']
                ,showSearch: true
                ,id:'key123'
                ,onchange: function(data, index){
                      if(data.length>1){
                        layer.msg('只能选择一条数据',function(){
                            transfer.reload('key123', {
                               value:''
                            });
                        });
                    }
                    if(index==0){
                        leftNum+=1;
                        if(leftNum>=2){
                            leftNum=0;
                            transfer.reload('key123', {
                               value:''
                            });
                            layer.msg('只能选中一个,请重新选择',{icon:6},function(){
                                window.location.reload();
                            })                           
                        }
                    }

                }
            })
            form.on('submit(myform)',function(obj){
                 var getData = transfer.getData('key123'); //获取右侧数据               
                obj.field.member_id = getData[0].value ;
                fields=JSON.stringify(obj.field);
                $.ajax({
                    url:'insert'
                    ,type:'post'
                    ,data:{'val':fields}                 
                    ,success:function(data){                   
                    }
                })
                return false;
            })
      })

</script>

//加载添加页面
    public function add(){
        //从数据库获取所有会员的信息,使用闭包查询
        $member=Db::name('member')     
        ->field('id,nickname')
        ->select();
        foreach($member as &$v){
            $v['value']=$v['mid'];
            $v['title']=$v['nickname'];

            unset($v['mid']);
            unset($v['nickname']);
        }
        // 分配变量,输出数组
        $this->assign(['member'=>json_encode($member)]);
        return view();

    }

只能选择一条数据的第二种办法:
,onchange: function(data, index){
if(index==0){
                        rightnum++;
                        if(rightnum==1){
                           $('.layui-transfer-active button').first().hide();
                           rightnum=0;
                        }
                    }
                    if(index==1){
                        leftnum++;
                        if(leftnum==1){
                           $('.layui-transfer-active button').first().show();
                           leftnum=0;
                        }
                    }
}

相关内容

穿梭框layui.tran...
div id=test1 class=demo-transfer/...
2024-04-09 15:59:09
tp5和layui表单提交...
form class=layui-form layui-form-...
2024-04-09 14:45:31
文本框自动高度textar...
在文本框中输入文字时,文本框会自动增加高度。
2024-03-21 11:26:37
fastadmin 顶部搜...
fastadmin 顶部搜索selectpage
2024-03-05 16:07:06
chrome输入框记住账号...
chrome输入框记住账号密码后背景色改变问题
2024-01-17 17:59:03
tp5中layui for...
div class=layui-form-item label c...
2023-11-22 14:43:43

热门资讯

JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...