~~~
{extend name="base" /}
{block name="css"}
<style>
#factory tbody input{width:100px;}
.carsList li{height: 30px; line-height: 30px;border: 1px solid #ddd; margin: 2px 0;padding: 0 3px;}
.carsList span{float: right; margin-top: 4px;}
</style>
{/block}
{block name="body"}
<div class="layui-body">
<!--tab标签-->
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class=""><a href="{:url('index')}">配件列表</a></li>
<li class="layui-this">添加配件</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<form class="layui-form form-container" action="{:url('save')}" method="post">
<div class="layui-form-item">
<label class="layui-form-label">配件分类</label>
<div class="layui-input-inline">
<select name="parts_class_id" lay-verify="required">
{foreach name="partsClass" item="vo"}
<option value="{$vo.id}">{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.title}</option>
{/foreach}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配件名称</label>
<div class="layui-input-block">
<input type="text" name="title" value="" required lay-verify="required" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配件号</label>
<div class="layui-input-block">
<input type="text" name="number" value="" required lay-verify="required" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配件图片</label>
<div class="layui-input-block">
<input type="text" name="thumb" value="" class="layui-input layui-input-inline" id="thumb">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配件相册</label>
<div class="layui-input-block">
<button type="button" id="upload-photo-btn" class="layui-btn">上传图集</button>
<div id="photo-container"></div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配件工厂</label>
<div class="layui-input-block">
<table class="layui-table" id="factory">
<tbody></tbody>
</table>
<div class="layui-inline">
<div class="layui-input-inline" style="width: 300px;">
<select id="factoryList" lay-filter="factoryList">
<option value=""></option>
{foreach $factory as $v}
<option value="{$v.id}">{$v.title}</option>
{/foreach}
</select>
</div>
<div class="layui-input-inline" style="width: 100px;">
<button type="button" class="layui-btn layui-btn-danger" id="addFactory">增加</button>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配件参数</label>
<div class="layui-input-block">
<table class="layui-table" id="types">
<thead>
<tr>
<td>序号</td>
<td>参数名</td>
<td>参数值</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="name[]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>
<td><input type="text" name="value[]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>
<td><button type="button" class="layui-btn layui-btn-danger layui-btn-mini deltypes">删</button></td>
</tr>
</tbody>
</table>
<div class="text-right">
<button type="button" class="layui-btn layui-btn-small" id="addtypes">增加</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">适用车型</label>
<div class="layui-input-block">
<table class="layui-table" id="carsList">
<thead>
<tr>
<td width="80">序号</td>
<td>车型</td>
<td width="80">操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<table class="layui-table">
<tr>
<td width="130" valign="top">
<div>
<select lay-filter="brand" id="brand">
<option></option>
{foreach name="brand" item="vo"}
<option value="{$vo.id}" data-son='{$vo.brandSon|json_encode}'>{$vo.title}</option>
{/foreach}
</select>
</div>
<hr>
<div id="brandSon"></div>
</td>
<td>
<ul class="carsList"></ul>
</td>
</tr>
</table>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">详细描述</label>
<div class="layui-input-block">
<textarea name="content" placeholder="" class="layui-textarea" id="content"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{/block}
{block name="js"}
<script src="__JS__/ueditor/ueditor.config.js"></script>
<script src="__JS__/ueditor/ueditor.all.min.js"></script>
{/block}
{block name="script"}
<script>
//品牌切换
form.on('select(brand)', function(data){
var xxx=$(data.elem).find('option[value='+data.value+']').attr('data-son');
var r=$.parseJSON(xxx);
var brandSon='<select lay-filter="brandSon"><option>子系选择</option>';
$.each(r, function(index, val) {
brandSon=brandSon+'<option value="'+val.id+'" brand_id="'+data.value+'">'+val.title+'</option>'
});
$("#brandSon").html(brandSon);
form.render('select');
$.ajax({
url: '{:url("api/cars/index")}',
type: 'GET',
dataType: 'json',
data: {brand_id: data.value},
})
.done(function(res) {
var li='';
$.each(res, function(index, v) {
li=li+'<li configure_id='+v.id+' son_id='+v.son_id+' cars_title="'+v.title+'"><span class="layui-btn layui-btn-mini">加</span>'+v.title+'</li>';
});
$(".carsList").html(li);
havecars();
})
});
form.on('select(brandSon)', function(data){
var brand_id=$(data.elem).find('option[value='+data.value+']').attr('brand_id');
var son_id=data.value;
$.ajax({
url: '{:url("api/cars/index")}',
type: 'GET',
dataType: 'json',
data: {brand_id:brand_id,son_id: data.value},
})
.done(function(res) {
var li='';
$.each(res, function(index, v) {
li=li+'<li configure_id='+v.id+' son_id='+v.son_id+' cars_title="'+v.title+'"><span class="layui-btn layui-btn-mini">加</span>'+v.title+'</li>';
});
$(".carsList").html(li);
})
havecars();
});
$(function() {
var ue = UE.getEditor('content'),
uploadEditor = UE.getEditor('upload-photo-btn'),
photoListItem,
uploadImage;
uploadEditor.ready(function () {
uploadEditor.setDisabled();
uploadEditor.hide();
uploadEditor.addListener('beforeInsertImage', function (t, arg) {
$.each(arg, function (index, item) {
photoListItem = '<div class="photo-list"><input type="text" name="photo[]" value="' + item.src + '" class="layui-input layui-input-inline">';
photoListItem += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>';
$('#photo-container').append(photoListItem).on('click', '.remove-photo-btn', function () {
$(this).parent('.photo-list').remove();
});
});
});
});
havecars();
$('#upload-photo-btn').on('click', function () {
uploadImage = uploadEditor.getDialog("insertimage");
uploadImage.open();
});
//工厂增加
$("body").on("click","#addFactory",function(event) {
var title=$(this).parent().prev().find('.layui-this').text();
var factoryID=$(this).parent().prev().find('.layui-this').attr("lay-value");
var k=$("#factory>tbody>tr").length;
var html="";
html=html+'<tr>';
html=html+'<td>'+title;
html=html+'<input type="hidden" name="factory['+k+'][factory_id]" value="'+factoryID+'">';
html=html+'</td>';
html=html+'<td><input type="text" name="factory['+k+'][onename]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>';
html=html+'<td><input type="text" name="factory['+k+'][twoname]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>';
html=html+'<td><input type="text" name="factory['+k+'][threename]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>';
html=html+'<td><button type="button" class="layui-btn layui-btn-danger layui-btn-mini factoryDel">删</button></td>';
html=html+'</tr>';
$("#factory>tbody").append(html);
});
$("#factory").on("click",".factoryDel",function(){
$(this).parents('tr').remove();
});
//配件参数
$("body").on("click",".deltypes",function(event) {
$(this).parents('tr').remove();
});
$("#addtypes").click(function(event) {
var k=$("#types>tbody>tr").length;
var html="";
html=html+'<tr>';
html=html+'<td>'+(k+1)+'</td>';
html=html+'<td><input type="text" name="name[]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>';
html=html+'<td><input type="text" name="value[]" value="" required lay-verify="required" placeholder="" class="layui-input"></td>';
html=html+'<td><button type="button" class="layui-btn layui-btn-danger layui-btn-mini deltypes">删</button></td>';
html=html+'</tr>';
$("#types>tbody").append(html);
});
//车型选择
$(".carsList").on("click","span",function(event) {
var id=$(this).parent().attr('configure_id');
var son_id=$(this).parent().attr('son_id');
var title=$(this).parent().attr('cars_title');
var k=$("#carsList>tbody>tr").length;
var html='<tr><td>'+(k+1)+'<input type="hidden" name="configure_id[]" value="'+id+'"><input type="hidden" name="sonid[]" value="'+son_id+'"></td><td>'+title+'</td><td><button type="button" class="layui-btn layui-btn-danger layui-btn-mini carsDel">删</button></td></tr>';
$("#carsList>tbody").append(html);
$(this).parent().hide();
});
$("#carsList").on("click",".carsDel",function(event) {
$(this).parents('tr').remove();
havecars();
});
});
//车型选择监听函数
function havecars(){
$('.carsList li').show();
$("#carsList").find('tbody tr').each(function(index, el) {
var id=$(this).find('input[name="configure_id[]"]').val();
$('.carsList li').each(function(i, e) {
if($(this).attr('configure_id')==id){
console.log($(this).attr('configure_id'));
$(this).hide();
}
});
});
}
</script>
{/block}
~~~
- 心灵笔记
- tp5在编辑器一行一个添加信息
- 出库入库处理
- 出库
- 入库
- 后台控制器
- tp5加载更多-流加载
- 配件列表
- Parts.php
- add.html
- edit.html
- 图片管理
- controller
- 1.imgfile.php
- 2.imgfiletag.php
- view
- imgfile
- 1.index.html
- 2.show.html
- 3.simple.html
- 4.more.html
- 5.edit.html
- 6.deittag.html
- imgfiletag
- add.htm
- edit.htm
- model
- imgfile.php
- imgfiletag.php
- api
- upload.php
- js
- admin.js
- tp5整合百度编辑器多图上传
- 1.html代码
- 2.js代码
- 3.api代码
- 4.extend中的拓展代码
- tp5删除图片同时删除服务器图片
- 实用字段的的添加更新
- 根据时间戳获取未来几天星期几
- curl
- 城市按字母排版
- 聚合查询及渲染，处理产品首页
- 过滤字段
- 风控
- 查询id是否在数组里
- 判断更新还是新增操作
- tp5使用引入php文件