路由

//商品模型展示的路由

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. Redis 源码简洁剖析 07 - main 函数启动
			
    前言 问题 阶段 1:基本初始化 阶段 2:检查哨兵模式,执行 RDB 或 AOF 检测 阶段 3:运行参数解析 阶段 4:初始化 server 资源管理 初始化数据库 创建事件驱动框架 阶段 5:执 ...
    
			
    2. 
						
  2. 对线面试官，凭借nginx能一战封神吗？
			
    面试官:小伙子,你对nginx熟悉吗? 我:当然熟悉了,请听我慢慢道来. 心里想,我能吊打面试官吗?今天非得灭一灭面试官的威风,平时都被怼的狗血淋头. 面试官:就你那点花花肠子,咱还不清楚. 我:.. ...
    
			
    3. 
						
  3. web项目报405错误
			
    错误:报405错误 原因:405错误是由于servlet类继承了HttpServlet,但是没有重写里面的doGet()和doPost()方法导致的,没有重写,就会访问父类,及原生的HttpServe ...
    
			
    4. 
						
  4. JVM学习五：性能监控工具
			
    一.系统性能监控 系统性能工具用于确定系统运行的整体状态,基本定位问题所在. Linux – uptime • 系统时间 • 运行时间 n 例子中为7分钟 • 连接数 n 每一个终端算一个连接 • 1 ...
    
			
    5. 
						
  5. swift语言学习博文精选
			
    初探swift语言的学习笔记九(OC与Swift混编) Objective-C 与 Swift 混编之路 Swift项目兼容Objective-c问题汇总
    
			
    6. 
						
  6. Java基础复习(六)
			
    1. 接口的实现类中的实现接口中的抽象方法的方法必须为public,为什么? 接口中所有的方法与变量都默认是 public 的,在接口中可以不写出来.但在实现类中,如果不明写的话,就变成了 frien ...
    
			
    7. 
						
  7. IOS tableView 滑动删除与排序功能
			
    // // ViewController.m // 0429 // // Created by apple on 15/4/29. // Copyright (c) 2015年 gense. All  ...
    
			
    8. 
						
  8. C++改变数组长度
			
    C++改变数组长度 代码 //改变数组长度 #ifndef CHANGELENGTH1D_H #define CHANGELENGTH1D_H #include<stdexcept> #i ...
    
			
    9. 
						
  9. Rock Pi开发笔记（二）：入手Rock Pi 4B plus（基于瑞星微RK3399）板子并制作系统运行
			
    前言   入手rock pi 4b plus板子,查看具体的实物,然后制作系统,刷系统,让摇滚派的ubuntu系统运行起来.   Rock Pi 4B plus 介绍   ROCK Pi 4 是 Ra ...
    
			
    10. 
						
  10. Solution -「ARC 126E」Infinite Operations
			
    \(\mathcal{Description}\)   Link.   给定序列 \(\{a_n\}\),定义一次操作为: 选择 \(a_i<a_j\),以及一个 \(x\in\mathbb R ...
    
			
    11.