master

分支 (1)

管理

管理

master

bootstrap-table-example-study
/
2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="./node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>语言切换 (分页、搜索、toolbar)</h5>
                </div>
                <div class="ibox-content">

                    <div class="toolbar">
                        <select class="form-control" id="locale">
                            <option value="af-ZA">af-ZA</option>
                            <option value="ar-SA">ar-SA</option>
                            <option value="ca-ES">ca-ES</option>
                            <option value="cs-CZ">cs-CZ</option>
                            <option value="da-DK">da-DK</option>
                            <option value="de-DE">de-DE</option>
                            <option value="el-GR">el-GR</option>
                            <option value="en-US" selected>en-US</option>
                            <option value="es-AR">es-AR</option>
                            <option value="es-CL">es-CL</option>
                            <option value="es-CR">es-CR</option>
                            <option value="es-ES">es-ES</option>
                            <option value="es-MX">es-MX</option>
                            <option value="es-NI">es-NI</option>
                            <option value="es-SP">es-SP</option>
                            <option value="et-EE">et-EE</option>
                            <option value="eu-EU">eu-EU</option>
                            <option value="fa-IR">fa-IR</option>
                            <option value="fi-FI">fi-FI</option>
                            <option value="fr-BE">fr-BE</option>
                            <option value="fr-FR">fr-FR</option>
                            <option value="he-IL">he-IL</option>
                            <option value="hr-HR">hr-HR</option>
                            <option value="hu-HU">hu-HU</option>
                            <option value="id-ID">id-ID</option>
                            <option value="it-IT">it-IT</option>
                            <option value="ja-JP">ja-JP</option>
                            <option value="ka-GE">ka-GE</option>
                            <option value="ko-KR">ko-KR</option>
                            <option value="ms-MY">ms-MY</option>
                            <option value="nb-NO">nb-NO</option>
                            <option value="nl-NL">nl-NL</option>
                            <option value="pl-PL">pl-PL</option>
                            <option value="pt-BR">pt-BR</option>
                            <option value="pt-PT">pt-PT</option>
                            <option value="ro-RO">ro-RO</option>
                            <option value="ru-RU">ru-RU</option>
                            <option value="sk-SK">sk-SK</option>
                            <option value="sv-SE">sv-SE</option>
                            <option value="th-TH">th-TH</option>
                            <option value="tr-TR">tr-TR</option>
                            <option value="uk-UA">uk-UA</option>
                            <option value="ur-PK">ur-PK</option>
                            <option value="uz-Latn-UZ">uz-Latn-UZ</option>
                            <option value="vi-VN">vi-VN</option>
                            <option value="zh-CN">zh-CN</option>
                            <option value="zh-TW">zh-TW</option>
                        </select>
                    </div>

                    <!-- table内容 -->
                    <table id="table"></table>

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

    <div class="footer fixed_full text-center">
        <div>
            <strong>Copyright</strong> 飘逸 &copy; 2019-2020
        </div>
    </div>
</div>

<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/popper.js/dist/umd/popper.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

<!-- 自定义js内容 -->
<script type="text/javascript" src="./js/bootstrap-table-custom.js"></script>
<script>
    var $table = $('#table');

    $(function () {
        initTable();

        $('#locale').change(initTable);
    })

    function initTable() {
        $table.bootstrapTable('destroy').bootstrapTable({
            height: 500,
            locale: $('#locale').val(),
            toolbar: '.toolbar',
            pagination: true,
            search: true,
            columns: [{
                field: 'id',
                title: 'Item ID'
            }, {
                field: 'name',
                title: 'Item Name'
            }, {
                field: 'price',
                title: 'Item Price'
            }],
            data: [
                {
                    "id": 1,
                    "name": "Item 1",
                    "price": "$1"
                },
                {
                    "id": 2,
                    "name": "Item 2",
                    "price": "$2"
                },
                {
                    "id": 3,
                    "name": "Item 3",
                    "price": "$3"
                }
            ]
        });
    }
</script>
</body>
</html>