tp5 商品模型的添加展示
路由
//商品模型展示的路由 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); }
页面效果
