穿梭框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;
                        }
                    }
}

相关内容

《SG15时代PHP实战案...
摘要:本文分享了SG15时代PHP在Web开发中的应用案例,包括电...
2025-01-24 13:00:49
《SG15时期PHP优化技...
本文介绍了SG15时期PHP的优化技术及最佳实践,包括代码、配置和...
2025-01-24 12:46:42
《从PHPSG15到业务应...
本文详细阐述了从PHPSG15到业务应用升级的全过程,包括现状分析...
2025-01-24 11:46:38
PHP框架与库的最佳实践
摘要:选择合适PHP框架与库对Web开发至关重要,本文探讨如何选择...
2025-01-13 05:46:47
轻量级PHP并发处理框架设...
本文介绍了一个轻量级PHP并发处理框架的设计与实现。该框架基于事件...
2025-01-02 22:23:41
GRPC在PHP中的应用案...
摘要:本文介绍了gRPC在PHP中的应用案例,包括服务接口定义、生...
2024-12-29 17:46:48

热门资讯

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