js 弹出框 importTags控件使用案例

蔚落 2022-06-06 00:50 243阅读 0赞

**js 弹出框 importTags控件使用案例 **

**（1）html 页面**

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）实际页面效果

**![20171025193020362][]**

[20171025193020362]: /images/20220606/5444a2dcf4964b6b97944e39a2eef820.png