规格数量可以随意添加(比如由颜色,尺码,改变成颜色,尺码,材质),按照顺序,同一规格项的数据自动合并单元格,简单的实现逻辑如下
补充个效果图:
function createTable(){
//获取生成表格需要的数据
// alert("获取规格信息");
var checkSpList = [];
//规格项数据
var specData=changeDate(checkSpList);
//获取门店数据
var shopData="";
if($("#shopId").val()!=null && $("#shopId").val().length>0){
//说明是超市
shopDataArr=$("#shopId").val();
$(shopDataArr).each(function(index,ele){
shopData+=ele+",";
});
shopData=shopData.substring(0,shopData.length-1);
}else{
//说明非超市
//判断是否有选中的门店
if($("#shopSel").val()!=null && $("#shopSel").val()!=''){
shopData=$("#shopSel option:selected").text()+":"+$("#shopSel").val();
}
}
//开始生成表格
var specInfoTable=$("#specInfo-table");
//选择的规格名称
var checkSpName = [];
if(checkSpList.length>0){
$(checkSpList).each(function(index,element){
$("input[name='specId']").each(function(index,ele){
var specId=$(ele).val();
if(specId==element){
var specNmae=$(ele).attr("specNmae");
checkSpName.push(specNmae);
}
});
});
}
if(shopData!=""){
specData.push(shopData);
checkSpName.push("参与门店");
}
if(specData.length==0){
specInfoTable.children().remove();
return ;
}
var html="";
html+="<thead style='top:10px;position:sticky;z-index: 888'><tr>"
$(checkSpName).each(function(index,element){
html+="<th style='text-align: center'>"+element+"</th>"
});
html+="<th style='text-align: center'>业态:</th><th style='text-align: center'>分类:</th><th style='text-align: center'>库 存: <input id='stockInfo' type='text' style='margin-left: 22px;width:100px;' value='' class='input-control number input-l' oninput='input(this)'></th><th style='text-align: center'>库存控制比例: <input id='goodsStockRatio' type='text' style='margin-left: 22px;width:80px;' value='' oninput='input(this)'></th><th style='text-align: center' >价 格: <input id='priceInfo' type='text' style='margin-left: 22px;width:80px;' value='' oninput='input(this)'></th>";
html+="<th>特价价格<input type='text' class='input-control number input-l' id='specPrice' name='specPrice' value='' style='margin-left: 22px;width:80px;' oninput='input(this)'></th><th>积分兑付数额<input type='text' class='input-control number input-l' id='jfPrice' style='margin-left: 22px;width:80px;' value='' oninput='input(this)'></th><th>兑付后剩余商品价格<input type='text' class='input-control number input-l' id='money' style='margin-left: 22px;width:80px;' value='' oninput='input(this)'></th>";
// html+="<th><label class='control-label' >参与门店</label><td colspan='3' style='width: 600px;'><select id='shopId' name='shopId' class='shopName_selected' data-placeholder='请选择所属门店' style='width: 80%;height:35px;' multiple = 'multiple'></select></td></th>";
html+="<th style='text-align: center'>是否打折<input id='dzInfo' type='checkbox'></th><th style='text-align: center'>是否热门<input id='hotInfo' type='checkbox'></th><th style='text-align: center'>是否上架<input id='marketbleInfo' type='checkbox'></th>"
html+="</tr></thead>"
//计算第n个规格需要跨几列
var rowsNum=[];
rowsNum=getRowsNum(specData);
var code=$("#code option:selected").text()=="请选择..."?" -- ":$("#code option:selected").text();
var categoryName=$("#categoryName").val();
console.error(categoryName);
//开始循环生成表格
var totalRows=rowsNum[0]*(specData[0].split(',').length);
for (let i = 0; i < totalRows; i++) {
html+="<tr>"
//判断是否需要第几个单元格
var specText="";
var specId="";
var storeSn="";
for(let j=0;j<specData.length;j++){
var times=Math.floor(i/rowsNum[j]);
var index=times%(specData[j].split(',').length);
var text=specData[j].split(',')[index].split(':')[0];
var id=specData[j].split(',')[index].split(':')[1];
if(!text.includes("=")){
specText+=text+",";
specId+=id+",";
}else{
storeSn=id;
}
if(i%rowsNum[j]==0){
//第几次出现
html+="<td rowspan='"+rowsNum[j]+"' style='text-align: center'>"+text+"</td>";
}
}
specText=specText.substring(0,specText.length-1);
specId=specId.substring(0,specId.length-1);
html+="<td style='text-align: center'><input type='text' value='"+code+"' readonly style='width: 80px'></td><td style='text-align: center'><input name='categoryName' type='text' value='"+categoryName+"' readonly style='width: 80px'></td><td><input name='stockInfo' type='text' onchange='changeStock(this)' oninput='input(this)' style='width: 80px'></td><td><input name='goodsStockRatio' type='text' onchange='changeStockRatio(this)' oninput='input(this)' style='width: 80px'></td><td><input name='priceInfo' type='text' onchange='changePrice(this)' oninput='input(this)' style='width: 80px'></td>";
html+="<td><input type='text' class='input-control number input-l' name='specPrice' style='margin-left: 22px;width:100px;' oninput='input(this)' onchange='changeSpecPrice(this)'></td><td><input type='text' class='input-control number input-l' name='jfPrice' style='margin-left: 22px;width:80px;' oninput='input(this)' onchange='changeJfPrice(this)'></td><td><input type='text' class='input-control number input-l' name='money' style='margin-left: 22px;width:80px;' oninput='input(this)' onchange='changeMoney(this)'></td>";
// html+="<th><label class='control-label' >参与门店</label><td colspan='3' style='width: 600px;'><select id='shopId' name='shopId' class='shopName_selected' data-placeholder='请选择所属门店' style='width: 80%;height:35px;' multiple = 'multiple'></select></td></th>";
html+="<td><input name='dzInfo' type='checkbox' onchange='changeDz(this)'></td><td><input name='hotInfo' type='checkbox' onchange='changeHot(this)'></td><td><input name='marketbleInfo' type='checkbox' onchange='changeMarketble(this)'><input name='specAndPriceStockInfo' type='text' hidden='hidden' price='0.0' stock='0.0' marketble='0' isDz='0' specId='"+specId+"' storeSn='"+storeSn+"' specText='"+specText+"' specPrice='' StockRatio='' hotInfo='0' jfPrice='' money=''/></td></tr>";
}
specInfoTable.html(html);
}
其中getRows()方法如下
function getRowsNum(specData){
var rowsNum=[];
var len=$(specData).length;
var row1=1;
for (let i = 0; i < len; i++) {
var item=specData[i].split(',').length;
row1*=item;
}
for (let i = 0; i < len; i++) {
var item=specData[i].split(',').length;
if(i==0){
rowsNum[i]=row1/item;
}else{
rowsNum[i]=rowsNum[i-1]/item;
}
row1*=item;
}
return rowsNum;
}
新增java实现根据提供的规格数据,实现生成规格商品
public R createTableData(String tenantId,String specId,String gName) {
List<String> result=new ArrayList<>();
Map<String,List<String>> map=new HashMap<>();
map.put("颜色",Arrays.asList(new String[]{"赤","橙","黄","绿"}));
map.put("大小",Arrays.asList(new String[]{"65","66","67","68"}));
map.put("内存",Arrays.asList(new String[]{"128","256"}));
map.put("版本",Arrays.asList(new String[]{"pro","plus"}));
map.put("材质",Arrays.asList(new String[]{"k99"}));
//选择的规格名称
List<String> spec=new ArrayList<>();
if(map.keySet().size()>0){
StringBuilder sb=new StringBuilder("");
for (String s : map.keySet()) {
spec.add(s);
}
}
//每个规格的步长
int[] rowsNum=getRowNum(spec,map);
int totalRows=rowsNum[0]*(map.get(spec.get(0)).size());
for (int i = 0; i < totalRows; i++) {
StringBuilder sb=new StringBuilder();
for (int j = 0; j < spec.size(); j++) {
int times=(int)(Math.floor(i/rowsNum[j]));
int index=times%(map.get(spec.get(j)).size());
sb.append(map.get(spec.get(j)).get(index));
}
String s = sb.substring(0, sb.length() - 1).toString();
result.add(s);
}
return R.data(result);
}
private int[] getRowNum(List<String> spec,Map<String, List<String>> map) {
int[] rowsNum=new int[spec.size()];
int len=spec.size();
int row1=1;
for (int i = 0; i < len; i++) {
int item=map.get(spec.get(i)).size();
row1*=item;
}
for (int i = 0; i < len; i++) {
int item=map.get(spec.get(i)).size();
if(i==0){
rowsNum[i]=row1/item;
}else{
rowsNum[i]=rowsNum[i-1]/item;
}
row1*=item;
}
return rowsNum;
}