首页 > 代码库 > 关于jQuery模态框加载完成的一点处理

关于jQuery模态框加载完成的一点处理

2024-10-04 23:26:39   213人阅读

$("#addFilter").bind("click",function(){    
                filter_operate="add";
                clearData();
                modalOpen({
                    title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                     id:"filterItem_window",
                     height:$(window).height()
                });
                controlButton("filterItem_window");
                return false;
            });

当点击#addFilter添加模态框的时候，由于模态框加载未完成，所以暂时获取不到想要的宽高，处理方法：让controlButton方法延迟0.2s模态框加载完成之后执行（关于如何判断模态框内容加载完成的方法，后期查好了加入）

function controlButton(id){
	setTimeout(function(){
		var innerHeight = window.innerHeight;
		var formHeight = $("#"+id+" .modal-body .form").height();
		if((parseFloat(formHeight,10) + 148)> innerHeight){
			$("#"+id+" .modal-footer").css({position:"fixed",bottom:"0px"});
			$("#"+id+" .modal-body").height((innerHeight - 148)+"px");
			$("#"+id+" .modal-body").css({"overflow":"scroll","overflow-x":"hidden"});
			$("#"+id+" .modal-body .form").width($("#"+id+" .modal-body").width());//使加了滚动条之后不影响其宽度
		}else{//如果内容区比窗口区大的时候设置了上述方法，当变到内容区比窗口区小的时候，需要恢复原来的样子，所以需要加else移除加的方法
			$("#"+id+" .modal-footer").css({position:"",bottom:""});
			$("#"+id+" .modal-body").height(formHeight+"px");
			$("#"+id+" .modal-body").css({"overflow":"","overflow-x":""});
			$("#"+id+" .modal-body .form").width($("#"+id+" .modal-body").width());
		}
	},200);
}

 窗口尺寸变化时，内容区跟随变化：内容区大于窗口则按钮固定在底部区域；内容区小于窗口则按钮紧跟内容区后。

$(document).ready(function(){
            $(window).resize(function(){
                if($("#filterItem_window").css("display")=="block"){
                    clearData();
                    modalOpen({
                        title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                         id:"filterItem_window",
                         height:$(window).height()
                    });
                    controlButton("filterItem_window");
                    return false;
                }
            });
        });

由于页面上有2个模态框#filterItem_window、#superItem_window的显示，所以根据其display属性去判断执行对应的窗口尺寸变化触发的对应的模态框的变化。

$(document).ready(function(){
                $(window).resize(function() {
                    if($("#superItem_window").css("display")=="block"){
                        clearData1();
                        modalOpen({
                            title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                             id:"superItem_window",
                             height:$(window).height()
                        });
                        controlButton("superItem_window");
                        return false;
                    }
                });
            });

任务比较急，所以没有很好的优化，暂时解决了这个需求，下面是全代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
 <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
    request.setAttribute("basePath", basePath);
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<script type="text/javascript" src="${basePath}/scripts/other/jquery.json-2.4.js"></script>
<script type="text/javascript" src="${basePath}/scripts/buttonStyle/policyButtonStyle.js"></script> 
<script type="text/javascript" src="${basePath}/scripts/layer/layer.js"></script>
<link href="<%=basePath %>/styles/searchstyle.css" rel="stylesheet" type="text/css"/>
<style>
/**协议防火墙CSS 开始**/
 img{margin: 0 0 3px 5px;}
/**协议防火墙CSS 结束**/
</style>
<script type="text/javascript">

$(function(){
    $("#filterItem_table").jqGrid({
        datatype:"local",
        height:215,
        autowidth:800,
        viewrecords: false,
        multiselect: true, 
        rownumbers: false,
        colModel:[
            {index:‘ip‘,name:‘ip‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.ip"/>‘,align:‘center‘,width:150,
                unformat:function(value,opt){
                    var strTemp=value.replace(/[\u4E00-\u9FA5](|)/g,‘‘);
                    strTemp=strTemp.replace(/\(/,"");
                    strTemp=strTemp.replace(/\)/,"");
                    return strTemp;
                }
                ,formatter:function(value,index,row){
                    if(value==""){
                        value=‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘;
                    }
                    if(row.ipType=="y"){
                        return value;
                    }else{
                        return value+‘(<s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/>)‘;
                    }
            }}
            ,{index:‘ipType‘,name:‘ipType‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.ipType"/>‘,align:‘center‘,hidden:true}
            ,{index:‘nametype‘,name:‘nametype‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.nametype"/>‘,align:‘center‘,hidden:true}
            ,{index:‘protocol‘,name:‘protocol‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.protocol"/>‘,align:‘center‘,width:150,
                unformat:function(value){
                var strTemp=value.replace(/[\u4E00-\u9FA5](|)/g,‘‘);
                strTemp=strTemp.replace(/\(/,"");
                strTemp=strTemp.replace(/\)/,"");
                if(strTemp==‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.every"/>‘){
                    strTemp="";
                }else if(strTemp=="HOPOPT"){
                    strTemp="0";
                }else if(strTemp=="ICMPv4"){
                    strTemp="1";
                }else if(strTemp=="IGMP"){
                    strTemp="2";
                }else if(strTemp=="TCP"){
                    strTemp="6";
                }else if(strTemp=="UDP"){
                    strTemp="17";
                }else if(strTemp=="IPv6"){
                    strTemp="41";
                }else if(strTemp=="IPv6-Route"){
                    strTemp="43";
                }else if(strTemp=="IPv6-Frag"){
                    strTemp="44";
                }else if(strTemp=="GRE"){
                    strTemp="47";
                }else if(strTemp=="ICMPv6"){
                    strTemp="58";
                }else if(strTemp=="IPv6-NoNxt"){
                    strTemp="59";
                }else if(strTemp=="IPv6-Opts"){
                    strTemp="60";
                }else if(strTemp=="VRRP"){
                    strTemp="112";
                }else if(strTemp=="PGM"){
                    strTemp="113";
                }else if(strTemp=="L2TP"){
                    strTemp="115";
                }
                return strTemp;
                },
                formatter:function(value,index,row){
                    if(value==""){
                        value=‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.every"/>‘;
                    }else if(value=="0"){
                        value="HOPOPT";
                    }else if(value=="1"){
                        value="ICMPv4";
                    }else if(value=="2"){
                        value="IGMP";
                    }else if(value=="6"){
                        value="TCP";
                    }else if(value=="17"){
                        value="UDP";
                    }else if(value=="41"){
                        value="IPv6";
                    }else if(value=="43"){
                        value="IPv6-Route";
                    }else if(value=="44"){
                        value="IPv6-Frag";
                    }else if(value=="47"){
                        value="GRE";
                    }else if(value=="58"){
                        value="ICMPv6";
                    }else if(value=="59"){
                        value="IPv6-NoNxt";
                    }else if(value=="60"){
                        value="IPv6-Opts";
                    }else if(value=="112"){
                        value="VRRP";
                    }else if(value=="113"){
                        value="PGM";
                    }else if(value=="115"){
                        value="L2TP";
                    }
                    if(row.protocolType=="y"){
                        return value;
                    }else{
                        return value+‘(<s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/>)‘;
                    }
            }}
            ,{index:‘protocolType‘,name:‘protocolType‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.protocolType"/>‘,align:‘center‘,width:265,hidden:true}
            ,{index:‘port‘,name:‘port‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.port"/>‘,align:‘center‘,
                formatter:function(value,index,row){
                    if(value==""){
                        value=‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘;
                    }
                    if(row.portType=="y"){
                        return value;
                    }else{
                        return value+‘(<s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/>)‘;
                    }
            },
              unformat:function(value){
                  var strTemp=value.replace(/[\u4E00-\u9FA5](|)/g,‘‘);
                    strTemp=strTemp.replace(/\(/,"");
                    strTemp=strTemp.replace(/\)/,"");
                    return strTemp;
              }
            
            }
            ,{index:‘portType‘,name:‘portType‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.portType"/>‘,align:‘center‘,width:265,hidden:true}
            ,{index:‘process‘,name:‘process‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.process"/>‘,align:‘center‘,width:150,
                formatter:function(value,index,row){
                    if(value==""){
                        value=‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘;
                    }
                    if(row.processType=="y"){
                        return value;
                    }else{
                        return value+‘(<s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/>)‘;
                    }
            },
              unformat:function(value){
                  var strTemp=value.replace(/[\u4E00-\u9FA5](|)/g,‘‘);
                    strTemp=strTemp.replace(/\(/,"");
                    strTemp=strTemp.replace(/\)/,"");
                    return strTemp;
              }}
            ,{index:‘processType‘,name:‘processType‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.processType"/>‘,align:‘center‘,width:200,hidden:true}
            ,{index:‘direction‘,name:‘direction‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.direction"/>‘,align:‘center‘,width:150,
                formatter:function(value,index,row){
                    if(value=="0"){
                        return ‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘;
                    }else if(value=="1"){
                        return ‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.outBound"/>‘;
                    }else{
                        return ‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.inBound"/>‘;
                    }
            },    unformat:function(value){
                if(value==‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘)
                {
                value="0";
                }else if(value==‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.outBound"/>‘){
                    value="1";
                }else{value="2";}
            return value;
            
        }
            }
            ,{index:‘operate‘,name:‘operate‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.operate"/>‘,align:‘center‘,width:150,
                formatter:function(value,index,row){
                    if(value=="0"){
                        return ‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.n"/>‘;
                    }else{
                        return ‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.y"/>‘;
                    }
            },unformat:function(value){
                if(value==‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.n"/>‘)
                {
                value="0";
                }else{value="1";}
            return value;
            
        }
            
            }
            ,{index:‘note‘,name:‘note‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.note"/>‘,align:‘center‘, width:100}
            ],
    });
    var data=$("#filterItem_hidden").val();
    if(data!=""){
        var obj = eval("(" + data + ")");
        $.each(obj,function(i,v){
            $("#filterItem_table").jqGrid("addRowData",i+1,v);
        })
        
    }
    //符合以上规则的网络连接：口 审计
    var auditState="<s:property value=http://www.mamicode.com/‘#session.protocolFireWall.auditState‘/>";
    if(auditState=="enabled"){
        $("#auditState_check").prop("checked",true);
        $("#auditState_hidden").val("enabled");
    }else{
        $("#auditState_check").prop("checked",false);
        $("#auditState_hidden").val("disable");
    }
    //复选审计添加绑定事件
    $("#auditState_check").bind("click",function(){
        if($(this).prop("checked")){
            $("#auditState_hidden").val("enabled");
        }else{
            $("#auditState_hidden").val("disable");
        }
    });
    //
    $("input[type=‘radio‘][name=‘protocolFireWall.defaultHandle.outBound‘][value=http://www.mamicode.com/‘‘]").attr("checked",true);
    $("input[type=‘radio‘][name=‘protocolFireWall.defaultHandle.inBound‘][value=http://www.mamicode.com/‘‘]").attr("checked",true);

    //
     $("#superIpItem_table").jqGrid({
         datatype:"local",
         height:100,
         width:754,
         viewrecords: false,
         multiselect: true, 
         rownumbers: false,
         colModel:[
            {index:‘ip‘,name:‘ip‘, label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.ip"/>‘,align:‘center‘,width:360,
                unformat:function(value,opt){
                    var strTemp=value.replace(/[\u4E00-\u9FA5](|)/g,‘‘);
                    strTemp=strTemp.replace(/\(/,"");
                    strTemp=strTemp.replace(/\)/,"");
                    return strTemp;
                    }
                    ,formatter:function(value,index,row){
                        if(value==""){
                            value=‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘;
                        }
                        if(row.ipType=="y"){
                            return value;
                        }else{
                            return value+‘(<s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/>)‘;
                        }
                        
                }
                
                
            }
            ,{index:‘ipType‘,name:‘ipType‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.ipType"/>‘,align:‘center‘,hidden:true}
            ,{index:‘port‘,name:‘port‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.port"/>‘,align:‘center‘,width:265,
                unformat:function(value,opt){
                    var strTemp=value.replace(/[\u4E00-\u9FA5](|)/g,‘‘);
                    strTemp=strTemp.replace(/\(/,"");
                    strTemp=strTemp.replace(/\)/,"");
                    return strTemp;
                    }
                    ,formatter:function(value,index,row){

                        if(value==""){
                            value=‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/>‘;
                        }
                        if(row.portType=="y"){
                            return value;
                        }else{
                            return value+‘(<s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/>)‘;
                        }
                        
                }
                
                
            
            }
            ,{index:‘portType‘,name:‘portType‘,label:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.portType"/>‘,align:‘center‘ ,hidden:true    }
        ],

    });
    var data=$("#superIpItem_hidden").val();
    if(data!=""){
        var obj = eval("(" + data + ")");
        $.each(obj,function(i,v){
            $("#superIpItem_table").jqGrid("addRowData",i+1,v);
        })
        
    }
});

</script>
<table id="fireWall_table" cellpadding="0" cellspacing="0" style="padding:0;margin-left: 44px">
      <tr >
         <td  class="formTitle" colspan="2"><s:text name="com.vrv.cems.policy.template.protocolFireWall.filter"/>：</td>
      </tr>
    <tr>
       <td width="80px" style="display:block"></td>
           <td>
               <div class="toolbar_PolicyBaseSettings">
                   <a href="javascript:;" id="addFilter" class="btn_add" ><i class="fa fa-plus"></i><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/></span></a>
                   <a href="javascript:;" id="eidtFilter" class="btn_edit" ><i class="fa fa-pencil"></i><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.edit"/></span></a>
                   <a href="javascript:;" id="delFilter" class="btn_delete" ><i class="fa fa-remove"></i><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.delete"/></span></a>
               </div>
               <div style="clear:both;"></div>
               <table id="filterItem_table"></table>
               <input type="hidden" id="filterItem_hidden" name="protocolFireWall.filterItem" value="<s:property value=http://www.mamicode.com/‘#session.protocolFireWall.filterItem‘/>">
        </td>
     </tr>
     <tr height="40px">
     <td colspan="2" class="formTitle"><s:text name="com.vrv.cems.policy.template.protocolFireWall.conform.to.rules"/>：</td>
     </tr>
     <tr >
     <td width="80px"></td>
     <td>
     <input type="hidden" id="auditState_hidden" name="protocolFireWall.auditState" >
             <label class="checkbox-inline"><input type="checkbox" class="checkbox-blue" id="auditState_check"/><b></b>
               <s:text name="com.vrv.cems.policy.template.audit"/></label>
           </td>
     </tr>
     <tr height="40px">
         <td  colspan="2"  class="formTitle"><s:text name="com.vrv.cems.policy.template.protocolFireWall.other"/>：</td>
     </tr>
    <tr height="40px">
        <td width="80px"></td>
           <td>
               <div>
                   <label style="font-weight:bold;font-size:12px;color:#666;display:-moz-inline-box;display:inline-block;width:50px;"><s:text name="com.vrv.cems.policy.template.protocolFireWall.outBound"/><b></b></label>
                   <label  class="radio-inline"><input type="radio" class="radio-blue" name="protocolFireWall.defaultHandle.outBound" value="1"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.y"/></label>
                   <label  class="radio-inline"><input type="radio" class="radio-blue"  name="protocolFireWall.defaultHandle.outBound" value="0"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.n"/></label>
               </div>
               <div>
                   <label style="font-weight:bold;font-size:12px;color:#666;display:-moz-inline-box;display:inline-block;width:50px;"><s:text name="com.vrv.cems.policy.template.protocolFireWall.inBound"/><b></b></label>
                   <label  class="radio-inline"><input type="radio" class="radio-blue" name="protocolFireWall.defaultHandle.inBound" value="1"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.y"/></label>
                   <label  class="radio-inline"><input type="radio" class="radio-blue" name="protocolFireWall.defaultHandle.inBound" value="0"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.n"/></label>
               </div>
           </td>
           <input type="hidden" name=‘protocolFireWall.defaultHandle.type‘ value=‘<s:property value="#session.protocolFireWall.defaultHandle.type"/>‘ />
           <input type="hidden" name=‘protocolFireWall.defaultHandle.domainHandle‘ value="<s:property value=http://www.mamicode.com/‘#session.protocolFireWall.defaultHandle.domainHandle‘/>"/>
    </tr>
    <tr height="40px">
        <td  colspan="2"  class="formTitle"><s:text name="com.vrv.cems.policy.template.protocolFireWall.super"/>：</td>
       
    </tr>
    <tr>
      <td width="80px"></td>
        <td>
               <div class="toolbar_PolicyBaseSettings">
                   <a href="javascript:;" id="addSuper" class="btn_add" ><i class="fa fa-plus"></i><s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/></a>
                   <a href="javascript:;" id="editSuper" class="btn_edit" ><i class="fa fa-pencil"></i><s:text name="com.vrv.cems.policy.template.protocolFireWall.edit"/></a>
                   <a href="javascript:;" id="delSuper" class="btn_delete" ><i class="fa fa-remove"></i><s:text name="com.vrv.cems.policy.template.protocolFireWall.delete"/></a>
               </div>
               <div style="clear:both;"></div>
               <table id="superIpItem_table"></table>
               <input type="hidden" id="superIpItem_hidden" name="protocolFireWall.superIpItem" value="<s:property value=http://www.mamicode.com/‘#session.protocolFireWall.superIpItem‘/>">
        </td>
     </tr>
</table>
<!-- 添加连接控制弹窗 -->
<div class="modal fade" id="filterItem_window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style=" position: absolute; right: 0;top: 0; margin: 0;width:410px">
        <div class="modal-content" >
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"><s:text name=‘com.vrv.cems.policy.template.protocolFireWall.add‘/></h4>
            </div>
       <div class="modal-body">
    <table class="form">
        <tr>
            <td class="formTitle" width="80px"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.ip"/></span></td>
            <td class="">
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_nameType_radio" checked="checked" value="0" onclick="checkIpDomain(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.ip.ip"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_nameType_radio" value="1"  onclick="checkIpDomain(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.ip.domain"/></label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <label class="radio-inline"><input type="radio"  class="radio-blue" name="filter_ipType_radio" checked="checked" value="y" onclick="checkIpType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.eql"/></label>
                <label class="radio-inline"><input type="radio"  class="radio-blue" name="filter_ipType_radio" value="n" onclick="checkIpType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/></label>
                <label class="radio-inline"><input type="radio"  class="radio-blue" name="filter_ipType_radio" value="all" onclick="checkIpType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/></label>
                <input type="hidden" id="filter_ipType_hidden" value="y">
            </td>
        </tr>
        <tr id="filter_ip_tr">
            <td></td>
            <td id="filter_ip_td">
                <div class="filter_ip_div"><input id="filter_begin_ip" type="text" class="form-control {ip:true}" style="display:inline;width:135.5px;" />~<input id="filter_end_ip" type="text" class="form-control {ip:true}" style="display:inline;width:135.5px;"/><img src="${basePath}/images/add.png" onclick="addFilterIp()"/></div>
            </td>
        </tr>
        <input type="hidden" id="filter_ip_hidden">
        <tr id="filter_domain_tr" style="display: none">
            <td></td>
            <td id="filter_domain_td">
                <div class="filter_domain_div"><input id="filter_domain" type="text" class="form-control" style=" display:inline;width: 280px"  /><img src="${basePath}/images/add.png" onclick="addFilterDomain()"/></div>
            </td>
        </tr>
        <tr>
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.protocol"/></span></td>
            <td class="">
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_proType_radio" value="y" checked="checked"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.eql"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue"  name="filter_proType_radio" value="n"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/></label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                    <div id="protocol_combo" type="select"   class="ui-select" style="width:280px;">
                    <ul>
                        <li data-value=""><s:text name="com.vrv.cems.policy.template.protocolFireWall.every"/></li>
                        <li data-value="0">HOPOPT</li>
                        <li data-value="1">ICMPv4</li>
                        <li data-value="2">IGMP</li>
                        <li data-value="6">TCP</li>
                        <li data-value="17">UDP</li>
                        <li data-value="41">IPv6</li>
                        <li data-value="43">IPv6-Route</li>
                        <li data-value="44">IPv6-Frag</li>
                        <li data-value="47">GRE</li>
                        <li data-value="58">ICMPv6</li>
                        <li data-value="59">IPv6-NoNxt</li>
                        <li data-value="60">IPv6-Opts</li>
                        <li data-value="112">VRRP</li>
                        <li data-value="113">PGM</li>
                        <li data-value="115">L2TP</li>
                    </ul>
                    </div>
            </td>
        </tr>
        <tr id="filter_portType_tr">
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.port"/></span></td>
            <td class="">
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_portType_radio" checked="checked" value="y" onclick="checkPortType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.eql"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_portType_radio" value="n" onclick="checkPortType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_portType_radio" value="all" onclick="checkPortType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/></label>
                <input type="hidden" id="filter_portType_hidden" value="y">
            </td>
        </tr>
        <tr id="filter_port_tr">
            <td></td>
            <td id="filter_port_td">
                <div class="filter_port_div"><input id="filter_begin_port" type="text" class="form-control" style="display:inline;width:135.5px;"/>~<input id="filter_end_port" type="text" class="form-control" style="display:inline;width:135.5px;"/><img src="${basePath}/images/add.png" onclick="addFilterPort()"/></div>
            </td>
        </tr>
        <input type="hidden" id="filter_port_hidden">
        <tr id="filter_processType_tr">
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.process"/></span></td>
            <td>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_processType_radio" checked="checked" value="y" onclick="checkProcessType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.eql"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_processType_radio" value="n" onclick="checkProcessType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_processType_radio" value="all" onclick="checkProcessType(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/></label>
                <input type="hidden" id="filter_processType_hidden" value="y">
            </td>
        </tr>
        <tr id="filter_process_tr">
            <td></td>
            <td id="filter_process_td">
                <div class="filter_process_div"><input id="filter_process" type="text" class="form-control" style="width: 280px;display:inline"><img src="${basePath}/images/add.png" onclick="addFilterProcess()"/></div>
            </td>
        </tr>
        <input type="hidden" id="filter_process_hidden">
        <tr>
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.direction"/></span></td>
            <td class="">
                <label class="radio-inline"><input type="radio" class="radio-blue"  name="filter_direction_radio" value="1" checked="checked"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.outBound"/></span>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_direction_radio" value="2"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.inBound"/></label>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="filter_direction_radio" value="0"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/></label>
            </td>
        </tr>
        <tr>
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.operate"/></span></td>
            <td>
            <label class="radio-inline"><input type="radio"  class="radio-blue" name="filter_operate_radio" value="1" ><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.y"/></label>
                <label class="radio-inline"><input type="radio"  class="radio-blue" name="filter_operate_radio" value="0" checked="checked"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.n"/></label>
            </td>
        </tr>
        <tr>
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.note"/></span></td>
            <td>
                <textarea id="filter_note_text" class="form-control" style="width:280px;height:50px;line-height:24px;background-color:#f8f8f8;border:1px solid #a5a5a5;"></textarea>
            </td>
        </tr>
    </table>
    <script>
        var filter_operate;
        $(function(){
            $("#protocol_combo").ComboBox({
                description:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.every"/>‘,
                height:"150px",
                onselect:function(text,value){
                    if(value==""||value=="6"||value=="17"){
                        $("#filter_portType_tr").show();
                        $("#filter_port_tr").show();
                    }else{
                        $("#filter_portType_tr").hide();
                        $("#filter_port_tr").hide();
                        $("input[type=‘radio‘][name=‘filter_portType_radio‘][value=http://www.mamicode.com/‘all‘]").prop("checked",true);
                        $("#filter_begin_port").val("");
                        $("#filter_end_port").val("");
                    }
                }
            });
                
            $("#addFilter").bind("click",function(){    
                filter_operate="add";
                clearData();
                modalOpen({
                    title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                     id:"filterItem_window",
                     height:$(window).height()
                });
                controlButton("filterItem_window");
                return false;
            });
            $("#eidtFilter").bind("click",function(){
                filter_operate="edit";
                clearData();
                var id=$("#filterItem_table").jqGrid(‘getGridParam‘,‘selarrrow‘);
                var rows=$("#filterItem_table").jqGridRow();
                if(checkedRow(id.toString())){
                    var ip=rows[0].ip;
                    var nametype=rows[0].nametype;
                    $("#filter_ip_hidden").val(rows.ip);
                    $("input[type=‘radio‘][name=‘filter_nameType_radio‘][value=http://www.mamicode.com/‘"+nametype+"‘]").prop("checked",true);
                    if(ip==""){
                        $("#filter_ipType_hidden").val("y");
                        $("input[type=‘radio‘][name=‘filter_ipType_radio‘][value=http://www.mamicode.com/‘all‘]").prop("checked",true);
                        $("#filter_ip_tr").hide();
                        $("#filter_domain_tr").hide();
                    }else{
                        $("#filter_ipType_hidden").val(rows[0].ipType);
                        $("input[type=‘radio‘][name=‘filter_ipType_radio‘][value=http://www.mamicode.com/‘"+rows[0].ipType+"‘]").prop("checked",true);
                        if(nametype=="0"){
                            $("#filter_ip_tr").show();
                            $("#filter_domain_tr").hide();
                            var ips=ip.split(";");
                            for(var i=0;i<ips.length;i++){
                                var ipss=ips[i].split("-");
                                var begin=ipss[0];
                                var end="";
                                if(ipss.length>1){
                                    end=ipss[1];
                                }
                                if(i==0){
                                    $("#filter_begin_ip").val(begin);
                                    $("#filter_end_ip").val(end);
                                }else{
                                    var append=‘<div class="filter_ip_div" style="margin-top:5px;">‘
                                        +‘<input type="text" class="form-control " style="width:135.5px;display:inline" onblur="validateIp(this)" value="http://www.mamicode.com/‘+begin+‘">‘
                                        +‘~<input type="text" class="form-control " style="width:135.5px;display:inline" onblur="validateIp(this)" value="http://www.mamicode.com/‘+end+‘">‘
                                        +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterIp(this)"/></div>‘;
                                    $("#filter_ip_td").append(append);
                                }
                            }
                        }else{
                            $("#filter_ip_tr").hide();
                            $("#filter_domain_tr").show();
                            var ips=ip.split(";");
                            for(var i=0;i<ips.length;i++){
                                if(i==0){
                                    $("#filter_domain").val(ips[i]);
                                }else{
                                    var append=‘<div class="filter_domain_div" style="margin-top:5px;">‘
                                        +‘<input type="text" class="form-control" style="width: 280px display:inline" value="http://www.mamicode.com/‘+ips[i]+‘">‘
                                        +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterDomain(this)"/></div>‘;
                                    $("#filter_domain_td").append(append);
                                }
                            }
                        }
                    }
                     if(rows[0].protocol!=""){
                            $("#protocol_combo").ComboBoxSetValue(rows[0].protocol); 
                     }else{
                         $("#protocol_combo").ComboBoxSetText("任何"); 
                     }
                    $("input[type=‘radio‘][name=‘filter_proType_radio‘][value=http://www.mamicode.com/‘"+rows[0].protocolType+"‘]").attr("checked",true);
                    var port=rows[0].port;
                    var portType=rows[0].portType;
                    $("#filter_port_hidden").val(port);
                    if(port==""){
                        $("#filter_portType_hidden").val("y");
                        $("input[type=‘radio‘][name=‘filter_portType_radio‘][value=http://www.mamicode.com/‘all‘]").attr("checked",true);
                        $("#filter_port_tr").hide();
                    }else{
                        $("#filter_portType_hidden").val(portType);
                        $("input[type=‘radio‘][name=‘filter_portType_radio‘][value=http://www.mamicode.com/‘"+portType+"‘]").prop("checked",true);
                        var ports=port.split(";");
                        for(var i=0;i<ports.length;i++){
                            var portss=ports[i].split("-");
                            var begin=portss[0];
                            var end="";
                            if(portss.length>1){
                                end=portss[1];
                            }
                            if(i==0){
                                $("#filter_begin_port").val(begin);
                                $("#filter_end_port").val(end);
                            }else{
                                var append=‘<div class="filter_port_div" style="margin-top:5px;">‘
                                    +‘<input type="text" class="form-control" style="width:135.5px;display:inline" onblur="validatePort(this)" value="http://www.mamicode.com/‘+begin+‘">‘
                                    +‘~<input type="text" class="form-control" style="width:135.5px;display:inline" onblur="validatePort(this)" value="http://www.mamicode.com/‘+end+‘">‘
                                    +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterPort(this)"/></div>‘;
                                $("#filter_port_td").append(append);
                            }
                        }
                    }
                    var process=rows[0].process;
                    var processType=rows[0].processType;
                    $("#filter_process_hidden").val(process);
                    if(process==""){
                        $("#filter_processType_hidden").val("y");
                        $("input[type=‘radio‘][name=‘filter_processType_radio‘][value=http://www.mamicode.com/‘all‘]").prop("checked",true);
                        $("#filter_process_tr").hide();
                    }else{
                        $("#filter_processType_hidden").val(processType);
                        $("input[type=‘radio‘][name=‘filter_processType_radio‘][value=http://www.mamicode.com/‘"+processType+"‘]").prop("checked",true);
                        var processs=process.split(";");
                        for(var i=0;i<processs.length;i++){
                            if(i==0){
                                $("#filter_process").val(processs[i]);
                            }else{
                                var append=‘<div class="filter_process_div" style="margin-top:5px;">‘
                                    +‘<input type="text" class="form-control" style="width: 280px display:inline" value="http://www.mamicode.com/‘+processs[i]+‘">‘
                                    +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterProcess(this)"/></div>‘;
                                $("#filter_process_td").append(append);
                            }
                        }
                    }
                    $("input[type=‘radio‘][name=‘filter_direction_radio‘][value=http://www.mamicode.com/‘"+rows[0].direction+"‘]").prop("checked",true),
                    $("input[type=‘radio‘][name=‘filter_operate_radio‘][value=http://www.mamicode.com/‘"+rows[0].operate+"‘]").prop("checked",true),
                    $("#filter_note_text").val(rows[0].note);
                    modalOpen({
                        title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                         id:"filterItem_window",
                         height:$(window).height()
                    });
                };
                controlButton("filterItem_window");
                return false;
            });
            $("#delFilter").bind("click",function(){
                var index=$("#filterItem_table").jqGrid(‘getGridParam‘,‘selarrrow‘);
                if(checkedArray(index)){
                    var len=index.length;
                    for(var i=0;i<len;i++){
                        $("#filterItem_table").jqGrid("delRowData",index[0]);
                    }
                    
                }
                var data=$("#filterItem_table").jqGrid("getRowData");
                $("#filterItem_hidden").val($.toJSON(data));
                return false;
            });
            $("#addFilterWindow").bind("click",function(){
                setFilterValue();
                var t=$("#protocol_combo").ComboBoxGetValue();
                if($.isNullOrEmpty(t)){
                    t="";
                }
                if(filter_operate=="add"){
                    var len=$("#filterItem_table").jqGrid("getRowData").length;
                    $("#filterItem_table").jqGrid("addRowData",len+1,{
                        ip:$("#filter_ip_hidden").val(),
                        ipType:$("#filter_ipType_hidden").val(),
                        protocol:t,
                        protocolType:$("input[type=‘radio‘][name=‘filter_proType_radio‘]:checked").val(),
                        port:$("#filter_port_hidden").val(),
                        portType:$("#filter_portType_hidden").val(),
                        process:$("#filter_process_hidden").val(),
                        processType:$("#filter_processType_hidden").val(),
                        nametype:$("input[type=‘radio‘][name=‘filter_nameType_radio‘]:checked").val(),
                        operate:$("input[type=‘radio‘][name=‘filter_operate_radio‘]:checked").val(),
                        direction:$("input[type=‘radio‘][name=‘filter_direction_radio‘]:checked").val(),
                        note:$("#filter_note_text").val()
                    });
                }else if(filter_operate=="edit"){
                    var row=$("#filterItem_table").jqGridRow();
                    var index=$("#filterItem_table").jqGrid(‘getGridParam‘,‘selarrrow‘);
                    $("#filterItem_table").jqGrid("setRowData",index,{
                            ip:$("#filter_ip_hidden").val(),
                            ipType:$("#filter_ipType_hidden").val(),
                            protocol:$("#protocol_combo").ComboBoxGetValue(),
                            protocolType:$("input[type=‘radio‘][name=‘filter_proType_radio‘]:checked").val(),
                            port:$("#filter_port_hidden").val(),
                            portType:$("#filter_portType_hidden").val(),
                            process:$("#filter_process_hidden").val(),
                            processType:$("#filter_processType_hidden").val(),
                            nametype:$("input[type=‘radio‘][name=‘filter_nameType_radio‘]:checked").val(),
                            operate:$("input[type=‘radio‘][name=‘filter_operate_radio‘]:checked").val(),
                            direction:$("input[type=‘radio‘][name=‘filter_direction_radio‘]:checked").val(),
                            note:$("#filter_note_text").val()
                    });
                }
                var data=$("#filterItem_table").jqGrid("getRowData");
                $("#filterItem_hidden").val($.toJSON(data));
                $("#filterItem_window").modal("hide");
                return false;
            });
        });
        function checkIpDomain(value){
            if($("input[type=‘radio‘][name=‘filter_ipType_radio‘]:checked").val()!="all"){
                if(value==0){
                    $("#filter_ip_tr").show();
                    $("#filter_domain_tr").hide();
                }else{
                    $("#filter_ip_tr").hide();
                    $("#filter_domain_tr").show();
                }
            }
        }
        function addFilterIp(){
            var append=‘<div class="filter_ip_div" style="margin-top:5px;">‘
                +‘<input type="text" class="form-control " style="width:135.5px;display:inline" onblur="validateIp(this)">‘
                +‘~<input type="text" class="form-control " style="width:135.5px;display:inline" onblur="validateIp(this)">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterIp(this)"/></div>‘;
            $("#filter_ip_td").append(append);
            //if($("#filter_begin_ip").val() && $("#filter_end_ip").val()){
            //    $("#filter_ip_td").append(append);
            //};
            controlButton("filterItem_window");
        }
        function delFilterIp(obj){
            $(obj).parent("div").remove();
            controlButton("filterItem_window");
        }
        function addFilterDomain(){
            var append=‘<div class="filter_domain_div" style="margin-top:5px;">‘
                +‘<input type="text" class="form-control" style="width: 280px;display:inline" >‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterDomain(this)"/></div>‘;
            $("#filter_domain_td").append(append);
            controlButton("filterItem_window");
        }
        function delFilterDomain(obj){
            $(obj).parent("div").remove();
            controlButton("filterItem_window");
        }
        function setFilterValue(){
            var values="";
            if($("input[type=‘radio‘][name=‘filter_ipType_radio‘]:checked").val()=="all"){
                values="";
            }else{
                if($("input[type=‘radio‘][name=‘filter_nameType_radio‘]:checked").val()=="0"){
                    $(".filter_ip_div").each(function(){
                        var begin=$(this).children("input:eq(0)").val();
                        var end=$(this).children("input:eq(1)").val();
                        var value="";
                        if(begin!=""&&end!=""){
                            value=begin+"-"+end;
                        }else if(begin!=""){
                            value=begin;
                        }else if(end!=""){
                            value=end;
                        }
                        if(value!=""){
                            if(values==""){
                                values=value;
                            }else{
                                values+=";"+value;
                            }
                        }
                    });
                }else{
                    $(".filter_domain_div").each(function(){
                        var value=$(this).children("input:eq(0)").val();
                        if(value!=""){
                            if(values==""){
                                values=value;
                            }else{
                                values+=";"+value;
                            }
                        }
                    });
                }
            }
            $("#filter_ip_hidden").val(values);
            
            values="";
            if($("input[type=‘radio‘][name=‘filter_portType_radio‘]:checked").val()=="all"){
                values="";
            }else{
                $(".filter_port_div").each(function(){
                    var begin=$(this).children("input:eq(0)").val();
                    var end=$(this).children("input:eq(1)").val();
                    var value="";
                    if(begin!=""&&end!=""){
                        value=begin+"-"+end;
                    }else if(begin!=""){
                        value=begin;
                    }else if(end!=""){
                        value=end;
                    }
                    if(value!=""){
                        if(values==""){
                            values=value;
                        }else{
                            values+=";"+value;
                        }
                    }
                });
            }
            $("#filter_port_hidden").val(values);
            
            values="";
            if($("input[type=‘radio‘][name=‘filter_processType_radio‘]:checked").val()=="all"){
                values="";
            }else{
                $(".filter_process_div").each(function(){
                    var value=$(this).children("input:eq(0)").val();
                    if(value!=""){
                        if(values==""){
                            values=value;
                        }else{
                            values+=";"+value;
                        }
                    }
                });
            }
            $("#filter_process_hidden").val(values);
        }
        function checkIpType(value){
            if(value=="all"){
                $("#filter_ipType_hidden").val("y");
                $("#filter_ip_tr").hide();
                $("#filter_domain_tr").hide();
            }else{
                $("#filter_ipType_hidden").val(value);
                if($("input[type=‘radio‘][name=‘filter_nameType_radio‘]:checked").val()=="0"){
                    $("#filter_ip_tr").show();
                    $("#filter_domain_tr").hide();
                }else{
                    $("#filter_ip_tr").hide();
                    $("#filter_domain_tr").show();
                }
            }
        }
        function addFilterPort(){
            var append=‘<div class="filter_port_div" style="margin-top:5px;">‘
                +‘<input type="text" class="form-control "style="width:135.5px;display:inline"  onblur="validatePort(this)" >‘
                +‘~<input type="text" class="form-control " style="width:135.5px;display:inline" onblur="validatePort(this)">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png"  onclick="delFilterPort(this)"/></div>‘;
            //if($("#filter_begin_port").val() && $("#filter_end_port").val()){
            $("#filter_port_td").append(append);
            //};
            controlButton("filterItem_window");
        }
        function delFilterPort(obj){
            $(obj).parent("div").remove();
            controlButton("filterItem_window");
        }
        function checkPortType(value){
            if(value=="all"){
                $("#filter_portType_hidden").val("y");
                $("#filter_port_tr").hide();
            }else{
                $("#filter_portType_hidden").val(value);
                $("#filter_port_tr").show();
            }
        }
        function addFilterProcess(){
            var append=‘<div class="filter_process_div" style="margin-top:5px;">‘
                +‘<input type="text" class="form-control " style="width:280px;display:inline" >‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delFilterProcess(this)"/></div>‘;
            $("#filter_process_td").append(append);
            //if($("#filter_process").val()){
            //    $("#filter_process_td").append(append);
            //};
            controlButton("filterItem_window");
        }
        function delFilterProcess(obj){
            $(obj).parent("div").remove();
            controlButton("filterItem_window");
        }
        function checkProcessType(value){
            if(value=="all"){
                $("#filter_processType_hidden").val("y");
                $("#filter_process_tr").hide();
            }else{
                $("#filter_processType_hidden").val(value);
                $("#filter_process_tr").show();
            }
        }
        function clearData(){
            $("#filter_ipType_hidden").val("y");
            $("input[type=‘radio‘][name=‘filter_ipType_radio‘][value=http://www.mamicode.com/‘y‘]").prop("checked",true);
            $("#filter_ip_tr").show();
            $("#filter_domain_tr").hide();
            $("#filter_ip_hidden").val("");
            $("#filter_ip_td").html("");
            var append=‘<div class="filter_ip_div" style="margin-top:5px;">‘
                +‘<input id="filter_begin_ip" type="text" class="form-control " style="width:135.5px;display:inline"  onblur="validateIp(this)" value="">‘
                +‘~<input id="filter_end_ip" type="text" class="form-control " style="width:135.5px;display:inline" onblur="validateIp(this)" value="">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/add.png" onclick="addFilterIp()"/></div>‘;
            $("#filter_ip_td").append(append);
            $("#filter_domain_td").html("");
            var append=‘<div class="filter_domain_div" style="margin-top:5px;">‘
                +‘<input id="filter_domain" type="text" style="width: 280px;display:inline" class="form-control " value="">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/add.png" onclick="addFilterDomain()"/></div>‘;
            $("#filter_domain_td").append(append);
            $("#protocol_combo").ComboBoxSetValue(""),
            $("#protocol_combo").ComboBoxSetText("任何"); 
            $("input[type=‘radio‘][name=‘filter_proType_radio‘][value=http://www.mamicode.com/‘1‘]").prop("checked",true),
            $("#filter_portType_hidden").val("y");
            $("input[type=‘radio‘][name=‘filter_portType_radio‘][value=http://www.mamicode.com/‘y‘]").prop("checked",true);
            $("#filter_port_hidden").val("");
            $("#filter_port_td").html("");
            var append=‘<div class="filter_port_div" style="margin-top:5px;">‘
                +‘<input id="filter_begin_port" type="text" class="form-control " style="width:135.5px;display:inline" onblur="validatePort(this)" value="">‘
                +‘~<input id="filter_end_port" type="text" class="form-control " style="width:135.5px;display:inline" onblur="validatePort(this)" value="">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/add.png" onclick="addFilterPort()"/></div>‘;
            $("#filter_port_td").append(append);
            
            $("#filter_processType_hidden").val("y");
            $("input[type=‘radio‘][name=‘filter_processType_radio‘][value=http://www.mamicode.com/‘y‘]").prop("checked",true);
            $("#filter_process_hidden").val("");
            $("#filter_process_td").html("");
            var append=‘<div class="filter_process_div" style="margin-top:5px;">‘
                +‘<input id="filter_process" type="text" class="form-control " style="width:280px ;display:inline" value="">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/add.png" onclick="addFilterProcess()"/></div>‘;
            $("#filter_process_td").append(append);
            $("input[type=‘radio‘][name=‘filter_nameType_radio‘][value=http://www.mamicode.com/‘0‘]").prop("checked",true);
            $("input[type=‘radio‘][name=‘filter_direction_radio‘][value=http://www.mamicode.com/‘1‘]").prop("checked",true),
            $("input[type=‘radio‘][name=‘filter_operate_radio‘][value=http://www.mamicode.com/‘0‘]").prop("checked",true),
            $("#filter_note_text").val("");
        }
        $(document).ready(function(){
            $(window).resize(function(){
                if($("#filterItem_window").css("display")=="block"){
                    clearData();
                    modalOpen({
                        title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                         id:"filterItem_window",
                         height:$(window).height()
                    });
                    controlButton("filterItem_window");
                    return false;
                }
            });
        });
    </script>    
   </div>
   <div class="modal-footer" style="float:left;">
        <button type="button" class="btn btn-primary" id="addFilterWindow"><span><s:text name="cems.ok"></s:text></button>
        <button type="button" class="btn btn-primary" data-dismiss="modal"><s:text name="cems.cancel"></s:text></button>
   </div>
   </div>
   </div>
   </div>
<!-- 添加超级ip和端口弹窗 -->
<div class="modal fade" id="superItem_window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style=" position: absolute; right: 0;top: 0; margin: 0;width:410px">
        <div class="modal-content" >
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"><s:text name=‘com.vrv.cems.policy.template.protocolFireWall.add‘/></h4>
            </div>
       <div class="modal-body">
    <table class="form">
        <tr >
            <td width="80px" class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.ip.ip"/></span></td>
            <td>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="super_ipType_radio" checked="checked" value="y" ><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.eql"/></span>
                <label class="radio-inline"><input type="radio" class="radio-blue" name="super_ipType_radio" value="n" ><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/></span>
            </td>
        </tr>
        <tr id="super_ip_tr">
            <td></td>
            <td id="super_ip_td">
                <div class="super_ip_div"><input id="super_begin_ip" type="text" class="form-control " style="display: inline;width: 135.5px;" onblur="validateIp(this)">~<input id="super_end_ip" type="text" class="form-control " style="display: inline;width: 135.5px;" onblur="validateIp(this)"><img src="${basePath}/images/add.png" onclick="addSuperIp()"/></div>
            </td>
        </tr>
        <input type="hidden" id="super_ip_hidden">
        <tr id="super_portType_tr">
            <td class="formTitle"><span><s:text name="com.vrv.cems.policy.template.protocolFireWall.port"/></span></td>
            <td>
            <label class="radio-inline"><input type="radio" class="radio-blue" name="super_portType_radio" checked="checked" value="y" onclick="checkPortType1(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.eql"/></label>
            <label class="radio-inline"><input type="radio" class="radio-blue" name="super_portType_radio" value="n" onclick="checkPortType1(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.notEql"/></label>
            <label class="radio-inline"><input type="radio" class="radio-blue" name="super_portType_radio" value="all" onclick="checkPortType1(this.value)"><b></b><s:text name="com.vrv.cems.policy.template.protocolFireWall.all"/></label>
                <input type="hidden" id="super_portType_hidden" value="y">
            </td>
        </tr>
        <tr id="super_port_tr">
            <td></td>
            <td id="super_port_td">
                <div class="super_port_div"><input id="super_begin_port" type="text" class="form-control " style="display: inline;width: 135.5px;" onblur="validatePort(this)">~<input id="super_end_port" type="text" class="form-control " style="display: inline;width: 135.5px;" onblur="validatePort(this)"><img src="${basePath}/images/add.png" onclick="addSuperPort()"/></div>
            </td>
        </tr>
        <input type="hidden" id="super_port_hidden">
    </table>
    
    <script>
        var super_operate;
        $(function(){
            $("#addSuper").bind("click",function(){
                super_operate="add";
                clearData1();
                modalOpen({
                    title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                     id:"superItem_window",
                     height:$(window).height()
                });
                controlButton("superItem_window");
                return false;
            });
            $("#editSuper").bind("click",function(){
                super_operate="edit";
                clearData1();
                var index=$("#superIpItem_table").jqGrid(‘getGridParam‘,‘selarrrow‘);
                var rows=$("#superIpItem_table").jqGridRow();
                if(checkedRow(index.toString())){
                    var ip=rows[0].ip;
                    $("input[type=‘radio‘][name=‘super_ipType_radio‘][value=http://www.mamicode.com/‘"+rows[0].ipType+"‘]").prop("checked",true);
                    var ips=ip.split(";");
                    for(var i=0;i<ips.length;i++){
                        var ipss=ips[i].split("-");
                        var begin=ipss[0];
                        var end="";
                        if(ipss.length>1){
                            end=ipss[1];
                        }
                        if(i==0){
                            $("#super_begin_ip").val(begin);
                            $("#super_end_ip").val(end);
                        }else{
                            var append=‘<div class="super_ip_div" style="margin-top:5px;">‘
                                +‘<input type="text" class="form-control " style="display:inline;width:135.5px;" onblur="validateIp(this)" value="http://www.mamicode.com/‘+begin+‘">‘
                                +‘~<input type="text" class="form-control " style="display:inline;width:135.5px;" onblur="validateIp(this)" value="http://www.mamicode.com/‘+end+‘">‘
                                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delSuperIp(this)"/></div>‘;
                            $("#super_ip_td").append(append);
                        }
                    }
                    var port=rows[0].port;
                    var portType=rows[0].portType;
                    $("#super_port_hidden").val(port);
                    if(port==""){
                        $("#super_portType_hidden").val("y");
                        $("input[type=‘radio‘][name=‘super_portType_radio‘][value=http://www.mamicode.com/‘all‘]").prop("checked",true);
                        $("#super_port_tr").hide();
                    }else{
                        $("#super_portType_hidden").val(portType);
                        $("input[type=‘radio‘][name=‘super_portType_radio‘][value=http://www.mamicode.com/‘"+portType+"‘]").prop("checked",true);
                        var ports=port.split(";");
                        for(var i=0;i<ports.length;i++){
                            var portss=ports[i].split("-");
                            var begin=portss[0];
                            var end="";
                            if(portss.length>1){
                                end=portss[1];
                            }
                            if(i==0){
                                $("#super_begin_port").val(begin);
                                $("#super_end_port").val(end);
                            }else{
                                var append=‘<div class="super_port_div" style="margin-top:5px;">‘
                                    +‘<input type="text" class="form-control " style="display:inline;width:135.5px;" onblur="validatePort(this)" value="http://www.mamicode.com/‘+begin+‘">‘
                                    +‘~<input type="text" class="form-control " style="display:inline;width:135.5px;" onblur="validatePort(this)" value="http://www.mamicode.com/‘+end+‘">‘
                                    +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delSuperPort(this)"/></div>‘;
                                $("#super_port_td").append(append);
                            }
                        }
                    }
                    modalOpen({
                        title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                         id:"superItem_window",
                         height:$(window).height()
                    });
                };
                controlButton("superItem_window");
                return false;
            });
            $("#delSuper").bind("click",function(){
                var rows=$("#superIpItem_table").jqGrid(‘getGridParam‘,‘selarrrow‘);
                if(checkedArray(rows)){
                    var len=rows.length;
                    for(var i=0;i<len;i++){
                        $("#superIpItem_table").jqGrid("delRowData",rows[0]);
                    }
                    
                }
                var data=$("#superIpItem_table").jqGrid("getRowData");
                $("#superIpItem_hidden").val($.toJSON(data));
                return false;
            });
            $("#addSuperWindow").bind("click",function(){
                setSuperValue();
                if(super_operate=="add"){    
                    var len=$("#superIpItem_table").jqGrid("getRowData").length;
                    $("#superIpItem_table").jqGrid("addRowData",len+1,{
                        ip:$("#super_ip_hidden").val(),
                        ipType:$("input[type=‘radio‘][name=‘super_ipType_radio‘]:checked").val(),
                        port:$("#super_port_hidden").val(),
                        portType:$("#super_portType_hidden").val()
                    });
                }else if(super_operate=="edit"){
                    var index=$("#superIpItem_table").jqGrid(‘getGridParam‘,‘selarrrow‘);
                    $("#superIpItem_table").jqGrid("setRowData",index,{
                            ip:$("#super_ip_hidden").val(),
                            ipType:$("input[type=‘radio‘][name=‘super_ipType_radio‘]:checked").val(),
                            port:$("#super_port_hidden").val(),
                            portType:$("#super_portType_hidden").val()
                    });
                }
                var data=$("#superIpItem_table").jqGrid("getRowData");
                $("#superIpItem_hidden").val($.toJSON(data));
                $("#superItem_window").modal("hide");
                return false;
            });

        });
        function addSuperIp(){
            var append=‘<div class="super_ip_div" style="margin-top:5px;">‘
                +‘<input type="text" class="form-control " style="display:inline;width:135.5px"   onblur="validateIp(this)">‘
                +‘~<input type="text" class="form-control " style="display:inline;width:135.5px"  onblur="validateIp(this)">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png"  onclick="delSuperIp(this)"/></div>‘;
            $("#super_ip_td").append(append);
            //if($("#super_begin_ip").val() && $("#super_end_ip").val()){
            //    $("#super_ip_td").append(append);
            //};
            controlButton("superItem_window");
        }
        function delSuperIp(obj){
            $(obj).parent("div").remove();
            controlButton("superItem_window");
        }
        function setSuperValue(){
            var values="";
            $(".super_ip_div").each(function(){
                var begin=$(this).children("input:eq(0)").val();
                var end=$(this).children("input:eq(1)").val();
                var value="";
                if(begin!=""&&end!=""){
                    value=begin+"-"+end;
                }else if(begin!=""){
                    value=begin;
                }else if(end!=""){
                    value=end;
                }
                if(value!=""){
                    if(values==""){
                        values=value;
                    }else{
                        values+=";"+value;
                    }
                }
            });
            $("#super_ip_hidden").val(values);
            values="";
            if($("input[type=‘radio‘][name=‘super_portType_radio‘]:checked").val()=="all"){
                values="";
            }else{
                $(".super_port_div").each(function(){
                    var begin=$(this).children("input:eq(0)").val();
                    var end=$(this).children("input:eq(1)").val();
                    var value="";
                    if(begin!=""&&end!=""){
                        value=begin+"-"+end;
                    }else if(begin!=""){
                        value=begin;
                    }else if(end!=""){
                        value=end;
                    }
                    if(value!=""){
                        if(values==""){
                            values=value;
                        }else{
                            values+=";"+value;
                        }
                    }
                });
            }
            $("#super_port_hidden").val(values);
        }
        function addSuperPort(){
            var append=‘<div class="super_port_div" style="margin-top:5px;">‘
                +‘<input type="text" class="form-control " style="display:inline;width:135.5px" onblur="validatePort(this)">‘
                +‘~<input type="text" class="form-control " style="display:inline;width:135.5px"  onblur="validatePort(this)">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/delete.png" onclick="delSuperPort(this)"/></div>‘;
            $("#super_port_td").append(append);
            //if($("#super_begin_port").val() && $("#super_end_port").val()){
            //    $("#super_port_td").append(append);
            //};
            controlButton("superItem_window");
        }
        function delSuperPort(obj){
            $(obj).parent("div").remove();
            controlButton("superItem_window");
        }
        function checkPortType1(value){
            if(value=="all"){
                $("#super_portType_hidden").val("y");
                $("#super_port_tr").hide();
            }else{
                $("#super_portType_hidden").val(value);
                $("#super_port_tr").show();
            }
        }
        function clearData1(){
            $("input[type=‘radio‘][name=‘super_ipType_radio‘][value=http://www.mamicode.com/‘y‘]").prop("checked",true);
            $("#super_ip_hidden").val("");
            $("#super_ip_td").html("");
            var append=‘<div class="super_ip_div" style="margin-top:5px;">‘
                +‘<input id="super_begin_ip" type="text" class="form-control " style="display:inline;width:135.5px" onblur="validateIp(this)" value="">‘
                +‘~<input id="super_end_ip" type="text" class="form-control " style="display:inline;width:135.5px" onblur="validateIp(this)" value="">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/add.png" onclick="addSuperIp()"/></div>‘;
            $("#super_ip_td").append(append);
            $("#super_portType_hidden").val("y");
            $("input[type=‘radio‘][name=‘super_portType_radio‘][value=http://www.mamicode.com/‘y‘]").prop("checked",true);
            $("#super_port_hidden").val("");
            $("#super_port_td").html("");
            var append=‘<div class="super_port_div" style="margin-top:5px;">‘
                +‘<input id="super_begin_port" type="text" class="form-control" style="display:inline;width:135.5px" onblur="validatePort(this)" value="">‘
                +‘~<input id="super_end_port" type="text" class="form-control " style="display:inline;width:135.5px" onblur="validatePort(this)" value="">‘
                +‘<img src="http://www.mamicode.com/${basePath}/images/add.png" onclick="addSuperPort()"/></div>‘;
            $("#super_port_td").append(append);
        }
        
        /**
          * 验证IP格式
          */
         function validateIp(obj) {
             var ip=$(obj).val();
             var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;//正则表达式     
             if(re.test(ip))     
               {     
                   if( RegExp.$1<256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256)   
                   return true;     
               }  
               $(obj).val("");
               dialogTop(‘<s:text name=‘cems.valid.ipIllegal‘></s:text>‘,"alert alert-warning");
               return false;  
            
         }
         function validatePort(obj){
             var port=$(obj).val();
            // var re=/^[1-9]$|(^[1-9][0-9]$)|(^[1-9][0-9][0-9]$)|(^[1-9][0-9][0-9][0-9]$)|(^[1-6][0-5][0-5][0-3][0-5]$)/;//正则表达式   
               if(port>=0 & port<65536)     
               { 
//                    if( RegExp.$1<65536 && RegExp.$2<65536 && RegExp.$3<65536 && RegExp.$4<65536)
                   return true;     
               } 
               $(obj).val("");
               dialogTop(‘<s:text name=‘com.vrv.cems.policy.template.appfirewall.portErrorInt‘></s:text>‘,"alert alert-warning");
               return false;  
         }
         $(document).ready(function(){
                $(window).resize(function() {
                    if($("#superItem_window").css("display")=="block"){
                        clearData1();
                        modalOpen({
                            title:‘<s:text name="com.vrv.cems.policy.template.protocolFireWall.add"/>‘,
                             id:"superItem_window",
                             height:$(window).height()
                        });
                        controlButton("superItem_window");
                        return false;
                    }
                });
            });
    </script>    
</div>
   <div class="modal-footer" style="float:left;">
      <button type="button" class="btn btn-primary" id="addSuperWindow"><span><s:text name="cems.ok"></s:text></button>
    <button type="button" class="btn btn-primary" data-dismiss="modal"><s:text name="cems.cancel"></s:text></button>
   </div>
</div></div></div>

 

关于jQuery模态框加载完成的一点处理


联系
我们