背景:
使用_.template()生成对应数据的对应html代码
核心代码:
//定义一个变量来装finalHtml
var finalHtml = ''
//1.模版
compiled = _.template(
[
'<span class="${clazz}" index="${index}"
style="background:${bgColor};color:${color};position:relative;"',
' fontcolor="${color}" bgcolor="${bgColor}">',
'${title}',
'</span>',
].join('')
)
var para = {
clazz: ['class1', 'class2'].join(' '),
index: index,
bgColor: bgColor,
color: color,
title: title,
i18n_text: i18n_text
}
//拼接
finalHtml += compiled(para)
其它,数据形式如下:
{
index:0,
title: '1年内',
minVal:0,
maxVal:1,
color: '#000',
bgColor:'rgba(1,255,1,.7)',
layerGroupName:'测量时间类型',
isgroup:'yes',
notCreate: false,
mutexGroup: 'tc_Depth',
checked: true,
i18n_text: 'tc_MeasuringTimePlane_0Year',
},
{
index:3,
title: '1~2年',
minVal:1,
maxVal:2,
color: '#000',
bgColor: 'rgba(255,255,0,.7)',
layerGroupName:'测量时间类型',
isgroup:'yes',
notCreate: false,
mutexGroup: 'tc_Depth',
checked: true,
i18n_text: 'tc_MeasuringTimePlane_1Year',
},
{
index:2,
title: '2~3年',
minVal:2,
maxVal:3,
color: '#000',
bgColor: 'rgba(255,192,0,.7)',
layerGroupName:'测量时间类型',
isgroup:'yes',
notCreate: false,
mutexGroup: 'tc_Depth',
checked: true,
i18n_text: 'tc_MeasuringTimePlane_2Year',
},
{
index:1,
title: '3年以上',
minVal:3,
maxVal:100,
color: '#fff',
bgColor: 'rgba(214,20,21,.7)',
layerGroupName:'测量时间类型',
isgroup:'yes',
notCreate: false,
mutexGroup: 'tc_Depth',
checked: true,
i18n_text: 'tc_MeasuringTimePlane_3Year',
},