路由

//商品模型展示的路由

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. HTTPS 原理详解 （转）
			
    HTTPS(全称:HyperText Transfer Protocol over Secure Socket Layer),其实 HTTPS 并不是一个新鲜协议,Google 很早就开始启用了,初衷 ...
    
			
    2. 
						
  2. Java基础复习(四)
			
    1.Integer与int的区别 int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Integer是java为int提供的封装类.int的默认值为0,而Integer的默 ...
    
			
    3. 
						
  3. serverless入门介绍
			
    1.什么是serverless Serverless 架构作为一种新型的云计算范式,是云原生时代一种革命性的架构,颠覆了传统意义上对软件应用部署和运营的认识.本节对 Serverless 架构的基本概 ...
    
			
    4. 
						
  4. LeetCode随缘刷题之回文数
			
    package leetcode.day_01_30; /** * 给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false . * <p> * 回文数是指正 ...
    
			
    5. 
						
  5. 联邦学习：按Dirichlet分布划分Non-IID样本
			
    我们在<Python中的随机采样和概率分布(二)>介绍了如何用Python现有的库对一个概率分布进行采样,其中的dirichlet分布大家一定不会感到陌生.该分布的概率密度函数为 \[P( ...
    
			
    6. 
						
  6. 从 MMU 看内存管理
			
    在计算机早期的时候,计算机是无法将大于内存大小的应用装入内存的,因为计算机读写应用数据是直接通过总线来对内存进行直接操作的,对于写操作来说,计算机会直接将地址写入内存:对于读操作来说,计算机会直接读取 ...
    
			
    7. 
						
  7. 操作系统发展史 & 进程
			
    今日内容 UDP协议 操作系统发展史 进程 单核情况下的进程调度 进程三状态图 同步异步 阻塞非阻塞 内容详细 一.UDP协议 1.什么是UDP协议 UDP是传输层的协议,功能即为在IP的数据报服务之 ...
    
			
    8. 
						
  8. C#字符串Base64编解码
			
    C#字符串Base64编解码 首先讲一下什么是Base64编码所谓Base64就是一种基于64个可打印字符来表示二进制数据的方法.Base64编码是从二进制到字符的过程,常用于在网络上传输不可见字符( ...
    
			
    9. 
						
  9. 我们一起来学Shell - shell的数组
			
    文章目录 什么是数组 数组中常用变量 数组的定义 小括号定义数组变量 小括号加键值对定义数组变量 分别定义数组变量 动态地定义数组变量 数组赋值的切片 遍历数组 关联数组 我们一起来学Shell -  ...
    
			
    10. 
						
  10. 记录一次elasticsearch-5.6.4宕机排查经历
			
    犯罪现场~~ es: 三节点,配置相同 内存: 248G CPU: 没注意看 磁盘: 2T data: 380G左右 indices: 近9800条 在下才疏学浅,目前跟着大佬学习,这个问题还没解决, ...
    
			
    11.