xm-select下拉自定义列表

var initChannels = function () {
    // 关联中心频道下拉组件
    channelSelect = xmSelect.render({
        el: document.getElementById("channels"),
        tips: "请选择频道",
        direction: 'down',                    //下拉框展开方向，下方展开
        radio: true,
        filterable: true,
        height: "400px",
        theme: {
            color: '#278AFF',                 //主题颜色
        },
        prop: {
            name: "channelName",          //将name字段更改为navTemplateInfo字段
            value: "channelId"                       //将value字段更改为id字段
        },
        model: {
            label: {
                type: 'block',
                block: {
                    //最大显示数量, 0:不限制
                    showCount: 0,
                    //是否显示删除图标
                    showIcon: false,
                }
            }
        },
        content: `
		<table class="layui-table" id="channelList" lay-filter="channelFilter">
		</table>`
    });
    layui.table.render({
        elem: "#channelList",
        url: $appRoot + "/tstvchannel/tstvChannelExt/getListAndPackages",
        cols: [[
            {field: 'channelName', width: 150, title: '名称', templet: channelNameTemp},
            // {field: 'dataStatus', width: 40, templet: statusTemp, title: '状态'},
            {field: 'tstvStatus', width: 40, title: '时移', templet: tstvStatusTemp},
            {field: 'replayStatus', width: 40, title: '回看', templet: replayStatusTemp},
            {field: 'relatedChannels', width: 180, title: '关联套餐', templet: packageStatusTemp}
        ]],
        loading: true,
        id: "channelList",
        page: {
            layout: ['limit', 'count', 'prev', 'page', 'next'] //自定义分页布局
            , first: false //不显示首页
            , last: false //不显示尾页
            , theme: '#5CB85C'
        },
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": 0, //解析接口状态
                "msg": "", //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.rows //解析数据列表
            };
        },
        done: function (res, curr, count) {
            if ($("#searchChannel").length == 0) {
                // 添加搜索
                var parent = $(".xm-body, .absolute")[0];
                var searchDiv = document.createElement("div");
                searchDiv.className = "xm-search";
                var searchIcon = document.createElement("i");
                searchIcon.className = "xm-iconfont xm-icon-sousuo";
                searchIcon.style = "margin-left: 10px;";
                searchIcon.id = "searchChannel";
                var searchInput = document.createElement("input");
                searchInput.style = "    width: 93%;height: 33px;border: none;" +
                    "border-bottom: 1px solid #E6E6E6;";
                searchInput.id = "searchContent";
                searchInput.placeholder = "频道搜索";

                searchDiv.append(searchInput);
                searchDiv.append(searchIcon);

                parent.prepend(searchDiv);
            }

            if (curr === 1 && centerChannel != "") {
                var info = eval('(' + centerChannel + ')');
                channelSelect.setValue([info]);
            }

            // 防止点击冒泡
            $("#searchContent").click(function (event) {
                event.preventDefault();
                window.event.returnValue = false;
                return false;
            });

            $("#searchChannel").on("click", function () {
                event.preventDefault();
                window.event.returnValue = false;

                searchContent = $("#searchContent").val();
                layui.table.reload('channelList', {
                    url: $appRoot + "/tstvchannel/tstvChannelExt/getListAndPackages"
                    , where: {
                        channelName: searchContent
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            $(".layui-icon")[0].innerHTML = "<";
            $(".layui-icon")[1].innerHTML = ">";
        }
    });

    layui.table.on('row(channelFilter)', function (obj) {
        channelSelect.setValue([obj.data]);
        // var data = layui.table.cache["channelList"];
        // console.log(data);
        $(".layui-table-box").find("tbody").find("tr").find("span").each(function () {
            if ($(this).attr("class") == "channelName") {
                $(this).css('color', 'black');
            }
        })

        obj.tr.find("span")[0].style = "color: red;";
    });

    $(".scroll-body")[0].style.margin = "-15px 0px";
}

function channelNameTemp(data) {
    if (centerChannel != "") {
        var info = eval("(" + centerChannel + ")");
        if (data.channelId == info.channelId) {
            return '<span style="color: red;" class="channelName">' + data.channelName + '</span>';
        }
    }

    return '<span class="channelName">' + data.channelName + '</span>';
}