var ruleThenValueArrOrigin = [];
//定义xm-select下拉组件
var navTemplateListSelect = null;
var navList;
var initDate = function () {
navList = navJson;
//模板组下拉组件
navTemplateListSelect = xmSelect.render({
el: document.getElementById("navTemplateList"),
initValue: ruleThenValueArrOrigin, //按id排序数组
tips: "请选择模板...",
direction: 'down', //下拉框展开方向,下方展开
autoRow: true, //自动换行
theme: {
color: '#278AFF', //主题颜色
},
template({item}) {
if (item.dataStatus === 1) {
return item.navTemplateInfo;
}
//停用模板红色标注
return '<span style="color: #e54d42">' + item.navTemplateInfo + '</span>';
},
model: {
label: {
type: 'myShow', //自定义显示内容
myShow: {
template(data, sels) {
var all = '';
//拼接所有选中模板
sels.forEach(function (item) {
var html = "";
if (item.dataStatus === 1) {
html = '<div class="xm-label-block" style="background-color: #278AFF;">' +
'<span style="width: calc(100% - 20px);" id="' + item.id + '">' + item.navTemplateInfo + '</span>' +
'<i class="xm-iconfont xm-icon-close" onclick="deleteItem(this, event)"></i></div>';
} else {
html = '<div class="xm-label-block" style="background-color: #e54d42;">' +
'<span style="width: calc(100% - 20px);" id="' + item.id + '">' + item.navTemplateInfo + '</span>' +
'<i class="xm-iconfont xm-icon-close" onclick="deleteItem(this, event)"></i></div>';
}
all = all + html;
});
return all;
}
},
}
},
on: function (data) {
changeRuleThenValue(data);
},
prop: {
name: "navTemplateInfo", //将name字段更改为navTemplateInfo字段
value: "id" //将value字段更改为id字段
},
data: navList //所有可选择下拉模板
});
}
/**
* 选中模板的叉号按钮,点击取消选中.
*
* @param el
* @param event
*/
function deleteItem(el, event) {
//移除div
el.parentNode.parentNode.removeChild(el.parentNode);
reload(event);
}
/**
* 修改结果值,重新排序.
*/
function changeRuleThenValue(data) {
var ruleThenValueArr = "";
$.each(data.arr, function (index, obj) {
// 原始数据不存在则说明是新增数据
if (ruleThenValueArr === "") {
ruleThenValueArr = obj.id;
} else {
ruleThenValueArr = ruleThenValueArr + ',' + obj.id;
}
});
ruleThenValue = ruleThenValueArr;
}
// 可拖动
function initDraggle() {
var flag = 0;
$(".xm-label-block").draggable({
scroll: false,
stop: function (event, ui) {
$(".xm-label-block").each(function (i, element) {
if(flag === 0) {
// 当前元素距顶部、左侧的距离
var thex = element.offsetLeft;
var they = element.offsetTop;
// 拖动元素距离顶部、左侧的距离
var x = event.target.offsetLeft;
var y = event.target.offsetTop;
// 当前元素的长宽
var thewidth = element.offsetWidth;
var theheight = element.offsetHeight;
// 拖动元素左上角的点在该元素内部
if (x > thex && y > they && (x < thex + thewidth) && (y < they + theheight)) {
// 该元素不是拖动元素的上一个节点,即相对位置并无变化
if(element.nextSibling === event.target) {
} else {
element.parentElement.insertBefore(event.target, element.nextSibling);
reload(event);
flag = 1;
initDraggle();
}
}
}
})
if(flag === 0) {
$(event.target).css("left", "0");
$(event.target).css("top", "0");
}
}
});
}
function reload(event) {
var runthenValue = "";
//拼接选中模板
$(".xm-label-block").each(function (index, element) {
var id = $(element).find('span').attr("id");
if (runthenValue === "") {
runthenValue = id;
} else {
runthenValue = runthenValue + "," + id;
}
});
ruleThenValue = runthenValue;
ruleThenValueArrOrigin = ruleThenValue.split(",");
//删除模板后,选中模板重新渲染
// navTemplateListSelect.setValue(ruleThenValueArrOrigin);
navTemplateListSelect.update({
data: navList,
initValue: ruleThenValueArrOrigin
});
//防止点击冒泡
event.stopPropagation();
}