js 弹出框 importTags控件使用案例

最新推荐文章于 2022-10-25 18:45:19 发布

caox_nazi

最新推荐文章于 2022-10-25 18:45:19 发布

阅读量640

点赞数

分类专栏： WEB前端文章标签： importTags

本文链接：https://blog.csdn.net/caox_nazi/article/details/78345275

版权

WEB前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

js 弹出框 importTags控件使用案例

（1）html 页面

<div class="row-form">
                        <div class="span4">收件人</div>
                        <div class="span8 input-append">
                            <input type="hidden" name="email_receive" id="email_receive_state" value=""/>
                            <input type="text" name="email_real_name" id="email_real_name_state" value="" readonly="readonly"
                                   class="validate[]"/>
                            <button class="btn" type="button"
                                    οnclick="pop_custom_dialog(26666,'pop_email_select_value_upt',true)">选择
                            </button>
                        </div>
                    </div>

pop_custom_dialog 弹框选择

（2）弹框js代码

 //*********************************自定义弹出框，选择返回结果**********************************
    function pop_custom_select_value(popId, selectId, isMulit, value) {
        if (selectId == "pop_email_select_value") {
            pop_mailgroup_select_value(popId, selectId, isMulit, value);
        }
        if (selectId == "pop_email_select_value_upt") {
            pop_mailgroup_select_value_upt(popId, selectId, isMulit, value);
        }
    }

（3）收件人多选值js代码

//*********************************自定义弹出框，选择返回结果(修改)*****************************
    var listPayUpt=[];
    function pop_mailgroup_select_value_upt(popId,selectId,isMulit,value) {
        if(value != "") {
            for(var i=0;i<value.length;i++) {
                var valJson = jQuery.parseJSON(value[i]);
                listPayUpt.push([valJson.email,valJson.real_name]);
            }
            //去重
            var dic = {};
            for (var i = listPayUpt.length; i--;)  dic[listPayUpt[i]]=listPayUpt[i];
            var r = [];
            for (var v in dic)    r.push(dic[v]);
            listPayUpt=r;
            //排序
            //  listPay.sort(function(a,b){return a[0]-b[0]});
        }
        payStyleUpt();
        AutoSetPayNameUpt();
    }
    var flagtagsUpt =true;
    function payStyleUpt(){
        if (flagtagsUpt){
            $("#email_real_name_state").tagsInput({'width':'100%',
                'height':'auto',
                'onRemoveTag': function(text){
                    for(var i=0;i<listPayUpt.length;i++)
                        if(text==listPayUpt[i][1])
                            listPayUpt.splice(i,1);
                    AutoSetPayNameUpt();
                    $("#detailList").slideUp();
                },'defaultText':''//默认输入框的文本提示
            });
            $(".tagsinput").css("min-height","28px");
            $("#real_name_tag").remove();
            flagtagsUpt = false;
        }
    }
    function AutoSetPayNameUpt(){
        var listPname = [];
        var listPid=[];
        for(var i=0;i<listPayUpt.length;i++){
            listPname.push(listPayUpt[i][1]);
            listPid.push(listPayUpt[i][0]);
        }
        $("#email_real_name_state").importTags(listPname.join(","));
        if(listPname.length==0)	{
            $("#email_real_name_state").importTags("");
        }
        $("#email_real_name_state").val(listPname.join(","));
        $("#email_receive_state").val(listPid.join(";"));
    }

（4）实际页面效果