路由

//商品模型展示的路由

Route::get('type','/pyg/good/listType');

//将type_id传送至/pyg/good/addType的路由

Route::get('addType','/pyg/good/addType');

思路：1先去模型找见商品的类型

模型代码：

<?php

namespace app\pyg\model;

use think\Model;

class GoodAddModel extends Model

{

    //连接品优购商品类型表

    protected $table='pyg_type';

//提取全部数据

    public static function listType(){

        return self::select();

    }

}

控制器代码实例化模型，通过json方式发送数据至HTML页面，ajax进行渲染数据：

控制器代码：

//    展示商品类型

    public function listType()

    {

//调用模型，将数据通过json返回前端页面

        $data = GoodAddModel::listType();

        return getJsonDate(200, '商品模型展示', $data);

    }

HTML代码<script></script>代码

 //先将商品模型的渲染出来

        $.ajax({

            'url':"/type",//发送的路由地址

            'type':'get',

            'dataType':'json',

            'success':function(response){

                if(response.code !=200){

                    alert(response.msg);return;

                }

                var str = '<option value="">请选择商品模型</option>';

                $.each(response.data, function(i,v){

                    str += '<option value="' + v.id + '">' + v.type_name + '</option>';

                });

                $('#goods_type').html(str);//找见select id=goods_type，进行替换

            }

        });

HTML代码<body></body>代码

 <div class="row cl">

                <label class="form-label col-xs-4 col-sm-2">*<span class="c-red"></span>商品模型：</label>

                <div class="formControls col-xs-8 col-sm-9">

                        <span class="select-box" style="width:150px;">
//替换

                            <select name="type_id" class="select" size="1" id="goods_type">

                                <option value="0">选择商品模型</option>

                            </select>

                        </span>

                </div>

            </div>

给select 设置

change事件
  //商品模型添加

        $('#goods_type').change(function(){

            //获取选中类型商品的id

            var type_id = $(this).val();

            if(type_id == '') return;

            //发送ajax请求

            $.ajax({

                'url':"/addType",

                'data':{type_id:type_id},

                'type':'get',

                'dataType':'json',

                'success':function(response){

                    console.log(response);

                    //根据获取的数据，拼接html代码，显示到页面

                    var attrs =response.data.attribute;

                    var specs =response.data.spec;

                    console.log(attrs);

                    console.log(specs);

                    //遍历数组，一条一条数据拼接处理

                    var spec_html = '<tr><td colspan="2">商品规格</td></tr>';

                    $.each(specs, function(i, v){

                        //i 是数组中的索引，v是一条数据（json格式对象）

                        //属性名称

                        spec_html += '<tr class="spec_name" spec_id="'+v.id+'">';

                        spec_html += '<td spec_name="' + v.spec_name + '">' + v.spec_name + '：</td>';

                        spec_html += '<td>';

                        $.each(v.spec_value, function(index,value){

                            spec_html += '<button type="button" spec_value_id="' + value.id + '" class="btn btn-default">' + value.spec_value + '</button> ';

                        });

                        spec_html += '</td>';

                        spec_html += '</tr>';

                    });

                    //将拼接好的html字符串，放到页面显示

                    $('#goods_spec_table1').find('tbody').html(spec_html);

                    var attrs_html = '<tr><td colspan="2"><b>商品属性</b>：  </td></tr>';

                    $.each(attrs, function(i, v){

                        //i 是数组中的索引，v是一条数据（json格式对象）

                        //属性名称

                        attrs_html += '<tr class="attr_name" attr_id="'+v.id+'">';

                        attrs_html += '<td attr_name="' + v.attr_name + '">' + v.attr_name + '：</td>';

                        attrs_html += '<td><input type="hidden" name="attr['+v.id+'][attr_name]" value="'+v.attr_name+'"><input type="hidden" name="attr['+v.id+'][id]" value="'+v.id+'">';

                        console.log(attrs_html);

                        console.log(v.attr_values.length);

                        if(v.attr_values.length == 0){

                            attrs_html += '<input type="text" name="attr['+v.id+'][attr_value]" value="" class="input-text">';

                        }else{

                            attrs_html += '<select name="attr['+v.id+'][attr_value]" class="select"><option value="">请选择</option>';

                            var attr_values= v.attr_values.split(',');

                            $.each(attr_values, function(index,value){

                                attrs_html += '<option value="' + value + '">' + value + '</option>';

                            });

                            attrs_html += '</select>';

                        }

                        attrs_html += '</td>';

                        attrs_html += '</tr>';

                    });

                    //将拼接好的html字符串，放到页面显示

                    $('#goods_attr_table').find('tbody').html(attrs_html);

                }

            });

        });

        UE.getEditor('editor');

    });

</script>

<script>

    /** 商品规格相关 js*/

    $(function(){

        $('#goods_spec_table1').on('click', 'button',function(){

            $(this).toggleClass('btn-success').toggleClass('btn-default');

            var spec_data = {};

            $('.spec_name').find('button.btn-success').each(function(i,v){

                var index = $(v).closest('tr').index();

                var spec_id = $(v).closest('tr').attr('spec_id');

                var spec_name = $(v).closest('tr').find('td:first').attr('spec_name');

                var spec_value_id = $(v).attr('spec_value_id');

                var spec_value = $(v).text();

                if(spec_data[index] == undefined) spec_data[index] = [];

                spec_data[index].push({spec_id:spec_id,spec_name:spec_name,spec_value_id:spec_value_id, spec_value:spec_value});

            });

            var spec_arr = [];

            for(var i in spec_data){

                spec_arr.push(spec_data[i]);

            }

            //计算笛卡尔积

            var result = spec_arr[0];

            for(var i=1; i<spec_arr.length; i++){

                var temp = [];

                $.each(result, function(j,v1){

                    $.each(spec_arr[i], function(k,v2){

                        if($.isArray(v1)){

                            v1.push(v2);

                            temp.push(v1);

                        }else{

                            temp.push([v1, v2])

                        }

                    });

                });

                result = temp;

            }

            var html = '';

            //拼接第一行

            html += '<tr>';

            if($.isArray(result[0]) == false){

                html += '<td><b>' + result[0].spec_name + '</b></td>';

            }else{

                $.each(result[0],function(i,v){

                    html += '<td><b>' + v.spec_name + '</b></td>';

                });

            }

            html += '<td><b>购买价</b></td>';

            html += '<td><b>成本价</b></td>';

            html += '<td><b>库存</b></td>';

            html += '<td><b>操作</b></td>';

            html += '</tr>';

            //拼接批量填充行

            html += '<tr>';

            if($.isArray(result[0]) == false){

                html += '<td><b></b></td>';

            }else{

                $.each(result[0],function(i,v){

                    html += '<td><b></b></td>';

                });

            }

            html += '<td><input id="item_price" value="0"></td>';

            html += '<td><input id="item_cost_price" value="0"></td>';

            html += '<td><input id="item_store_count" value="0"></td>';

            html += '<td><button id="item_fill" type="button" class="btn btn-success">批量填充</button></td>';

            html += '</tr>';

            //继续拼接

            $.each(result,function(i,v){

                html += '<tr>';

                if($.isArray(v) == false){

                    var value_ids = v.spec_value_id;

                    var value_names = v.spec_name + ':' + v.spec_value;

                    html += '<td>' + v.spec_value + '</td>';

                }else{

                    var value_ids = '';

                    var value_names = '';

                    $.each(v,function(i2,v2){

                        html += '<td>' + v2.spec_value + '</td>';

                        value_ids += v2.spec_value_id + '_';

                        value_names += v2.spec_name + ':' + v2.spec_value + ' ';

                    });

                    value_ids = value_ids.slice(0, -1);

                    value_names = value_names.slice(0, -1);

                }

                html += '<td><input class="item_price" name="item['+value_ids+'][price]" value="0"><input type="hidden" name="item['+value_ids+'][value_names]" value="'+value_names+'"><input type="hidden" name="item['+value_ids+'][value_ids]" value="'+value_ids+'"></td>';

                html += '<td><input class="item_cost_price" name="item['+value_ids+'][cost_price]" value="0"></td>';

                html += '<td><input class="item_store_count" name="item['+value_ids+'][store_count]" value="0"></td>';

                html += '<td><button type="button" class="btn btn-default delete_item">移除</button></td>';

                html += '</tr>';

            });

            $('#spec_input_tab').find('tbody').html(html);

        });

        $('#goods_spec_table2').on('click', '#item_fill', function(){

            var item_price = $('#item_price').val();

            var item_cost_price = $('#item_cost_price').val();

            var item_store_count = $('#item_store_count').val();

            $('.item_price').val(item_price);

            $('.item_cost_price').val(item_cost_price);

            $('.item_store_count').val(item_store_count);

        });

        $('#goods_spec_table2').on('click', '.delete_item', function(){

            $(this).closest('tr').remove();

        });

    })

</script>

</body>

</html>

商品类型模型代码：将商品类型进行关联规格模型，规格值模型，属性模型

《1》
<?php

namespace app\pyg\model;

use think\Model;

class Attribute extends Model

{

    //商品模型属性表

    protected $table = 'pyg_attribute';

}

《2》

<?php

namespace app\pyg\model;

use think\Model;

class Spec extends Model

{

    //

    protected $table = 'pyg_spec';

//    链接规格值表

    public function specValue()

    {

        return $this->hasMany('SpecValue', 'spec_id', 'id');

    }

}

《3》：

<?php

namespace app\pyg\model;

use think\Model;

class SpecValue extends Model

{

    //规格值表

    protected $table='pyg_spec_value';

}

主模型（商品模型表）





<?php

namespace app\pyg\model;

use think\Model;

class GoodAddModel extends Model

{

    //连接品优购商品类型表

    protected $table='pyg_type';

//关联属性模型，规格模型

    public  function  attribute(){

        return $this->hasMany('Attribute','type_id','id');

    }

    public  function  spec(){

        return $this->hasMany('Spec','type_id','id');

    }

}






控制器代码：




//    添加规格，属性，根据ajax 传过来的$type_id 添加

    public function addType()

    {

        //接受前端ajax发送的type_id

        $type_id=\request()->get('type_id');

     $data=GoodAddModel::with('attribute,spec,spec.specValue')->find($type_id);

        return getJsonDate(200, '商品模型展示', $data);

    }




页面效果




 


 
												


											
tp5 商品模型的添加展示的更多相关文章
	

    
								
  1. JAVAEE——宜立方商城09：Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存
		
    1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法  ...
    
		
    2. 
						
  2. tp5  商城商品模型删除
		
    1:控制器代码 public function delete($id) { //验证id是否正确 $id if (!intval($id)) { return getJsonData(10010, ' ...
    
		
    3. 
						
  3. YY一下淘宝商品模型
		
    淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...
    
		
    4. 
						
  4. 电商系统中的商品模型的分析与设计—续
		
    前言     在<电商系统中的商品模型的分析与设计>中,对电商系统商品模型有一个粗浅的描述,后来有博友对货品和商品的区别以及属性有一些疑问.我也对此做一些研究,再次简单的对商品模型做一个介 ...
    
		
    5. 
						
  5. tp5   商城模型id详情接口
		
    1:创建模型 2:定义关联模型 <?php namespace app\common\model; use think\Model; use traits\model\SoftDelete; c ...
    
		
    6. 
						
  6. [Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则
		
    目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...
    
		
    7. 
						
  7. 微信小程序结合后台数据管理实现商品数据的动态展示、维护
		
    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...
    
		
    8. 
						
  8. {django模型层(二)多表操作}一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询、分组查询、F查询和Q查询
		
    Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 xxx 七 ...
    
		
    9. 
						
  9. Asp.net MVC]Asp.net MVC5系列——在模型中添加
		
    目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 不使用pvc的方式在K8S中部署apisix-gateway
			
    不使用pvc的方式在K8S中部署apisix-gateway 简介 我的apisix使用etcd作为数据存储服务器,官方的使用pvc方式或者docker-compose的方式,对于新手不太友好,本篇是 ...
    
			
    2. 
						
  2. AT3913 XOR Tree
			
    经过长时间的思考,我发现直接考虑对一条链进行修改是很难做出本题的,可能需要换一个方向. 可以发现本题中有操作的存在,是没有可以反过来做的做法的,因此正难则反这条路应该走不通. 那么唯一的办法就是简化这 ...
    
			
    3. 
						
  3. Redis-46面试题
			
    1.什么是 Redis?简述它的优缺点? Redis 的全称是:Remote Dictionary.Server,本质上是一个 Key-Value 类型的内存数据库,很像 memcached,整个数据 ...
    
			
    4. 
						
  4. NSDictionary基本概念
			
    1.NSDictionar基本概念 什么是NSDictionary NSDictionary翻译过来叫做"字典" 日常生活中,"字典"的作用:通过一个拼音或者汉 ...
    
			
    5. 
						
  5. 学习Java Web篇：MVC设计模式
			
    一.MVC设计模式 1.什么是MVC模式 1.1.MVC -- Model View Controller模型视图控制器 1.2.Model:模型 一个功能 一般用JavaBean 1.3.View: ...
    
			
    6. 
						
  6. iOS 屏幕录制实现
			
    iOS 屏幕录制实现 目录 iOS 屏幕录制实现 录屏API版本变化 App内部录制屏幕 录音麦克风声音 App内部录屏直播 Bonjour APP广播端实现 广播端App(直播平台)的实现 iOS1 ...
    
			
    7. 
						
  7. Android SugarORM(2)
			
    Android Sugar ORM (2) Android Sugar ORM 实体 1. 创建一个实体类 Sugar ORM在创建一个实体的时候, 仅需要使这个实体类继承于SugarRecord即可 ...
    
			
    8. 
						
  8. Acme-https证书申请
			
    Linux下使用acme.sh 配置https 免费证书 简单来说acme.sh 实现了 acme 协议, 可以从 let's encrypt 生成免费的证书. acme.sh 有以下特点: 一个纯粹 ...
    
			
    9. 
						
  9. Nginx基本简述
			
    一.Nginx简介 Nginx是一个开源且高性能.可靠的HTTP中间件.代理服务. 开源:直接获取源代码 高性能:支持海量高并发 1.nginx应用场景: 静态处理   (对静态页面的处理,不管是ht ...
    
			
    10. 
						
  10. 【转】VMWare中的Host-only、NAT、Bridge
			
    背景:A是本机,A1,A2是虚拟机,B是外部联网的机器 host-only(主机模式): A可以和A1,A2互通,A1,A2 -> B不可以,B -> A1,A2不行 bridge(桥接模 ...
    
			
    11.