路由

  1. //商品模型展示的路由
  2. Route::get('type','/pyg/good/listType');
  3. //将type_id传送至/pyg/good/addType的路由
  4. Route::get('addType','/pyg/good/addType');

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

模型代码：

  1. <?php
  2.  
  3. namespace app\pyg\model;
  4.  
  5. use think\Model;
  6.  
  7. class GoodAddModel extends Model
  8. {
  9.     //连接品优购商品类型表
  10.     protected $table='pyg_type';
  11. //提取全部数据
  12.     public static function listType(){
  13.         return self::select();
  14.     }
  15. }

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

控制器代码：

  1. //    展示商品类型
  2.     public function listType()
  3.     {
  4. //调用模型，将数据通过json返回前端页面
  5.         $data = GoodAddModel::listType();
  6.         return getJsonDate(200, '商品模型展示', $data);
  7.     }

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

  1.  //先将商品模型的渲染出来
  2.         $.ajax({
  3.             'url':"/type",//发送的路由地址
  4.             'type':'get',
  5.             'dataType':'json',
  6.             'success':function(response){
  7.                 if(response.code !=200){
  8.                     alert(response.msg);return;
  9.                 }
  10.                 var str = '<option value="">请选择商品模型</option>';
  11.                 $.each(response.data, function(i,v){
  12.                     str += '<option value="' + v.id + '">' + v.type_name + '</option>';
  13.                 });
  14.                 $('#goods_type').html(str);//找见select id=goods_type，进行替换
  15.             }
  16.         });

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

  1.  <div class="row cl">
  2.                 <label class="form-label col-xs-4 col-sm-2">*<span class="c-red"></span>商品模型：</label>
  3.                 <div class="formControls col-xs-8 col-sm-9">
  4.                         <span class="select-box" style="width:150px;">
    //替换
  5.                             <select name="type_id" class="select" size="1" id="goods_type">
  6.                                 <option value="0">选择商品模型</option>
  7.  
  8.                             </select>
  9.                         </span>
  10.                 </div>
  11.             </div>

给select 设置

  1. change事件
  1.   //商品模型添加
  2.         $('#goods_type').change(function(){
  3.             //获取选中类型商品的id
  4.             var type_id = $(this).val();
  5.             if(type_id == '') return;
  6.             //发送ajax请求
  7.             $.ajax({
  8.                 'url':"/addType",
  9.                 'data':{type_id:type_id},
  10.                 'type':'get',
  11.                 'dataType':'json',
  12.                 'success':function(response){
  13.                     console.log(response);
  14.                     //根据获取的数据，拼接html代码，显示到页面
  15.                     var attrs =response.data.attribute;
  16.                     var specs =response.data.spec;
  17.                     console.log(attrs);
  18.                     console.log(specs);
  19.                     //遍历数组，一条一条数据拼接处理
  20.                     var spec_html = '<tr><td colspan="2">商品规格</td></tr>';
  21.                     $.each(specs, function(i, v){
  22.                         //i 是数组中的索引，v是一条数据（json格式对象）
  23.                         //属性名称
  24.                         spec_html += '<tr class="spec_name" spec_id="'+v.id+'">';
  25.                         spec_html += '<td spec_name="' + v.spec_name + '">' + v.spec_name + '：</td>';
  26.                         spec_html += '<td>';
  27.                         $.each(v.spec_value, function(index,value){
  28.                             spec_html += '<button type="button" spec_value_id="' + value.id + '" class="btn btn-default">' + value.spec_value + '</button> ';
  29.                         });
  30.                         spec_html += '</td>';
  31.                         spec_html += '</tr>';
  32.                     });
  33.  
  34.                     //将拼接好的html字符串，放到页面显示
  35.                     $('#goods_spec_table1').find('tbody').html(spec_html);
  36.  
  37.                     var attrs_html = '<tr><td colspan="2"><b>商品属性</b>：  </td></tr>';
  38.                     $.each(attrs, function(i, v){
  39.                         //i 是数组中的索引，v是一条数据（json格式对象）
  40.                         //属性名称
  41.                         attrs_html += '<tr class="attr_name" attr_id="'+v.id+'">';
  42.                         attrs_html += '<td attr_name="' + v.attr_name + '">' + v.attr_name + '：</td>';
  43.                         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+'">';
  44.                         console.log(attrs_html);
  45.                         console.log(v.attr_values.length);
  46.                         if(v.attr_values.length == 0){
  47.                             attrs_html += '<input type="text" name="attr['+v.id+'][attr_value]" value="" class="input-text">';
  48.                         }else{
  49.                             attrs_html += '<select name="attr['+v.id+'][attr_value]" class="select"><option value="">请选择</option>';
  50.                             var attr_values= v.attr_values.split(',');
  51.                             $.each(attr_values, function(index,value){
  52.                                 attrs_html += '<option value="' + value + '">' + value + '</option>';
  53.                             });
  54.                             attrs_html += '</select>';
  55.                         }
  56.                         attrs_html += '</td>';
  57.                         attrs_html += '</tr>';
  58.                     });
  59.                     //将拼接好的html字符串，放到页面显示
  60.                     $('#goods_attr_table').find('tbody').html(attrs_html);
  61.                 }
  62.             });
  63.         });
  64.  
  65.         UE.getEditor('editor');
  66.     });
  67. </script>
  68. <script>
  69.     /** 商品规格相关 js*/
  70.     $(function(){
  71.         $('#goods_spec_table1').on('click', 'button',function(){
  72.             $(this).toggleClass('btn-success').toggleClass('btn-default');
  73.             var spec_data = {};
  74.             $('.spec_name').find('button.btn-success').each(function(i,v){
  75.                 var index = $(v).closest('tr').index();
  76.                 var spec_id = $(v).closest('tr').attr('spec_id');
  77.                 var spec_name = $(v).closest('tr').find('td:first').attr('spec_name');
  78.                 var spec_value_id = $(v).attr('spec_value_id');
  79.                 var spec_value = $(v).text();
  80.                 if(spec_data[index] == undefined) spec_data[index] = [];
  81.                 spec_data[index].push({spec_id:spec_id,spec_name:spec_name,spec_value_id:spec_value_id, spec_value:spec_value});
  82.             });
  83.             var spec_arr = [];
  84.             for(var i in spec_data){
  85.                 spec_arr.push(spec_data[i]);
  86.             }
  87.             //计算笛卡尔积
  88.             var result = spec_arr[0];
  89.             for(var i=1; i<spec_arr.length; i++){
  90.                 var temp = [];
  91.                 $.each(result, function(j,v1){
  92.                     $.each(spec_arr[i], function(k,v2){
  93.                         if($.isArray(v1)){
  94.                             v1.push(v2);
  95.                             temp.push(v1);
  96.                         }else{
  97.                             temp.push([v1, v2])
  98.                         }
  99.  
  100.                     });
  101.                 });
  102.                 result = temp;
  103.             }
  104.             var html = '';
  105.             //拼接第一行
  106.             html += '<tr>';
  107.             if($.isArray(result[0]) == false){
  108.                 html += '<td><b>' + result[0].spec_name + '</b></td>';
  109.             }else{
  110.                 $.each(result[0],function(i,v){
  111.                     html += '<td><b>' + v.spec_name + '</b></td>';
  112.                 });
  113.             }
  114.             html += '<td><b>购买价</b></td>';
  115.             html += '<td><b>成本价</b></td>';
  116.             html += '<td><b>库存</b></td>';
  117.             html += '<td><b>操作</b></td>';
  118.             html += '</tr>';
  119.             //拼接批量填充行
  120.             html += '<tr>';
  121.             if($.isArray(result[0]) == false){
  122.                 html += '<td><b></b></td>';
  123.             }else{
  124.                 $.each(result[0],function(i,v){
  125.                     html += '<td><b></b></td>';
  126.                 });
  127.             }
  128.             html += '<td><input id="item_price" value="0"></td>';
  129.             html += '<td><input id="item_cost_price" value="0"></td>';
  130.             html += '<td><input id="item_store_count" value="0"></td>';
  131.             html += '<td><button id="item_fill" type="button" class="btn btn-success">批量填充</button></td>';
  132.             html += '</tr>';
  133.             //继续拼接
  134.             $.each(result,function(i,v){
  135.                 html += '<tr>';
  136.                 if($.isArray(v) == false){
  137.                     var value_ids = v.spec_value_id;
  138.                     var value_names = v.spec_name + ':' + v.spec_value;
  139.                     html += '<td>' + v.spec_value + '</td>';
  140.                 }else{
  141.                     var value_ids = '';
  142.                     var value_names = '';
  143.                     $.each(v,function(i2,v2){
  144.                         html += '<td>' + v2.spec_value + '</td>';
  145.                         value_ids += v2.spec_value_id + '_';
  146.                         value_names += v2.spec_name + ':' + v2.spec_value + ' ';
  147.                     });
  148.                     value_ids = value_ids.slice(0, -1);
  149.                     value_names = value_names.slice(0, -1);
  150.                 }
  151.                 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>';
  152.                 html += '<td><input class="item_cost_price" name="item['+value_ids+'][cost_price]" value="0"></td>';
  153.                 html += '<td><input class="item_store_count" name="item['+value_ids+'][store_count]" value="0"></td>';
  154.                 html += '<td><button type="button" class="btn btn-default delete_item">移除</button></td>';
  155.                 html += '</tr>';
  156.             });
  157.             $('#spec_input_tab').find('tbody').html(html);
  158.         });
  159.  
  160.         $('#goods_spec_table2').on('click', '#item_fill', function(){
  161.             var item_price = $('#item_price').val();
  162.             var item_cost_price = $('#item_cost_price').val();
  163.             var item_store_count = $('#item_store_count').val();
  164.             $('.item_price').val(item_price);
  165.             $('.item_cost_price').val(item_cost_price);
  166.             $('.item_store_count').val(item_store_count);
  167.         });
  168.         $('#goods_spec_table2').on('click', '.delete_item', function(){
  169.             $(this).closest('tr').remove();
  170.         });
  171.     })
  172. </script>
  173. </body>
  174. </html>

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

  1. 《1》
    <?php
  2.  
  3. namespace app\pyg\model;
  4.  
  5. use think\Model;
  6.  
  7. class Attribute extends Model
  8. {
  9.     //商品模型属性表
  10.     protected $table = 'pyg_attribute';
  11.  
  12. }
  13.  
  14. 《2》
  15.  
  16. <?php
  17.  
  18. namespace app\pyg\model;
  19.  
  20. use think\Model;
  21.  
  22. class Spec extends Model
  23. {
  24.     //
  25.     protected $table = 'pyg_spec';
  26.  
  27. //    链接规格值表
  28.     public function specValue()
  29.     {
  30.         return $this->hasMany('SpecValue', 'spec_id', 'id');
  31.     }
  32.  
  33. }
  34. 《3》：
  35. <?php
  36.  
  37. namespace app\pyg\model;
  38.  
  39. use think\Model;
  40.  
  41. class SpecValue extends Model
  42. {
  43.     //规格值表
  44.     protected $table='pyg_spec_value';
  45. }

主模型（商品模型表）

  1.  
  1. <?php
  2.  
  3. namespace app\pyg\model;
  4.  
  5. use think\Model;
  6.  
  7. class GoodAddModel extends Model
  8. {
  9.     //连接品优购商品类型表
  10.     protected $table='pyg_type';
  11. //关联属性模型，规格模型
  12.     public  function  attribute(){
  13.         return $this->hasMany('Attribute','type_id','id');
  14.     }
  15.     public  function  spec(){
  16.         return $this->hasMany('Spec','type_id','id');
  17.     }
  18.  
  19. }
  1.  

控制器代码：

  1. //    添加规格，属性，根据ajax 传过来的$type_id 添加
  2.     public function addType()
  3.     {
  4.         //接受前端ajax发送的type_id
  5.         $type_id=\request()->get('type_id');
  6.      $data=GoodAddModel::with('attribute,spec,spec.specValue')->find($type_id);
  7.         return getJsonDate(200, '商品模型展示', $data);
  8.     }

页面效果

  1.  
  1.  

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

  1. JAVAEE——宜立方商城09：Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存

    1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...

  2. tp5 商城商品模型删除

    1:控制器代码 public function delete($id) { //验证id是否正确 $id if (!intval($id)) { return getJsonData(10010, ' ...

  3. YY一下淘宝商品模型

    淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...

  4. 电商系统中的商品模型的分析与设计—续

    前言     在<电商系统中的商品模型的分析与设计>中,对电商系统商品模型有一个粗浅的描述,后来有博友对货品和商品的区别以及属性有一些疑问.我也对此做一些研究,再次简单的对商品模型做一个介 ...

  5. tp5 商城模型id详情接口

    1:创建模型 2:定义关联模型 <?php namespace app\common\model; use think\Model; use traits\model\SoftDelete; c ...

  6. [Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

    目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...

  7. 微信小程序结合后台数据管理实现商品数据的动态展示、维护

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...

  8. {django模型层(二)多表操作}一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询、分组查询、F查询和Q查询

    Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 xxx 七 ...

  9. Asp.net MVC]Asp.net MVC5系列——在模型中添加

    目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...

随机推荐

  1. 从我做起[原生DI实现模块化和批量注入].Net Core 之一

    实现模块化注册 .Net Core实现模块化批量注入 我将新建一个项目从头开始项目名称Sukt.Core. 该项目分层如下: Sukt.Core.API 为前端提供APi接口(里面尽量不存在业务逻辑, ...

  2. AT [ABC176F] Brave CHAIN

    首先可以发现这样一个事实:在每次操作当中,都有三张牌是已经固定的,只有两张牌是不确定的,于是我们可以发下每一次操作的状态可以简单的使用这两张牌来描述,于是可以考虑令 \(dp_{i, j, k}\) ...

  3. centos7 安装yum源

    centos7的服务器,没有yum,没有wget命令真的寸步难行,经过总结和查询,现在算搞定了,把经验总结一下,以免大家再浪费时间去找原因: 安装yum需要wget安装yum的rpm包,所以前提是先有 ...

  4. 使用kubeadm快速部署一套K8S集群

    一.Kubernetes概述 1.1 Kubernetes是什么 Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8S. K8S用于容器化应用程序的 ...

  5. position和anchorPoint笔记

    position和anchorPoint是CAlayer的两个属性.     我们以前修改一个控件的位置都是能过Frame的方式进行修改.     现在利用CALayer的position和ancho ...

  6. 计算当前日期n天后的日期

    //计算180天后的日期//180*24*60*60*1000//更具时间戳计算n天前的日期 $(function () { var timestamp =Date.parse(new Date()) ...

  7. 动态修改UINavigationBar的背景色－－by－胡旭

    这是我们最终想要得到的效果 思路 在UISrollView的delegate方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView中根据当前 ...

  8. netty系列之:真正的平等–UDT中的Rendezvous

    目录 简介 建立支持Rendezvous的服务器 处理不同的消息 节点之间的交互 总结 简介 在我们之前提到的所有netty知识中,netty好像都被分为客户端和服务器端两部分.服务器端监听连接,并对 ...

  9. ansible-playbook实现MySQL的二进制部署

    1.ansible服务器配置 1.1 安装ansible # yum -y install ansible 1.2 配置主机清单文件 # vi /etc/ansible/hosts [local] 1 ...

  10. Linux源码编译安装php7.2

    以下简单的介绍下如何源码安装PHP,对于版本不一定是7.2,也可以是7.3,当然方法都是换汤不换药的,核心东西不变. 一.下载PHP源码 需要到指定的路径下载源码,执行下面的命令 wget http: ...