鍍金池/ 問(wèn)答/數(shù)據(jù)庫(kù)  HTML/ bootstrap-table中文支持問(wèn)題

bootstrap-table中文支持問(wèn)題

引入中文支持js:<script type="text/javascript" src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>^卻不能正常支持中文。
中文支持問(wèn)題截圖不知什么處理。希望大神幫忙解決下,謝謝了

全部代碼如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="=IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--以上幾個(gè)是必須的-->
    <meta name="description" content="hello">
    <meta name="author" content="test">
    <title>禮金錄入</title>

    <!--inport bootstrap-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <!-- bootstrap-table start  -->
    <link rel="stylesheet" href="bootstrap-table/dist/bootstrap-table.css">
    <script type="text/javascript" src="bootstrap-table/dist/bootstrap-table.js"></script>
    <script type="text/javascript" src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="bootstrap-table/docs/dist/extensions/editable/bootstrap-table-editable.js"></script>

    <!-- bootstrap-table end  -->

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">



</head>

<body style="background-color: #C0C0C0">

    <div class="container">

        <form class="form-signin">
            <h2 class="form-signin-heading" align="center">主家信息</h2>
            <input type="text" class="form-control" placeholder="主家姓名" required autofocus>
            <input type="text" class="form-control" placeholder="來(lái)自哪里" required autofocus>
            <input type="text" class="form-control" placeholder="主家金額" required>
            <button class="btn btn-lg btn-primary btn-block" type="submit">確定</button>
        </form>
    </div>

    <hr />

    <div class="container">

        <form class="form-signin">
            <h2 class="form-signin-heading" align="center">跟來(lái)人信息</h2>
            <input type="text" class="form-control" placeholder="姓名" required autofocus>
            <input type="text" class="form-control" placeholder="金額" required>
            <button class="btn btn-lg btn-primary btn-block" type="submit">確定</button>
        </form>

    </div>

    <hr />

    <div class="container">
        <table id="table" data-search="true" data-show-refresh="true" data-show-columns="true" data-show-export="true" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]"
            data-show-footer="false" data-side-pagination="server" data-url="dataj.json" data-locale="zh-CN">

        </table>
        <button class="btn-warning">確認(rèn)提交</button>
    </div>


    <script>
        var $table = $('#table'),
            $remove = $('#remove'),
            selections = [];

        function initTable() {
            $table.bootstrapTable({
                height: getHeight(),
                method: 'get',
                dataType: "json",
                data_locale: 'zh-CN',
                undefinedText: "暫無(wú)數(shù)據(jù)", //當(dāng)數(shù)據(jù)為 undefined 時(shí)顯示的字符

                columns: [
                    [{
                        title: "測(cè)試以下標(biāo)題欄",
                        colspan: 4,
                        align: 'center'
                    }],
                    [{
                        title: "序號(hào)",
                        field: 'id',
                        align: 'center',
                        valign: 'midddle',
                        sortable: true
                    }, {
                        title: "姓名",
                        field: 'full_name',
                        align: 'center',
                        valign: 'midddle',
                    }, {
                        title: "金額",
                        field: 'money',
                        align: 'center',
                        valign: 'midddle',
                        sortable: true
                    }, {
                        field: 'operation',
                        title: '操作',
                        align: 'center',
                        events: operateEvents, //給按鈕注冊(cè)事件
                        formatter: addFunctionAlty //表格中增加按鈕</span>
                    }]
                ]

            });
            // sometimes footer render error.
            setTimeout(function() {
                $table.bootstrapTable('resetView');
            }, 200);
            $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table',
                function() {
                    $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
                    // save your data, here just save the current page
                    selections = getIdSelections();
                    // push or splice the selections if you want to save all data selections
                });
            $table.on('expand-row.bs.table', function(e, index, row, $detail) {
                if (index % 2 == 1) {
                    $detail.html('Loading from ajax request...');
                    $.get('LICENSE', function(res) {
                        $detail.html(res.replace(/\n/g, '<br>'));
                    });
                }
            });
            $table.on('all.bs.table', function(e, name, args) {
                console.log(name, args);
            });
            $remove.click(function() {
                var ids = getIdSelections();
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                });
                $remove.prop('disabled', true);
            });
            $(window).resize(function() {
                $table.bootstrapTable('resetView', {
                    height: getHeight()
                });
            });
        }
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function(row) {
                return row.id
            });
        }

        function responseHandler(res) {
            $.each(res.rows, function(i, row) {
                row.state = $.inArray(row.id, selections) !== -1;
            });
            return res;
        }

        function detailFormatter(index, row) {
            var html = [];
            $.each(row, function(key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>');
            });
            return html.join('');
        }

        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                '<i class="glyphicon glyphicon-heart"></i>',
                '</a>  ',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        // 修改按鈕、刪除按鈕
        function addFunctionAlty(value, row, index) {
            return [
                '<button type="button" id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#ModalInfo">修改</button>??',
                '<button id="btn_delete" class="btn btn-warning">刪除</button>'
            ].join('');
        }

        window.operateEvents = {
            /*'click .like': function(e, value, row, index) {
                alert('You click like action, row: ' + JSON.stringify(row));
            },
            'click .remove': function(e, value, row, index) {
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
            }*/
            // 點(diǎn)擊修改按鈕執(zhí)行的方法
            'click #btn_edit': function(e, value, row, index) {
                // 寫(xiě)自己的方法。。。
            },
            // 點(diǎn)擊刪除按鈕執(zhí)行的方法
            'click #btn_delete': function(e, value, row, index) {
                // 寫(xiě)自己的方法。。。
            }
        };

        function totalTextFormatter(data) {
            return 'Total';
        }

        function totalNameFormatter(data) {
            return data.length;
        }

        function totalPriceFormatter(data) {
            var total = 0;
            $.each(data, function(i, row) {
                total += +(row.price.substring(1));
            });
            return '$' + total;
        }

        function getHeight() {
            return $(window).height() - $('h1').outerHeight(true);
        }
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        $(function() {
            var scripts = [
                    location.search.substring(1) || 'bootstrap-table/src/bootstrap-table.js',
                    'bootstrap-table/src/extensions/export/bootstrap-table-export.js',
                    'bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',

                ],
                eachSeries = function(arr, iterator, callback) {
                    callback = callback || function() {};
                    if (!arr.length) {
                        return callback();
                    }
                    var completed = 0;
                    var iterate = function() {
                        iterator(arr[completed], function(err) {
                            if (err) {
                                callback(err);
                                callback = function() {};
                            } else {
                                completed += 1;
                                if (completed >= arr.length) {
                                    callback(null);
                                } else {
                                    iterate();
                                }
                            }
                        });
                    };
                    iterate();
                };
            eachSeries(scripts, getScript, initTable);
        });

        function getScript(url, callback) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.src = url;
            var done = false;
            // Attach handlers for all browsers
            script.onload = script.onreadystatechange = function() {
                if (!done && (!this.readyState ||
                        this.readyState == 'loaded' || this.readyState == 'complete')) {
                    done = true;
                    if (callback)
                        callback();
                    // Handle memory leak in IE
                    script.onload = script.onreadystatechange = null;
                }
            };
            head.appendChild(script);
            // We handle everything using the script element injection
            return undefined;
        }
        $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
    </script>

</body>

</html>
回答
編輯回答
避風(fēng)港

中文支持在最頂部引入試一下

2017年5月20日 03:56