lanproxy/proxy-server/webpages/lanproxy-config/html/lan/list.html

<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title site-demo-title">
		<li class="layui-this tab-title"></li>
	</ul>
	<div class="main-content"></div>
	<div class="layui-input-block" style="float: left; margin-left: 15px;">
		<button class="layui-btn mapping-add"></button>
	</div>
</div>
<script id="mapping-tpl" type="text/html">
<table class="layui-table" lay-skin="line">
    <thead>
        <tr>
            <th class="i18n-lan-name"></th>
            <th class="i18n-lan-inetport"></th>
            <th class="i18n-lan-ip"></th>
            <th class="i18n-lan-options"></th>
        </tr>
    </thead>
    <tbody>
    <%for(var i = 0; i < data.length; i++) {%>
        <tr>
            <td><%:=data[i].name%></td>
            <td><%:=data[i].inetPort%></td>
            <td><%:=data[i].lan%></td>
            <td>
              <a data-index="<%:=i%>" class="layui-btn layui-btn-mini mapping-edit"></a>
              <a data-index="<%:=i%>" class="layui-btn layui-btn-danger layui-btn-mini mapping-delete"></a>
            </td>
        </tr>
    <%}%>
    </tbody>
</table>
</script>
<script>
    $(".tab-title").html(clientList[clientIndex].name + " - " + $.i18n.prop('lan.proxyconfig'));
    $(".mapping-add").html($.i18n.prop('lan.addnewconfig'));
	var html = template($("#mapping-tpl").html(), {
		data : clientList[clientIndex].proxyMappings
	});
	$(".main-content").html(html);
	$(".i18n-lan-name").html($.i18n.prop('lan.name'));
	$(".i18n-lan-inetport").html($.i18n.prop('lan.inetport'));
	$(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
	$(".i18n-lan-options").html($.i18n.prop('public.options'));
	$(".mapping-edit").html($.i18n.prop('public.edit'));
	$(".mapping-delete").html($.i18n.prop('public.delete'));
	$(".mapping-config").click(function() {
		window.clientIndex = $(this).attr("data-index");
		load_page("html/lan/list.html");
	});
	$(".mapping-edit").click(function() {
		window.mappingIndex = $(this).attr("data-index");
		load_page("html/lan/edit.html");
	});
	$(".mapping-delete").click(function() {
		var mappingIndex = $(this).attr("data-index");
		layer.confirm($.i18n.prop('public.confirm.delete'), {
			title: $.i18n.prop('public.tips'),
            btn : [ $.i18n.prop('public.ok'), $.i18n.prop('public.cancel') ]
        }, function(i) {
			layer.close(i);
			clientList[clientIndex].proxyMappings.splice(mappingIndex, 1);
			api_invoke("/config/update", clientList, function(data) {
				if (data.code != 20000) {
					layer.alert(data.message);
				} else {
					load_page("html/lan/list.html");
				}
			})
		});
	});
	$(".back").click(function() {
		load_page("html/client/list.html");
	});

	$(".mapping-add").click(function() {
		load_page("html/lan/add.html");
	});
</script>