路由

//商品模型展示的路由

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. 【VUE】vue中遍历数组和对象
			
    一.遍历对象 对象数据 cities:{ "A":[{ "id": 56, "spell": "aba", " ...
    
			
    2. 
						
  2. node.js中的fs.appendFile方法使用说明
			
    方法说明: 该方法以异步的方式将 data 插入到文件里,如果文件不存在会自动创建.data可以是任意字符串或者缓存. 语法: 代码如下: fs.appendFile(filename, data,  ...
    
			
    3. 
						
  3. shell中的括号（小括号，大括号/花括号）
			
    在这里我想说的是几种shell里的小括号,大括号结构和有括号的变量,命令的用法,如下: 1.${var} 2.$(cmd) 3.()和{} 4.${var:-string},${var:+string ...
    
			
    4. 
						
  4. Java高质量博文链接集合
			
    1. 看完这个,Java IO从此不在难 https://www.jianshu.com/p/715659e4775f 2. Java 8 中的 Streams API 详解 https://www. ...
    
			
    5. 
						
  5. iOS App程序内多语言国际化实现 By HL
			
    iOS 多语言设置有很多方式可以实现,之前在做手机思埠1.0时,就对app进行了多语言设置,当时看到很多方法,比如用plist等方式保存键值对的,不过还是用Localisator来国际化最方便 1.添 ...
    
			
    6. 
						
  6. 基于redis5的redis cluster部署
			
    一.环境规划 #准备六台主机,地址如下 10.0.0.8 ---> master1 10.0.0.18 ---> master2 10.0.0.28 ---> master3 10. ...
    
			
    7. 
						
  7. sublime运行错误
			
      这是由于没有保存文档导致   说明: [Finished in 19.4s with exit code 1]-表示执行时间 [shell_cmd: python3 -u "/Volum ...
    
			
    8. 
						
  8. 教你用Elastic Search：运行第一条Hello World搜索命令
			
    摘要:Elastic Search可实时对数据库进行全文检索.处理同义词.从同样的数据中生成分析和聚合数据. 本文分享自华为云社区<Elastic Search入门(一): 简介,安装,运行第一 ...
    
			
    9. 
						
  9. PHP程序员可以这样准备找工作
			
    你好,是我琉忆.PHP程序员面试笔试图书系列作者. 今天就跟大家聊聊作为一个PHP程序员,每年的跳槽季都应该怎么准备一番. 其实普遍的跳槽季总的就有2个. 分别是新年后的3-4月,还有9-10月份.  ...
    
			
    10. 
						
  10. Solution -「CF 1119F」Niyaz and Small Degrees
			
    \(\mathcal{Description}\)   Link.   给定一棵 \(n\) 个结点的树,边有边权,对于每个整数 \(x\in[0,n)\),求出最少的删边代价使得任意结点度数不超过  ...
    
			
    11.