html sku效果后台,sku.html

TODO supply a title

//如为编辑页面，HTML代码的Input需设置为checked，JS部分没有去做判断

//后端传过来的值，编辑SKU时使用，新建时设置为{}

var query = {

'1_5_7':{

'price':'258',

'sku_name':'690001',

// 'image':'H10GH'

},

'1_6_7':{

'price':'278',

'sku_name':'690001',

// 'image':'H18GH'

},

'1_5_8':{

'price':'258',

'sku_name':'690001',

// 'image':'H10GL'

},

'1_6_8':{

'price':'278',

'sku_name':'690001',

// 'image':'H18GL'

}

};

//var query = {};

var linekey = []; //初始化表格行内输入框的key值

$(function() {

$('input[type=checkbox]').on('change', function() {

if ($('input[type=checkbox]').is(':checked')) {

$(this).attr('checked', true);

buildT();

} else {

$(this).removeAttr('checked');

buildT();

}

});

// $(':checkbox').on('ifChecked', function () {

// $(this).attr('checked', true);

// buildT();

// });

//

// $(':checkbox').on('ifUnchecked', function () {

// $(this).removeAttr('checked');

// buildT();

// });

buildT();//如果是编辑页面，去掉注释进行表格初始化

});

function buildT() {

var specs = [];

var maxline = 1; //初始化SKU最大行数

$('#specList').children().each(function() {

var _checkobj = $(this).find(':checked'),

_list = [];

if (_checkobj.length == 0) {

return;

}

$(_checkobj).each(function(index, item) {

_list.push({

//'title': $(item).parent().next().html(), //由于使用了iCheck插件，层级关系发生了变化，需要使用parent()来重新定位lable标签的值

'title': $(item).next().html(),

'id': $(item).val()

});

});

data = {

'id': $(this).attr('server-id'),

'title': $(this).attr('server-name'),

'count': _checkobj.length,

'childlist': _list

}

maxline = maxline * parseInt(_checkobj.length);

specs.push(data);

});

//循环获取rowspan值

var yu = 1;

$(specs).each(function(index) {

specs[index].row = (maxline / specs[index]['count']) / yu;

yu = yu * specs[index].count;

});

//构建表格行数据

var headarr = [],

tbodyarr = [];

$(specs).each(function(index, item) {

headarr.push(item.title);

tbodyarr = buildTT(tbodyarr, item);

});

var headdata = '',

tbodydata = '';

$.each(headarr, function(index) {

headdata += '

' + headarr[index] + '';

});

//headdata += '

价格名称图片';

headdata += '

价格备注';

$.each(tbodyarr, function(index) {

tbodydata += '

' +

tbodyarr[index] +

'

' +

'

' +

// '

' +

'

';

});

$('#tableAttr').html('').append('' + headdata + '').append('

' + tbodydata + '');

buildTTT();

}

/**

* 构建表格每行的td值

* @param odata 前面经过处理的数据

* @param adata 需要新添加进去处理的数据

*/

function buildTT(odata, adata) {

console.log(odata);

console.log(adata);

var data = [],

_linekey = [];

if (odata.length == 0) {

$(adata.childlist).each(function(index, item) {

var _data = '

' + item.title + '';

data.push(_data);

_linekey[index] = item.id;

});

} else {

var i = 0;

$(odata).each(function(index, item) {

$(adata.childlist).each(function(index2, item2) {

var _item = index2 == 0 ? item.concat() : '';

var _data = _item + '

' + item2.title + '';

data.push(_data);

_linekey[i] = linekey[index] + '_' + item2.id;

i++;

});

});

}

linekey = _linekey;

return data;

}

function buildTTT() {

//对初始化的表格每行的key值进行排序，与入库值保持一致

$(linekey).each(function(index) {

linekey[index] = linekey[index].split('_').sort().join('_');

});

//对初始化的表格input进行赋值

$('#tableAttr tbody').children('tr').each(function(index) {

var _obj = $(this).find('input');

// console.log(_obj.html());

var _linekey = linekey[index];

_obj.eq(0).attr('name', 'price[' + _linekey + ']');

_obj.eq(1).attr('name', 'sku_name[' + _linekey + ']');

// _obj.eq(2).attr('name', 'image[' + _linekey + ']');

if (query[_linekey]) {

_obj.eq(0).val(query[_linekey]['price']);

_obj.eq(1).val(query[_linekey]['sku_name']);

// _obj.eq(2).val(query[_linekey]['image']);

}

});

}

属性选择：

属性

内存：

无内存

4GB

8GB

16GB

颜色：

黄色

蓝色

粉色

紫色

银色

蓝色

粉色

紫色

银色

版本：

标准版

增强版

一键复制

编辑

Web IDE

原始数据

按行查看

历史