nps/web/views/client/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 langtag="page-clientlist"></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">
            {{if eq true .isAdmin}}

                <div class="table-responsive">
                    <div id="toolbar">
                        <a href="{{.web_base_url}}/client/add" class="btn btn-primary dim">
                        <i class="fa fa-fw fa-lg fa-plus"></i> <span langtag="word-add"></span></a>
                    </div>
                    <table id="taskList_table" class="table-striped table-hover" data-mobile-responsive="true"></table>
                </div>
            </div>
            {{end}}
                <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: "{{.web_base_url}}/client/list", // 服务器数据的加载地址
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        search: true,
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true,//分页
        sidePagination: 'server',//服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50],//分页步进值
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            return '<b langtag="word-maxconnections"></b>: ' + row.MaxConn + '&emsp;'
                + '<b langtag="word-curconnections"></b>: ' + row.NowConn + '&emsp;'
                + '<b langtag="word-flowlimit"></b>: ' + row.Flow.FlowLimit + 'm&emsp;'
                + '<b langtag="word-ratelimit"></b>: ' + row.RateLimit + 'kb/s&emsp;'
                + '<b langtag="word-maxtunnels"></b>: ' + row.MaxTunnelNum + '&emsp;<br/><br/>'
                + '<b langtag="word-webusername"></b>: ' + row.WebUserName + '&emsp;'
                + '<b langtag="word-webpassword"></b>: ' + row.WebPassword + '&emsp;'
                + '<b langtag="word-basicusername"></b>: ' + row.Cnf.U + '&emsp;'
                + '<b langtag="word-basicpassword"></b>: ' + row.Cnf.P + '&emsp;<br/><br/>'
                + '<b langtag="word-crypt"></b>: <span langtag="word-' + row.Cnf.Crypt + '"></span>&emsp;'
                + '<b langtag="word-compress"></b>: <span langtag="word-' + row.Cnf.Compress + '"></span>&emsp;'
                + '<b langtag="word-connectbyconfig"></b>: <span langtag="word-' + row.ConfigConnAllow + '"></span>&emsp;<br/><br/>'
                + '<b langtag="word-commandclient"></b>: ' + "<code>./npc{{.win}} -server={{.ip}}:{{.p}} -vkey=" + row.VerifyKey + " -type=" +{{.bridgeType}} +"</code>"
        },
        //表格的列
        columns: [
            {
                field: 'Id',//域值
                title: '<span langtag="word-id"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Remark',//域值
                title: '<span langtag="word-remark"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Version',//域值
                title: '<span langtag="word-version"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'VerifyKey',//域值
                title: '<span langtag="word-verifykey"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    if (!row.NoStore) {
                        return value
                    } else {
                        return '<span langtag="word-publicvkey"></span>'
                    }
                }
            },
            {
                field: 'Addr',//域值
                title: '<span langtag="word-address"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'InletFlow',//域值
                title: '<span langtag="word-inletflow"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return changeunit(row.Flow.InletFlow)
                }
            },
            {
                field: 'ExportFlow',//域值
                title: '<span langtag="word-exportflow"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return changeunit(row.Flow.ExportFlow)
                }
            },
            {
                field: 'IsConnect',//域值
                title: '<span langtag="word-speed"></span>',//内容
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return changeunit(row.Rate.NowRate) + "/S"
                }
            },
            {
                field: 'Status',//域值
                title: '<span langtag="word-status"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-open"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-close"></span>'
                    }
                }
            },
            {
                field: 'IsConnect',//域值
                title: '<span langtag="word-connect"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-online"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-offline"></span>'
                    }
                }
            },
            {
                field: 'option',//域值
                title: '<span langtag="word-option"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'

                    {{if eq true .isAdmin}}
                    if (row.Status) {
                        btn_group += '<a onclick="submitform(\'stop\', \'{{.web_base_url}}/client/changestatus\', {\'id\':' + row.Id
                        btn_group += ', \'status\': 0})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += '<a onclick="submitform(\'start\', \'{{.web_base_url}}/client/changestatus\', {\'id\':' + row.Id
                        btn_group += ', \'status\': 1})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    btn_group += '<a onclick="submitform(\'delete\', \'{{.web_base_url}}/client/del\', {\'id\':' + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    {{end}}

                    btn_group += '<a href="{{.web_base_url}}/client/edit?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a></div>'
                    return btn_group
                }
            },
            {
                field: 'show',//域值
                title: '<span langtag="word-show">',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return '<div class="btn-group"><a href="{{.web_base_url}}/index/all?client_id=' + row.Id
                        + '" class="btn btn-outline btn-primary" langtag="word-tunnel"></a>'
                        + '<a href="{{.web_base_url}}/index/hostlist?client_id=' + row.Id
                        + '" class="btn btn-outline btn-success" langtag="word-host"></a></div>'
                }
            }
        ]
    });
</script>