nps/web/views/index/hlist.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-hostlist"></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/addhost?vkey={{.task_id}}&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>
    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: window.location, // 服务器数据的加载地址
        queryParams: function (params) {
            return {
                "offset": params.offset,
                "limit": params.limit,
                "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');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            return '<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;<br/><br>'
                    + '<b langtag="word-httpscert"></b>: ' + row.CertFilePath + '&emsp;'
                    + '<b langtag="word-httpskey"></b>: ' + row.KeyFilePath + '&emsp;<br/><br>'
                    + '<b langtag="word-requestheader"></b>: ' + row.HeaderChange + '&emsp;<br/><br>'
                    + '<b langtag="word-requesthost"></b>: ' + row.HostChange + '&emsp;'
        },
        //表格的列
        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: 'Host',//域值
                title: '<span langtag="word-host"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Scheme',//域值
                title: '<span langtag="word-scheme"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return '<span langtag="word-' +value+ '"></span>'
                }
            },
            {
                field: 'Target',//域值
                title: '<span langtag="word-target"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return row.Target.TargetStr
                }
            },
            {
                field: 'Location',//域值
                title: '<span langtag="word-location"></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: '',//域值
                title: '<span langtag="word-clientstatus"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    hosturl = ((row.Scheme == 'http' ) ? 'http://' : 'https://') + row.Host + row.Location
                    if (row.Client.IsConnect) {
                        return '<a href="' + hosturl + '" target="_blank"><span class="badge badge-primary" langtag="word-online"></span></a>'
                    } 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">'
                    btn_group += "<a onclick=\"submitform('delete', '{{.web_base_url}}/index/delhost', {'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/edithost?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a></div>'
                    return btn_group
                }
            }
        ]
    });
</script>