nps/web/views/index/list.html

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{{.name}}</h5>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="content">
                    <div class="table-responsive">
                        <div id="toolbar">
                            <a href="/index/add?type={{.type}}&client_id={{.client_id}}" class="btn btn-primary dim"
                               type="button">new</a>
                        </div>
                        <table id="taskList_table" class="table-striped table-hover"
                               data-mobile-responsive="true"></table>
                    </div>
                </div>
                <div class="ibox-content">

                    <table id="table"></table>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: "/index/gettunnel", // 服务器数据的加载地址
        queryParams: function (params) {
            return {
                "offset": params.offset,
                "limit": params.limit,
                "type":{{.type}},
                "client_id":{{.client_id}},
            }
        },
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true,//分页
        sidePagination: 'server',//服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50],//分页步进值
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        detailFormatter: function (index, row, element) {
            return '<b>export flow: </b>' + change(row.Flow.ExportFlow) + `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp`
                    + '<b>inlet flow: </b>' + change(row.Flow.InletFlow) + `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp` + "<br/><br>"
                    + '<b>crypt: </b>' + row.Client.Cnf.Crypt + `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp`
                    + '<b>compress: </b>' + row.Client.Cnf.Compress + `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp`
                    + '<b>username: </b>' + row.Client.Cnf.U + `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp`
                    + '<b>password: </b>' + row.Client.Cnf.P + `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp`
        },
        //表格的列
        columns: [
            {
                field: 'Id',//域值
                title: 'id',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
            },
            {
                field: 'Id',//域值
                title: 'client id',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return row.Client.Id
                }
            },
            {
                field: 'Remark',//域值
                title: 'remark',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
            },
            {
                field: 'Mode',//域值
                title: 'mode',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
            },
            {
                field: 'Port',//域值
                title: 'port',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
            },
            {
                field: 'Target',//域值
                title: 'target',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
            },
            {
                field: 'Password',//域值
                title: 'secret',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
            },
            {
                field: 'Status',//域值
                title: 'setting',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary">open</span>'
                    } else {
                        return '<span class="badge badge-badge">close</span>'
                    }
                }
            },
            {
                field: 'RunStatus',//域值
                title: 'run',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary">open</span>'
                    } else {
                        return '<span class="badge badge-badge">close</span>'
                    }
                }
            },
            {
                field: '',//域值
                title: 'client',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (row.Client.IsConnect) {
                        return '<span class="badge badge-primary">online</span>'
                    } else {
                        return '<span class="badge badge-badge">offline</span>'
                    }
                }
            },
            {
                field: 'option',//域值
                title: 'option',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'
                    btn = `<button onclick="del(` + row.Id + `)" class="btn-danger"><i class="fa fa-trash"></i></button><button onclick="edit(` + row.Id + `)" class="btn-primary"><i class="fa fa-edit"></i></button></div>`
                    if (row.Status) {
                        return btn_group + `<button onclick="stop(` + row.Id + `)" class="btn-dark"><i class="fa fa-close"></i></button>` + btn
                    } else {
                        return btn_group + `<button onclick="start(` + row.Id + `)" class="btn-outline-primary"><i class="fa fa-check"></i></button>` + btn
                    }
                }
            }
        ]
    });


</script>


<script type="text/javascript">
    function del(id) {
        if (confirm("Are you sure you want to delete it？？")) {
            $.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("Are you sure you want to start it？？")) {
            $.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("Are you sure you want to stop it？？")) {
            $.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
    }

</script>