xm-select自定义词条

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();
}