{{# var lang001 = {"ch": "映射线路", "en": "Mapped Interface"}, lang002 = {"ch": "映射端口", "en": "Mapped Port"}, lang003 = {"ch": "iWAN服务", "en": "iWAN Service"}, lang004 = {"ch": "访问次数", "en": "Access Count"}, lang005 = {"ch": "操作", "en": "Action"}, lang006 = {"ch": "添加", "en": "Add"}, lang007 = {"ch": "确定要删除该映射吗", "en": "Confirm to delete this mapping?"}; }}  <div class="layui-card" style="width: 800px; margin: 0px auto; padding: 10px;">     <div class="layui-row">         <table class="layui-table" id="tab_iwanmap_list" style="width:100%" lay-skin="line" lay-size="sm">             <thead>                 <tr style="color:#666666">                     <td style="width:25%; font-weight: bold;">{{ lang001[g_lang] || "映射线路" }}</td>                     <td style="width: 20%; font-weight: bold;">{{ lang002[g_lang] || "映射端口" }}</td>                     <td style="width: 30%; font-weight: bold;">{{ lang003[g_lang] || "iWAN服务" }}</td>                     <td style="width: 15%; font-weight: bold;">{{ lang004[g_lang] || "访问次数" }}</td>                     <td style="width: 10%; font-weight: bold; text-align: right;">{{ lang005[g_lang] || "操作" }}</td>                 </tr>             </thead>             <tbody></tbody>         </table>         <form class="layui-form">             <table class="layui-table" id="tab_iwanmap_add" style="width:100%" lay-skin="line" lay-size="sm"></table>         </form>         <div class="layui-hide">             <span iwanmap_event="btnevt_reload" id="btn_iwanmap_reload"></span>         </div>     </div> </div>  <script id="tpl_iwanmap_list" type="text/html">     {%# layui.each(d, function(index, elem){ %}         <tr>             <td>                 <span class="abtn" iwanmap_event="btnevt_proxy" name="{% elem.pxyname %}">{% elem.pxyname %}</span>             </td>             <td>{% elem.port %}</td>             <td>{% elem.svrname %}</td>             <td>{% elem.pkts %}</td>             <td style="text-align: right;">                 <span class="abtn" iwanmap_event="btnevt_del" pxyid="{% elem.pxyid %}" port="{% elem.port %}">                     <i class="layui-icon layui-icon-delete"></i>                 </span>             </td>         </tr>     {%# }); %} </script>  <script id="tpl_iwanmap_add" type="text/html">     <tr>         <td style="width:25%;">             <select name="pxyid" lay-search lay-verify="required">                 {%# layui.each(d.proxy, function(index, elem){ %}                     <option value="{% elem.id %}">{% elem.name %}</option>';                 {%# }); %}             </select>         </td>         <td style="width: 20%;">             <input type="hidden" name="action" value="add_iwan_map">             <input type="text" name="port" value="8000" class="layui-input">         </td>         <td style="width: 30%;">             <select name="svrid" lay-search lay-verify="required">                 {%# layui.each(d.iwansvr, function(index, elem){  %}                     <option value="{% elem.id %}">{% elem.name %}</option>';                 {%# }); %}             </select>         </td>         <td style="width: 15%">-</td>         <td style="width: 10%; text-align: right;">             <span class="abtn" lay-filter="submit_iwanmap_add" lay-submit>{{ lang006[g_lang] || "添加" }}</span>         </td>     </tr> </script>  <script> layui.use(function(){ var $ = layui.$, util = layui.util, form = layui.form, patpl = layui.patpl;  var api = '/cgi-bin/network/ajax_iwan';       var event_center = {         btnevt_proxy: function(){             var name = $(this).attr("name");             popupProxy("", "", name);         },          btnevt_del: function(){             var pxyid = $(this).attr("pxyid");             var port  = $(this).attr("port");             pa_confirm('{{ lang007[g_lang] || "确定要删除该映射吗" }}？', function(index, elem){                 pa_ajax({                     url: api,                     data: {'action': 'rmv_iwan_map', 'pxyid': pxyid, 'port': port},                     success: function(json){                         if(json.code != 0)                             alert_err(json.msg);                         else {                             load_data("reload");                             alert_ok(json.msg);                             $("#submit_iwansvr_search").click();                         }                     }                 })             })         },          btnevt_reload: function(){             load_data("init");         }     };       var load_data = function(type){         pa_ajax({             url: api,             data: {'action': 'load_iwanmap_env'},             success: function(json){                  $("#tab_iwanmap_list tbody").html("");                 patpl($("#tpl_iwanmap_list").html()).render(json.data.map, function(html){                     $("#tab_iwanmap_list tbody").append(html);                 });                  if(type == "init") {    /* 只需在初始时，加载表单列表 */                     $("#tab_iwanmap_add").html("");                     patpl($("#tpl_iwanmap_add").html()).render(json.data, function(html){                         $("#tab_iwanmap_add").append(html);                         form.render();                     });                 }             }         });     };       load_data("init");      form.on('submit(submit_iwanmap_add)', function(obj){         pa_ajax({             url: api,             data: obj.field,             success: function(json){                 if(json.code != 0)                     alert_err(json.msg);                 else {                     alert_ok(json.msg);                     load_data("reload");                     $("#submit_iwansvr_search").click();                 }             }         });         return false;     });          util.event("iwanmap_event", event_center);  }); </script>