/**
* 商品模块;
* 使用:var SKU = sku.init({ id:'sku', item: item, data:data });
* @config item = [{"id":1,"name":"职位","sub":[{"id":1,"name":"adc"},{"id":2,"name":"辅助"},{"id":3,"name":"战士"}]},{"id":2,"name":"知名度","sub":[{"id":4,"name":"50%"},{"id":5,"name":80%"},{"id":6,"name":"90%"}]}];
* @param data = [{"ids":[{"1":"1"},{"2":"4"}],"price":0,"stock":0,"sku":0}];
* **/
layui.define(['jquery','form'],function(e){
"use strict";var $ = layui.jquery,form=layui.form,o ={
c : {sv:'',iv:'',tv:'',item:[],itemed:[],data:[],tableTitleId:[],tableTitle:[],tableTd:[]},
z:function (x,y,a) {
for(var i=0;i<a.length;i++){if( x+'_'+y == a[i] ) return 'checked';} return '';
},
y:function (s,d,a,h) {
for(var i=0;i<d.length;i++){ h += '<input type="checkbox" data-id="'+s+'_'+d[i].id+'" title="'+d[i].name+'" lay-skin="primary" lay-filter="item"'+ this.z(s,d[i].id,a) +'>';} return h;
},
x:function (d,a,h) {
return '<div class="layui-form-item" pane><label class="layui-form-label">'+d.name+'</label><div class="layui-input-block" data-id="'+d.id+'">'+this.y(d.id,d.sub,a,'')+'</div></div>';
},
w:function (d,a,h) {
for(var i=0;i<d.length;i++){ h += this.x(d[i],a,''); } return h;
},
st:function () {
return '<table class="layui-table" lay-skin="" style="margin:0"><thead>'+this.sth()+'</thead><tbody>'+this.stb()+this.stf()+'</tbody></table>';
},
sth:function () {
var h = '<tr>'; for(var i=0;i<this.c.tableTitle.length;i++){ h += '<th>' +this.c.tableTitle[i]+ '</th>';} h += '<th>价格</th><th>库存</th><!--<th>货号</th>--></tr>'; return h;
},
stb:function () {
var t =this, h = '', na = [];
for(var i=0;i<t.c.data.length;i++){
h += '<tr>';
for(var s=0;s<t.c.data[i].ids.length;s++){
var k = '',v='';
for(var item in t.c.data[i].ids[s]){
k = item; v = t.c.data[i].ids[s][item];
}
if(!na[k] || na[k]<1){
na[k] = this.ai(t.c.data[i].ids[s][item],this.c.tableTd);
if(na[k]>0){
h += '<td rowspan="'+na[k]+'">';
h += this.gin(item,t.c.data[i].ids[s][item]);
h += '</td>';
}
}
na[k] --;
}
h += '<td><input class="layui-input layui-table-input" data-index="'+i+'" data-type="price" lay-filter="input" value="'+t.c.data[i].price+'" ></td>';
// h += '<td><input class="layui-input layui-table-input" data-index="'+i+'" data-type="stock" lay-filter="input" value="'+t.c.data[i].stock+'" ></td>';
h += '<td><input class="layui-input layui-table-input" data-index="'+i+'" data-type="sku" lay-filter="input" value="'+t.c.data[i].sku+'" ></td>';
h += '</tr>';
}
return h;
},
stf:function () {
if(this.c.data.length <) return '';
return '<tr><th colspan="'+this.c.tableTitle.length+'" style="text-align: center">批量修改</th><th><input type="text" class="layui-input layui-table-input" lay-filter="input" data-type="sku-price" /></th><!--<th><input type="text" class="layui-input layui-table-input" lay-filter="input" data-type="sku-stock" /></th>--><th><input type="text" class="layui-input layui-table-input" lay-filter="input" data-type="sku-sku" /></th></tr>';
},
gin:function (a,b) {
for( var i=0;i<this.c.item.length;i++){
if(a == this.c.item[i].id){
for(var x=0;x<this.c.item[i].sub.length;x++){
if( this.c.item[i].sub[x].id == b ) return this.c.item[i].sub[x].name;
}
}
}
return '';
},
ai:function (a,b) {
for(var i=0;i<b.length;i++){
for(var s=0;s<b[i].length;s++){
if(a == b[i][s]){
var c = 1;
for(var y=i+1;y<b.length;y++){
c *= (b[y].length);
}
return c;
}
}
}
return 0;
},
inArray:function (s,a) { if(s && a && a.length>0){ for(var i=0;i<a.length;i++){ if(s == a[i]) return true; } } return false; },
citd:function (i,b) {
if(b && !this.inArray(i,this.c.itemed)) { this.c.itemed.push(i);return;}
if(!b && this.c.itemed.indexOf(i) > -1) {this.c.itemed.splice(this.c.itemed.indexOf(i),1);return;}
},
cd:function () {
var it = this.c.itemed;
var ids = this.c.tableTitleId;
var arr = [];
if(it.length<) return;
for(var i=0;i<ids.length;i++){
for(var s=0;s<it.length;s++){
var kv = it[s].split('_');
if( kv[0] == ids[i] ) {
if(!arr[i]) arr[i] = [];
arr[i].push( kv[1] );
}
}
}
this.c.tableTd = arr;
var sarr = [[]];
for (var i = 0; i < arr.length; i++) {
var tarr = [];
for (var j = 0; j < sarr.length; j++)
for (var k = 0; k < arr[i].length; k++)
tarr.push(sarr[j].concat(arr[i][k]));
sarr = tarr;
}
var narr = [];
for( var i=0;i<sarr.length;i++ ){
var tarr = {};
tarr['ids'] = [];
for(var ii=0;ii<sarr[i].length;ii++){
var obj = {};
obj[ ids[ii] ] = sarr[i][ii];
tarr['ids'].push( obj );
}
var rr = this.ced(tarr['ids']);
tarr['price'] = rr['price'];
// tarr['stock'] = rr['stock'];
tarr['sku'] = rr['sku'];
narr.push(tarr);
}
this.c.data = JSON.parse(JSON.stringify(narr));
},
ced:function(ids){
var arr = [];arr['price']=0;arr['stock']=0;arr['sku']=0;
var nd = [];
for(var i=0;i<ids.length;i++){
for(var d in ids[i]) nd.push(d+'_'+ids[i][d]);
}
var sd = [];
for(var i=0;i<this.c.data.length;i++){
sd[i] = [];
ids = this.c.data[i].ids;
for(var s=0;s<ids.length;s++){
for(var d in ids[s]) sd[i].push(d+'_'+ids[s][d]);
}
// 比对数据
var is = true;
for(var s=0;s<nd.length;s++){
if(this.inArray(nd[s],sd[i])){
is = is * true;
}else{
is = is * false;
}
}
if(is){
arr['price'] = parseFloat(this.c.data[i].price);
// arr['stock'] = parseInt(this.c.data[i].stock);
arr['sku'] = this.c.data[i].sku;
return arr;
}
}
return arr;
},
sod:function () {
this.c.itemed.sort(function (v1,v2) {
var kv1 = v1.split('_');
var kv2 = v2.split('_');
if(parseInt(kv1[0]) < parseInt(kv2[0])) return -1;
if(parseInt(kv1[0]) > parseInt(kv2[0])) return 1;
if(parseInt(kv1[1]) < parseInt(kv2[1])) return -1;
if(parseInt(kv1[1]) > parseInt(kv2[1])) return 1;
return 0;
});
},
stt:function (d,a) {
var t = this,d = t.c.item,a = t.c.itemed;
t.c.tableTitleId = [];t.c.tableTitle = [];
for(var i=0;i<d.length;i++){
for(var ii=0;ii<d[i].sub.length;ii++){
if( t.inArray( d[i].id+'_'+d[i].sub[ii].id , a) && !t.inArray( d[i].id , t.c.tableTitleId )){
t.c.tableTitle.push(d[i].name);
t.c.tableTitleId.push(d[i].id);
}
}
}
return;
},
listenInput:function () {
var t = this;
$('input[lay-filter]').on('change',function (e) {
var v = $(this).val();
var p = $(this).attr('data-type');
var i = $(this).attr('data-index');
if(p=='sku' && t.c.data[i]) t.c.data[i].sku = v;
if(p=='price' && t.c.data[i]) t.c.data[i].price = isNaN(parseFloat(v))?0:parseFloat(v);
// if(p=='stock' && t.c.data[i]) t.c.data[i].stock = isNaN(parseInt(v))?0:parseInt(v);
if(p=='sku-sku'){ for(var k=0;k<t.c.data.length;k++) t.c.data[k].sku = v+(k+1);}
if(p=='sku-price'){ for(var k=0;k<t.c.data.length;k++) t.c.data[k].price = isNaN(parseFloat(v))?0:parseFloat(v);}
// if(p=='sku-stock'){ for(var k=0;k<t.c.data.length;k++) t.c.data[k].stock = isNaN(parseInt(v))?0:parseInt(v);}
t.rl();
})
},
listen:function () {
var t = this;
form.on('checkbox(item)', function(data){
var id = $(data.elem).attr('data-id');
t.citd(id,data.elem.checked);
t.sod();
t.stt();
t.cd();
t.rl();
});
this.listenInput();
},
getItem:function () {
return this.c.item;
},
getData:function () {
console.log(111111)
console.log(this.c.data)
return this.c.data;
},
si:function (d) {
for(var i=0;i<d.length;i++){
if(d[i].ids){
for(var ii=0;ii<d[i].ids.length;ii++){
for(var k in d[i].ids[ii]){
if(!this.inArray(k+'_'+d[i].ids[ii][k],this.c.itemed)) this.c.itemed.push(k+'_'+d[i].ids[ii][k]);
}
}
}
}
},
f:function (c) {
var s=new Date().getTime(),t = this;
t.c.sv = c.id?c.id:'sku';
t.c.iv = c.itemelem?c.itemelem:'item-'+s;
t.c.tv = c.tableelem?c.tableelem:'table-'+s;
t.c.item = c.item?c.item:[];
t.c.data = c.data?JSON.parse(JSON.stringify(c.data)):[];
t.c.itemed = [];
if(t.c.data){t.si(t.c.data);t.sod();t.stt();t.cd();}
},
rl:function () {
$('#'+this.c.tv).html(this.st());
this.listenInput();
},
l:function () {
$('#'+this.c.sv).append('<div id="'+this.c.iv+'">'+this.w(this.c.item,this.c.itemed,'')+'</div>');
$('#'+this.c.sv).append('<div class="layui-form-item" pane><label class="layui-form-label">商品</label><div class="layui-input-block" id="'+this.c.tv+'">'+this.st()+'</div></div></div>');
form.render('checkbox');this.listen();
},
init:function (c) {this.f(c);this.l();return o;}
};o.v = '1.0.0'; e('sku', o);
});

html 部分::

<!-- 商品测试 -->
<div style="display:none;" id="sku" data-item="" data-data=""></div>
<div class="layui-form-item" pane>
<label class="layui-form-label"></label>
<div class="layui-input-inline" id="data-html">
</div>
</div>
<!--<div class="layui-form-item">
<div class="layui-input-inline">
<a class="layui-btn" id="_get">修改</a>
</div>
</div>-->
js部分::
console.log(JSON.stringify(data.data))
$("#sku").html("");
item=data.data;
var data = [{"ids":[{"1":"1"},{"2":"2"}],"price":0,"stock":0,"sku":0}];//加载默认数据
SKU = sku.init({ id:'sku', item: item, data:data });
$("#_get").click(function () {
var data1=SKU.getData();//获取sku 数据
var data2=SKU.getItem();//获取sku 数据
property_ids=data1;
$('#data-html').html(JSON.stringify(data1))
});

电商商品规则属性sku 工具类的更多相关文章

  1. 属性 每秒10万吞吐 并发 架构 设计 58最核心的帖子中心服务IMC 类目服务 入口层是Java研发的,聚合层与检索层都是C语言研发的 电商系统里的SKU扩展服务

    小结: 1. 海量异构数据的存储问题 如何将不同品类,异构的数据统一存储起来呢? (1)全品类通用属性统一存储: (2)单品类特有属性,品类类型与通用属性json来进行存储: 2. 入口层是Java研 ...

  2. 重学 Java 设计模式:实战模版模式「模拟爬虫各类电商商品,生成营销推广海报场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 黎明前的坚守,的住吗? 有人举过这样一个例子,先给你张北大的录 ...

  3. 对象属性拷贝工具类大全==>Bean的属性拷贝从此不用愁

    大家在做java开发时,肯定会遇到api层参数对象传递给服务层,或者把service层的对象传递给dao层,他们之间又不是同一个类型对象,但字段又是一样,如果还是用普通的get.set方式来处理话,比 ...

  4. Dozer-对象属性映射工具类

    Dozer-对象属性映射工具类 工具类代码: import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; impo ...

  5. java读取属性配置文件工具类

    import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** * * 类: ProU ...

  6. Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作

    32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...

  7. properties属性文件工具类

    package xxx.business.utils; import org.apache.commons.configuration.ConfigurationException; import o ...

  8. Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战

    Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...

  9. Java生鲜电商平台-商品基础业务架构设计-商品设计

    Java生鲜电商平台-商品基础业务架构设计-商品设计 在生鲜电商的商品中心,在电子商务公司一般是后台管理商品的地方.在前端而言,是商家为了展示商品信息给用户的地方,它是承担了商品的数据,订单,营销活动 ...

随机推荐

  1. 排列组合算法(基于c++实现)

    排列 全排列是将一组数按一定顺序进行排列,如果这组数有n个,那么全排列数为n!个.现以{1, 2, 3}为例说明如何编写全排列的递归算法 第一层S1表示第一个数分别与第1.2.3个数交换位置,如123 ...

  2. TCP/IP详解与OSI七层模型

    TCP/IP协议 包含了一系列构成互联网基础的网络协议,是Internet的核心协议.基于TCP/IP的参考模型将协议分成四个层次,它们分别是链路层.网络层.传输层和应用层.下图表示TCP/IP模型与 ...

  3. MPEG2-TS音视频同步原理

    一.引言MPEG2系统用于视音频同步以及系统时钟恢复的时间标签分别在ES,PES和TS这3个层次中.  在TS 层, TS头信息包含了节目时钟参考PCR(Program Clock Reference ...

  4. MariaDB Galera Cluster的配置测试

    参考的https://fykuan.hsnuer.net/blog/2015/01/23/debian-%E4%B8%8A%E5%AE%89%E8%A3%9D-mariadb-galera-clust ...

  5. C# 播放器, 收藏

    C#写了一个调用libvlc api实现的万能视频播放器 http://www.cnblogs.com/haibindev/archive/2011/12/21/2296173.html 引用库 ht ...

  6. [转][Dapper]SQL 经验集

    condition.Append(" AND ChineseName like @name"); p.Add("@name", "%" + ...

  7. Ruby中数组的遍历

    转自:http://www.jianshu.com/p/8de9b60f9350 Ruby中有几个常用的遍历数组的方法,本人经常容易搞混.这里列出来总结一下. each: 从数组中取出一个元素,作为某 ...

  8. Keras 入门

    “sample”“batch”“epoch” Sample:样本,比如:一张图像是一个样本,一段音频也是一个样本. Batch:批,含有N个样本的集合.每一个batch的样本都是独立的并行处理.在训练 ...

  9. OpenMP 循环调度 + 计时

    ▶ 使用子句 schedule() 来调度循环,对于循环中每次迭代时间不相等的情况较为有效 ● 代码 #include <stdio.h> #include <stdlib.h> ...

  10. Selenium Webdriver——JS处理rich text(富文本框)

    126邮件正文邮件的rich text 先让selenium切换到iframe中 driver.switchTo().frame(driver.findElement(By.className(&qu ...