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><span id="langtag"></span><span></span></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="{{.web_base_url}}/index/add?type={{.type}}&client_id={{.client_id}}" 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>
                <div class="ibox-content">

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

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

<script>
    name = '{{.name}}:'.replace(/\s*/g,"")
    $('#langtag').attr('langtag','page-list' + name.replace(/:.*/,"")).next().text(name.split(":")[1])

    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: "{{.web_base_url}}/index/gettunnel", // 服务器数据的加载地址
        queryParams: function (params) {
            return {
                "offset": params.offset,
                "limit": params.limit,
                "type":{{.type}},
                "client_id":{{.client_id}},
                "search": params.search
            }
        },
        search: true,
        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 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onLoadSuccess:function (data) {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            tmp = '<b langtag="word-exportflow"></b>: ' + changeunit(row.Flow.ExportFlow) + '&emsp;'
                    + '<b langtag="word-inletflow"></b>: ' + changeunit(row.Flow.InletFlow) + '&emsp;'
                    + '<b langtag="word-crypt"></b>: ' + row.Client.Cnf.Crypt + '&emsp;'
                    + '<b langtag="word-compress"></b>: ' + row.Client.Cnf.Compress + '&emsp;'
                    + '<b langtag="word-basicusername"></b>: ' + row.Client.Cnf.U + '&emsp;'
                    + '<b langtag="word-basicpassword"></b>: ' + row.Client.Cnf.P + '&emsp;'
            if (row.Mode == "p2p") {
                return tmp + "<br/><br>"
                        + '<b langtag="word-commandaccessp2p"></b>: ' + "<code>./npc{{.win}} -server={{.ip}}:{{.p}} -vkey=" + row.Client.VerifyKey 
                        + " -type=" +{{.bridgeType}} +" -password=" + row.Password + " -target=" + row.Target.TargetStr + "</code>" + "<br/><br>"
                        + '<b langtag="word-commandaccessp2ps"></b>: ' + "<code>./npc{{.win}} -server={{.ip}}:{{.p}} -vkey=" + row.Client.VerifyKey 
                        + " -type=" +{{.bridgeType}} +" -password=" + row.Password + " -local_type=p2ps" + "</code>" + "<br/><br>"
                        + '<b langtag="word-commandaccessp2pt"></b>: ' + "<code>./npc{{.win}} -server={{.ip}}:{{.p}} -vkey=" + row.Client.VerifyKey 
                        + " -type=" +{{.bridgeType}} +" -password=" + row.Password + " -local_type=p2pt" + "</code>"

            }
            if (row.Mode == "secret") {
                return tmp + "<br/><br>" + '<b langtag="word-commandaccess"></b>: ' + "<code>./npc{{.win}} -server={{.ip}}:{{.p}} -vkey=" + row.Client.VerifyKey 
                        + " -type=" +{{.bridgeType}} +" -password=" + row.Password + " -local_type=secret" + "</code>"
            }
            return tmp
        },
        //表格的列
        columns: [
            {
                field: 'Id',//域值
                title: '<span langtag="word-id"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Id',//域值
                title: '<span langtag="word-clientid"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return row.Client.Id
                }
            },
            {
                field: 'Remark',//域值
                title: '<span langtag="word-remark"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Mode',//域值
                title: '<span langtag="word-scheme"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return '<span langtag="scheme-' + value + '"></span>'
                }
            },
            {
                field: 'Port',//域值
                title: '<span langtag="word-port"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Target',//域值
                title: '<span langtag="word-target"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return row.Target.TargetStr
                }
            },
            {
                field: 'Password',//域值
                title: '<span langtag="word-identificationkey"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                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: 'RunStatus',//域值
                title: '<span langtag="word-runstatus"></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: '',//域值
                title: '<span langtag="word-clientstatus"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    if (row.Client.IsConnect) {
                        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 (row.Status) {
                        btn_group += "<a onclick=\"submitform('stop', '{{.web_base_url}}/index/stop', {'id':" + row.Id
                        btn_group += '})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += "<a onclick=\"submitform('start', '{{.web_base_url}}/index/start', {\'id\':" + row.Id
                        btn_group += '})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    btn_group += "<a onclick=\"submitform('delete', '{{.web_base_url}}/index/del', {'id':" + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    btn_group += '<a  href="{{.web_base_url}}/index/edit?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a></div>'
                    return btn_group
                }
            }
        ]
    });
</script>