商品选择未选择交替功能
弹窗实现
<div class="content-init">
<label>礼品:</label>
<a class="content-init-add required" onclick="ChangeCustom()">选择商品</a>
</div>
**弹窗**基于bootstrap框架弹图层
<div id="modal1" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
内容
<div>
function ChangeCustom() {
$(".modal-header h3").html("选择商品")
$("#modal1").modal()
}
总体结构
<div class="row">
<form>
<div class="col-xs-12">
<div class="content">
<div class="content-init">
<label>标题:</label>
<input style="width: 300px" class="required" id="title" type="text" value=""/>
</div>
<div class="content-init">
<label>限制条件:</label>
订单金额满<input style="width:111px;" id="min_price" type="text" value=""/>至<input type="text" style="width: 111px;" id="max_price" class="required" value=""/>
</div>
<div class="content-init">
<label>最多赠送数量:</label>
<input style="width: 300px" onchange="ValuemountA(this)" class="required" id="frequency" type="text" value=""/>
</div>
<div class="content-init">
<label>礼品:</label>
<a class="content-init-add required" onclick="ChangeCustom()">选择商品</a>
</div>
</div>
<div class="containe">
<div>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>商品缩略图</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody class="thead">
</tbody>
</table>
</div>
</div>
</div>
</form>
<div class="sumbit">
<button class="btAdd" onclick="addDatas()">提交</button>
</div>
</div><!-- /.row -->
<div id="modal1" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"></h3>
</div>
<div class="modal-box">
<div class="modal-body">
<span class="title">选择商品</span>
<div class="select">
<div class="select-input">
<input style="width: 170px" placeholder="商品名称" value="" oninput="getCommodity(value)"/>
</div>
<div class="select-data"></div>
</div>
</div>
<div class="modal-body-center">
<div class="modal-body-center-button">
<button class="bt1" onclick="addButton()">选择</button>
<button class="bt1" onclick="cancelButton()">取消</button>
</div>
</div>
<div class="modal-body-right">
<span class="title">已选择商品</span>
<div class="select-dates"></div>
</div>
</div>
<div style="text-align: right;padding: 10px">
<button class="btAdd" onclick="addModal()" aria-hidden="true" data-dismiss="modal">确定</button>
<button class="btMove" class="close" data-dismiss="modal" aria-hidden="true">取消</button>
</div>
</div>
右边框获取数据
//接口获取数据
function getCommodity(title) {
var url = "/Goods/SearchGoodsByName.html";
$.get(url,{title:title},function (res) {
res=JSON.parse(res)
createDOM(res.data)
data = res.data
datalLsis=data
})
}
var data=[] //总数据g
var datalLsis=[] //全局总数据
//封装右边渲染结构
function createDOM(list) {
// console.log(list)
$('.select-data').html('')
var specStr = '';
$.each(list,function (index,value) {
specStr+=`<div class="select-commodity"><input class="checkbox" value="${value.id}"' οnclick="change(${value.id})" type="checkbox" /><img style="width: 50px;height: 50px" src="${value.pic}"><div class="select-commodity-name"><span>商品名称：${value.title}</span><span>货号:${value.goods_sn}</span></div></div>`
})
$('.select-data').html(specStr)
}
//右边渲染格式封装
function afterDOM(lists) {
// console.log(list)
var specStrs = '';
$.each(lists,function(index,item){
specStrs+=`<div class="select-commodity"><input class="checkbox" οnchange="callChange(${item.id})" value="${item.id}"' type="checkbox" /><img style="width: 50px;height: 50px" src="${item.pic}"><div class="select-commodity-name"><span>商品名称：${item.title}</span><span>货号:${item.goods_sn}</span></div></div>`
});
$('.select-dates').html(specStrs)
}
var idList = [] //右边选择的商品id
//获取右边已选的商品id 去重id
function change(id) {
if (idList.length == 0){
idList.push(id)
}else {
var checkid = idList.some(item => {
return item == id
})
if (checkid){
var index = idList.indexOf(id);
if(index > -1) {
idList.splice(index,1);
}
}else {
idList.push(id)
}
}
// console.log(idList)
}
var goodse=[]; //利用已选择的id过滤出的已选择的商品数据
// 点击选择选择商品按钮
function addButton() {
// console.log(data,idList)
// 返回筛选出来已选择的数据
var filterList = data.filter(item => {
return idList.some(one => {
return one == item.id
})
});
// 返回未筛选的数据
var afterList = data.filter(item2 => {
return !(idList.some(one2 => {
return one2 == item2.id
}))
});
//将筛选的数据呵未选择的数据进行两边渲染
createDOM(afterList)
data = afterList
// console.log(filterList,afterList,data)
goodse= [...goodse,...filterList]; //将过滤后的数据和原有的数据合并
//选择去重，不会重复添加渲染同id的数据
let ary = goodse;
let obj = {};
goodse=ary.reduce((curs,next)=>{
obj[next.id]?"":obj[next.id]=true&& curs.push(next);
return curs;
},[]);
// console.log(goodse)
afterDOM(goodse) //右边数据渲染函数封装
idList = [];
}
右边框数据
//右边选择框选择商品id
var idRove=[] //已选择的商品id
function callChange(id) {
console.log("idRove",id)
if (idRove.length == 0){
idRove.push(id)
}else {
var checkid = idRove.some(item => {
return item == id
})
if (checkid){
var index = idRove.indexOf(id);
if(index > -1) {
idRove.splice(index,1);
}
}else {
idRove.push(id)
}
}
console.log(idRove)
}
//通过获取带已选择的id进行过滤数据
// 商品取消选择
function cancelButton() {
//未选择商品数据
var cancelList = goodse.filter(item2 => {
return !(idRove.some(one2 => {
return one2 == item2.id
}))
});
console.log("cancelList",cancelList)
// console.log(cancelList)
//再将未选择数据id进行过滤出来
var IdsList=[] //未选择商品id
//判断数据当数据===0时，将数据清空，不清空最后一个数据还会渲染
if (cancelList.length == 0){
goodse=[]
$('.select-dates').html("")
}else {
//过滤未选择到的数据id
$.each(cancelList, function (index, item) {
console.log('daozheli')
console.log(item)
if (!!item.id) {
IdsList.push(item.id)
}
// var arr=IdsList.map(function(i){
// return +i;
// })
//在总数据中将未选择的商品信息过滤出来进行相变渲染
console.log(datalLsis, 'ssssss')
var afterIdList = datalLsis.filter(item => {
// console.log(item)
return !(IdsList.some(one => {
// console.log('one',one)
return one == item.id
})
)
})
;
console.log("afterIdList", afterIdList)
createDOM(afterIdList)
//再将已有的数据和右边框已选择的数据进行过滤渲染
var canlList = goodse.filter(item2 => {
return !(idRove.some(one2 => {
return one2 == item2.id
}))
});
goodse = canlList
afterDOM(canlList)
})
}
idRove=[] //id每选择一次就需要清空不然会重复
}
添加首页
// 选择商品确定
let goods_item=[]
function addModal() {
//去重渲染
let ary = goodse;
let obj = {};
goodse=ary.reduce((curs,next)=>{
obj[next.id]?"":obj[next.id]=true&& curs.push(next);
return curs;
},[]);
$.each(goodse, function (index, item2) {
var table = `<tr><td>${item2.title}${item2.goods_sn}</td><td><img style="width: 50px;height:50px;background: red" src="${item2.pic}"></td><td><input class="numberList" type="number" min="1" value="1" οninput="ValueNumber(this)" οnchange="getNumber(value,${item2.id})" /></td><td><a href="#" οnclick="removeList(${item2.id})">删除</a></td></tr>`
$('.thead').append(table)
// console.log(index,item2)
getNumber(1,item2.id)
goods_item=goodse
})
goodse = []
afterDOM(goodse)
}
//商品删除
function removeList(id) {
$('.thead').html('')
goods = goods.filter(item => item.id != id)
goods_item = goods_item.filter(item2 => item2.id != id)
console.log('bbb',goods_item)
if(goods_item.length==0){$('.thead').html("")}else {
$.each(goods_item, function (index, item2) {
// console.log('item2',item2)
var table = `<tr><td>${item2.title}${item2.goods_sn}</td><td><img style="width: 50px;height:50px;background: red" src="${item2.pic}"></td><td><input class="numberList" type="number" min="1" value="${item2.number}" οninput="ValueNumber(this)" οnchange="getNumber(value,${item2.id})" /></td><td><a href="#" οnclick="removeList(${item2.id});">删除</a></td></tr>`
$('.thead').append(table)
})
}
}
// 限制礼品次数
function ValuemountA(obj) {
if(obj.value<1){
$(obj).val(1)
alert("数量不能少于1")
return
}
}
//商品数量限制
function ValueNumber(obj) {
if (obj.value<1){
alert("数量不能少于1")
$(obj).val(1)
return
}
}
//添加提交
function addDatas(){
console.log(goods)
$.post("/CustomGiftLimit/add.html",{
title:$('#title').val(),
min_price:$('#min_price').val(),
max_price:$('#max_price').val(),
frequency:$('#frequency').val(),
goods:goods
},function(result){
if(result.status == 'success') {
window.location.href="/CustomGiftLimit/index.html";
}else {
alert(result.msg);
}
});
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YlFvdZFS-1570846953189)(C:\Users\一泓清泉天上游\AppData\Roaming\Typora\typora-user-images\1570846437586.png)]
frequency:$('#frequency').val(),
goods:goods
},function(result){
if(result.status == 'success') {
window.location.href="/CustomGiftLimit/index.html";
}else {
alert(result.msg);
}
});
}
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
