nps/web/views/index/list.html

<div class="row">
    <div class="col-md-12">
        <div class="tile">
            <div class="tile-body">
                <table class="table table-hover table-bordered" id="sampleTable">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>备注</th>
                        <th>客户端Id</th>
                        <th>监听端口</th>
                        <th>内网目标</th>
                        <th>压缩方式</th>
                        <th>加密传输</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>客户端状态</th>
                        <th>状态</th>
                        <th>出口流量</th>
                        <th>入口流量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

<script type="text/javascript">
    function del(id) {
        if (confirm("确定要删除数据吗？")) {
            $.ajax({
                type: "POST",
                url: "/index/del",
                data: {"id": id},
                success: function (res) {
                    alert(res.msg)
                    if (res.status) {
                        document.location.reload();
                    }
                }
            })
        }
    }

    function start(id) {
        if (confirm("确定要开始任务吗？")) {
            $.ajax({
                type: "POST",
                url: "/index/start",
                data: {"id": id},
                success: function (res) {
                    alert(res.msg)
                    if (res.status) {
                        document.location.reload();
                    }
                }
            })
        }
    }

    function stop(id) {
        if (confirm("确定要暂停吗？")) {
            $.ajax({
                type: "POST",
                url: "/index/stop",
                data: {"id": id},
                success: function (res) {
                    alert(res.msg)
                    if (res.status) {
                        document.location.reload();
                    }
                }
            })
        }
    }

    function edit(id) {
        window.location.href = "/index/edit?id=" + id
    }

    function add() {
        window.location.href = "/index/add?type={{.type}}" + "&client_id={{.client_id}}"
    }


    $(document).ready(function () {
        var table = $('#sampleTable').DataTable({
            responsive: {
                details: {
                    display: $.fn.dataTable.Responsive.display.childRowImmediate
                }
            },
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            autoWidth: false,
            ordering: false,
            ajax: {
                url: '/index/gettunnel?type={{.type}}' + "&client_id=" +{{.client_id}},
                type: 'POST'
            },
            dom: '<"top"fl><"toolbar">rt<"bottom"ip><"clear">',
            columns: [　//这个是显示到界面上的个数据　格式为 {data:'显示的字段名'}
                {data: 'Id'},
                {data: 'Remark'},
                {data: 'ClientId'},
                {data: 'TcpPort'},
                {data: 'Target'},
                {data: 'Compress'},
                {data: 'Crypt'},
                {data: 'U'},
                {data: 'P'},
                {data: 'ClientStatus'},
                {data: 'Status'},
                {data: 'ExportFlow'},
                {data: 'InletFlow'},
                {data: "Id"}
            ],
            bFilter: false,
            columnDefs: [{
                targets: -1,
                render: function (data, type, row, meta) {
                    if (row.Status == 1) {
                        btn = "<button onclick=\"stop('" + row.Id + "')\" class=\"btn btn-secondary btn-sm\" type=\"button\">关闭</button>"
                    } else {
                        btn = "<button onclick=\"start('" + row.Id + "')\" class=\"btn btn-success btn-sm\" type=\"button\">打开</button>"
                    }
                    btn_edit = '<button onclick="edit(\'' + row.Id + '\')" type="button"   class="btn btn-primary btn-sm">查看编辑</button> '
                    return '<div class="btn-group" role="group" aria-label="..."> ' +
                            '<button onclick="del(\'' + row.Id + '\')" type="button"   class="btn btn-danger btn-sm">删除</button>' +
                            btn_edit + btn + ' </div>'
                }
            }, {
                targets: 2,
                render: function (data, type, row, meta) {
                    return row.Client.Id
                }
            }, {
                targets: 5,
                render: function (data, type, row, meta) {
                    if (row.UseClientCnf == true) {
                        return row.Client.Cnf.Compress
                    } else {
                        return row.Config.Compress
                    }
                }
            }, {
                targets: 7,
                render: function (data, type, row, meta) {
                    if (row.UseClientCnf == true) {
                        return row.Client.Cnf.U
                    } else {
                        return row.Config.U
                    }
                }
            }, {
                targets: 8,
                render: function (data, type, row, meta) {
                    if (row.UseClientCnf == true) {
                        return row.Client.Cnf.P
                    } else {
                        return row.Config.P
                    }
                }
            },
                {
                    targets: -4,
                    render: function (data, type, row, meta) {
                        if (data == false) {
                            return "<span class=\"badge badge-pill badge-secondary\">暂停</span>"
                        } else {
                            return "<span class=\"badge badge-pill badge-success\">正常</span>"
                        }
                    }
                },
                {
                    targets: -8,
                    render: function (data, type, row, meta) {
                        if (row.UseClientCnf == true) {
                            crypt = row.Client.Cnf.Crypt
                        } else {
                            crypt = row.Config.Crypt
                        }
                        if (crypt == "0") {
                            return "不加密"
                        } else {
                            return "加密"
                        }
                    }
                },
                {
                    targets: -5,
                    render: function (data, type, row, meta) {
                        if (row.Client.IsConnect == false) {
                            return "<span class=\"badge badge-pill badge-secondary\">离线</span>"
                        } else {
                            return "<span class=\"badge badge-pill badge-success\">在线</span>"
                        }
                    }
                },
                {
                    targets: -2,
                    render: function (data, type, row, meta) {
                        return change(row.Flow.InletFlow)
                    }
                },
                {
                    targets: -3,
                    render: function (data, type, row, meta) {
                        return change(row.Flow.ExportFlow)
                    }
                }
            ],
            buttons: []
        });
        $("#sampleTable_length").html('<button class="btn btn-primary" onclick="add()" type="button">新增</button>')
    })
    ;


</script>