articleMark.html 3.7 KB
<!DOCTYPE html>
<style>
    .tag{
        display: block;
        float: left;
        padding: 2px 5px;
        background: #1caf9a;
        margin-right: 5px;
        margin-bottom: 5px;
        margin-top: 5px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        font-size: 13px;
    }
</style>
<div id="tt" class="easyui-layout" fit="true" style="overflow-y: scroll">
    <form name="articleMarkForm" id="articleMarkForm" method="post">



        <div style="margin-top: 20px;margin-left: 30px">
            <table border="0" style="width:95%;margin-top:5px;line-height:30px;" id="tab">
                <tr style="height: 60px">
                    <td style="width:100%;">
                        <label style="font-size: 14px;">选择渠道</label> <br>
                        <input id="channelId" name="channelId" class="easyui-combobox" style="width:50%; "/><br>

                        <input id="channelIds" name="channelIds" hidden="hidden"/>
                        <div id="channelList">

                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>

</div>


<script>

    $(function () {

        $("#channelId").combobox({
            prompt: "请选择渠道",
            required: false,
            selectOnNavigation : true,
            valueField: 'id',
            textField: 'channelName',
            multiple:true,
            url : serverContextPath + "/grassChannelManage/getAllGrassChannelInfo",
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            onChange:function (data) {
                var arr = $(this).combobox("getValues");
                var textarr = $(this).combobox("getData");
                var channelList='';
                for (var i=0; i<arr.length;i++){
                    var text = '';
                    for (var j=0; j< textarr.length;j++){
                        if(arr[i] == textarr[j].id){
                            text=textarr[j].channelName;
                        }
                    }
                    channelList+='<span class="tag"><span>'+text+'</span><a href="#" class="labelTag" data-index="'+i+'">x</a></span>&nbsp&nbsp&nbsp'
                }
                $("#channelList").html(channelList);
            },
            onLoadSuccess:function () {
                var arr = $(this).combobox("getValues");
                var textarr = $(this).combobox("getData");
                var channelList='';

                for (var i=0; i<arr.length;i++){
                    var text = '';
                    for (var j=0; j< textarr.length;j++){
                        if(arr[i] == textarr[j].id){
                            text=textarr[j].channelName;
                        }
                    }
                    channelList+='<span class="tag"><span>'+text+'</span><a href="#" class="labelTag" data-index="'+i+'">x</a></span>&nbsp&nbsp&nbsp'
                }
                $("#channelList").html(channelList);
            }
        });

        var data = paramObject.mkData;
        if (data){
            var channelIds = [];
            if(data.channelList!=null && data.channelList.length>0){
                for (var i=0;i<data.channelList.length;i++){
                    channelIds.push(data.channelList[i].id);
                }
            }
            $("#channelId").combobox('setValues',channelIds);
        }

        $(document).on("click", ".labelTag", function () {
            var index = $(this).attr("data-index");
            var arr =  $("#channelId").combobox("getValues");
            $("#channelId").combobox("unselect",arr[index]);
        });

    });


</script>

</html>