PHP+ajax+layui实现双重列表的动态绑定

需求：商户下面有若干个门店，每个门店都需要绑定上收款账户

方案一：每个门店下面添加页面，可以选择账户去绑定。（难度：简单）

方案二：从商户进入，可以自由选择门店，以及账户，动态绑定（难度：较复杂）

页面：

        

实现方式，通过选择上面的门店，打勾之后，在选择账户里面的账户，即可实现下面的列表的动态返回，然后点击保存之后，即可将门店和账户的绑定规则传到后台，由后台统一处理

这里页面显示的字符串本来是可以由后台返回，然后js动态拼接的，但是，考虑到js写逻辑过于复杂，操作性不如PHP简易，所以由后台PHP，拼接字符串，然后返回的拼接html代码，直接显示

html代码

{extend name="base" /}
{block name="css"}


{/block}
{block name="body"}
        

            

                

                	
					

						商户
						
{$shop_info['title']}
					

					

                        请选择门店

                        	 
                        
                        
                        {foreach name="list" item="vo2"}
                         
                            
            
                        {/foreach}

                    
                    

                    

                    

						账户选择
						

							
								请选择账户
								{volist name="adapay" id="v"}
								{$v['name']}
								{/volist}
							
						
					
					

						选择情况
						

							
						
					
					

                        
                        清空
                        保存
					
                
            
        
{/block}
{block name="js"}






{/block}

{block name="script"}

{/block}

后端代码

public function return_data()
    {
        $request = $this->request-> param();
        // dump($request);die; 
        //查询出所要拼接的字符串的项
        $s_ids = $request['s_id'];
        $where['id'] = array('in',$s_ids);
        $store = Db::name('shop_store')->where($where)->select();

        $adapay = Db::name('adapay_user')->where(['id'=> $request['adapay']])->find();

        $string1 = '

                                ';
                                        
        $string3 = '

                                    

                                        

                                            
门店
                                            
账户
                                            
操作
                                        
                                    
                                    

                   
                 
';


        //对新旧字符串进行处理和分析
        //拼接字符串
        $string2 = '';


        //第一次传值
        if(!isset($request['s_id_old']) && !isset($request['adapay_old'])){
            $id = -1;
            foreach($store as $value){
                
                $string2 = $string2 . ''.$value["title"].''.$adapay["name"].'删除';

                    $id -- ;
            }
        //后续传值
        }else{
            //拼接旧的关联关系
            //如果是新的有,旧的没有的,就直接以新的为标准
            $new_list1=[];

            $min = min($request['ids']);//此时需要将原来的数据都拿过来,然后取最大的,在继续增加变化

            foreach($s_ids as $k => $v){
                if (!in_array($s_ids[$k],$request['s_id_old'])) {
                    $min --;
                    $new_list1['store_id'] =$s_ids[$k];
                    $new_list1['adapay_id'] =$request['adapay'];
                    $new_list1['ids'] =$min;
                    $new_list[] = $new_list1;
                }
                
            }

            //如果两个都有,也就是有需要修改的,会以新的为准
            $new_list2 = [];
            foreach ($s_ids as $key => $value) {
                foreach ($request['s_id_old'] as $key2 => $value2) {
                    
                    if($s_ids[$key] == $request['s_id_old'][$key2]){
                        $new_list2['store_id'] = $request['s_id_old'][$key2];
                        $new_list2['adapay_id'] = $request['adapay'];
                        $new_list2['ids'] = $request['ids'][$key2];
                        $new_list[] = $new_list2;
                        
                    }

                }
            }

            $new_list3 = [];
            //如果是新的没有,旧的有,就按照旧的为准
            foreach ($request['s_id_old'] as $key => $value) {
                if (!in_array($request['s_id_old'][$key],$request['s_id'])) {
                    $new_list3['store_id'] =$request['s_id_old'][$key];
                    $new_list3['adapay_id'] =$request['adapay_old'][$key];
                    $new_list3['ids'] =$request['ids'][$key];
                    $new_list[] = $new_list3;
                }
                 
            }

            foreach ($new_list as $key => $value) {

                $store_info = Db::name('shop_store')->where(['id'=>$new_list[$key]['store_id']])->find();
                $adapay_info = Db::name('adapay_user')->where(['id'=>$new_list[$key]['adapay_id']])->find();
                
                $id = $new_list[$key]['ids'];
                $string2 = $string2 . ''.$store_info["title"].''.$adapay_info["name"].'删除';
            }
                
        }




        

        $string = $string1.$string2.$string3;

        $res['code'] = 200;
        $res['data'] = $string;

        $this->ajaxReturn($res);
        
    }

    //修改时候进去,返回已经修改好的情况
    public function return_data2()
    {   
        $request = $this->request-> param();
        $where['shop_id'] = $request['shop_id'];
        $where['is_delete'] = 0;
        $list = Db::name('shop_adapay_user')->where($where)->select();

        $string1 = '

                                ';
                                        
        $string3 = '

                                    

                                        

                                            
门店
                                            
账户
                                            
操作
                                        
                                    
                                    

                   
                 
';

        $string2 = '';
        foreach ($list as $key => $value) {
            $store_info = Db::name('shop_store')->where(['id'=>$list[$key]['store_id']])->find();
            $adapay_info = Db::name('adapay_user')->where(['id'=>$list[$key]['member_id']])->find();

            $id = $list[$key]['id'];

            $string2 = $string2 . ''.$store_info["title"].''.$adapay_info["name"].'删除';


        }


        $string = $string1.$string2.$string3;

        $res['code'] = 200;
        $res['data'] = $string;

        $this->ajaxReturn($res);
    }

    //保存门店和账户的关联情况
    public function associate_save()
    {
        $request = $this->request-> param();
        // dump($request);die;
        
        $s_id_old = isset($request['s_id_old'])?$request['s_id_old']:[];
        $adapay_old = isset($request['adapay_old'])?$request['adapay_old']:[];
        $num = count($s_id_old);

        for ($i=0; $i < $num; $i++) { 
            $value['shop_id'] = $shop_id;
            $value['store_id'] = $s_id_old[$i];
            $value['member_id'] = $adapay_old[$i];

            //查询出关联的银行卡id
            $where_bank['member_id'] = $adapay_old[$i];
            $where_bank['is_default'] = 1;
            $bank_info = Db::name('shop_account')->where($where_bank)->find();
            if(empty($bank_info)){
                $this->error('请先添加账户对应银行卡!');
            }

            $value['account_id'] = $bank_info['id'];

            $where['shop_id'] = $shop_id;
            $where['store_id'] = $s_id_old[$i];
            $where['is_delete'] = 0;
            //先查询是否有了,有了就修改,没有在插入
            $is_have = Db::name('shop_adapay_user')->where($where)->find();

            if (empty($is_have)) {
                $res = Db::name('shop_adapay_user')->insertGetId($value);
            }else{
                //判断其他字段是否相等,相等就跳过,不相等就去修改
                if($is_have['member_id'] !== $value['member_id'] || $is_have['account_id'] !== $value['account_id']){
                    $res = Db::name('shop_adapay_user')->where(['id'=>$is_have['id']])->update($value);
                }else{
                    $res = true;
                }
            }

        }

        //添加判断,如果是传过来的值没有,但是数据库有,那就删除,修改is_delete为1
        $where_is['is_delete'] = 0;
        $where_is['shop_id'] = $request['shop_id'];
        $list = Db::name('shop_adapay_user')->where($where_is)->select();
        foreach ($list as $key => $value) {
            if(!in_array($list[$key]['store_id'],$request['s_id_old'])){
                $res2 = Db::name('shop_adapay_user')->where(['id'=>$list[$key]['id']])->update(['is_delete'=>1]);
            }
        }

        if($res){
            $this->success('操作成功!');
        }else{
            $this->error('操作失败!');
        }
    }


    //删除功能
    public function association_del()
    {
        $request = $this->request-> param();
        $id_jian = $request['id'];
        // dump($request);die; 
        //查询出所要拼接的字符串的项
        $s_ids = isset($request['s_id'])?$request['s_id']:[];
        $where['id'] = array('in',$s_ids);
        $store = Db::name('shop_store')->where($where)->select();

        $adapay = Db::name('adapay_user')->where(['id'=> $request['adapay']])->find();

        $string1 = '

                                ';
                                        
        $string3 = '

                                    

                                        

                                            
门店
                                            
账户
                                            
操作
                                        
                                    
                                    

                   
                 
';


        //对新旧字符串进行处理和分析
        //拼接字符串
        $string2 = '';


        //第一次传值
        if(!isset($request['s_id_old']) && !isset($request['adapay_old'])){
            $id = -1;
            foreach($store as $value){
                
                $string2 = $string2 . ''.$value["title"].''.$adapay["name"].'删除';

                    $id -- ;
            }
        //后续传值
        }else{
            //拼接旧的关联关系
            //如果是新的有,旧的没有的,就直接以新的为标准
            $new_list1=[];


            //如果两个都有,也就是有需要修改的,会以新的为准
            $new_list2 = [];
            foreach ($s_ids as $key => $value) {
                foreach ($request['s_id_old'] as $key2 => $value2) {
                    
                    if($s_ids[$key] == $request['s_id_old'][$key2]){
                        $new_list2['store_id'] = $request['s_id_old'][$key2];
                        $new_list2['adapay_id'] = $request['adapay'];
                        $new_list2['ids'] = $request['ids'][$key2];
                        $new_list[] = $new_list2;
                        
                    }

                }
            }

            $new_list3 = [];
            //如果是新的没有,旧的有,就按照旧的为准
            foreach ($request['s_id_old'] as $key => $value) {
                if (!in_array($request['s_id_old'][$key],$s_ids)) {
                    $new_list3['store_id'] =$request['s_id_old'][$key];
                    $new_list3['adapay_id'] =$request['adapay_old'][$key];
                    $new_list3['ids'] =$request['ids'][$key];
                    $new_list[] = $new_list3;
                }
                 
            }

            foreach ($new_list as $key => $value) {

                $store_info = Db::name('shop_store')->where(['id'=>$new_list[$key]['store_id']])->find();
                $adapay_info = Db::name('adapay_user')->where(['id'=>$new_list[$key]['adapay_id']])->find();
                
                $id = $new_list[$key]['ids'];
                if($id !== $id_jian){
                    $string2 = $string2 . ''.$store_info["title"].''.$adapay_info["name"].'删除';
                }
                
            }
                
        }

        

        $string = $string1.$string2.$string3;

        $res['code'] = 200;
        $res['data'] = $string;

        $this->ajaxReturn($res);
    }

关联表的数据表结构

可能有其他的办法，我这个也或许不是最优解，因为本该前端处理的dom数据，由PHP处理返回了

另外，如果是前端直接写在页面上的HTML代码，一些，onclick等事件，可以直接绑定，进行监听操作，但是如果是由拼接上的字符串，动态显示的，类似于，富文本内容，则需要加上限定

需要把代码都放在$(document)的后面才能执行，不能直接写js代码

 $(document).on('click', '.delete_adapay', function() {
    //内容
}