0

引入中文支持js:<script type="text/javascript" src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>^却不能正常支持中文。
中文支持问题截图不知什么处理。希望大神帮忙解决下,谢谢了

全部代码如下:

<!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">
    <!--以上几个是必须的-->
    <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="来自哪里" 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">跟来人信息</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">确认提交</button>
    </div>


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

        function initTable() {
            $table.bootstrapTable({
                height: getHeight(),
                method: 'get',
                dataType: "json",
                data_locale: 'zh-CN',
                undefinedText: "暂无数据", //当数据为 undefined 时显示的字符

                columns: [
                    [{
                        title: "测试以下标题栏",
                        colspan: 4,
                        align: 'center'
                    }],
                    [{
                        title: "序号",
                        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, //给按钮注册事件
                        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]
                });
            }*/
            // 点击修改按钮执行的方法
            'click #btn_edit': function(e, value, row, index) {
                // 写自己的方法。。。
            },
            // 点击删除按钮执行的方法
            'click #btn_delete': function(e, value, row, index) {
                // 写自己的方法。。。
            }
        };

        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>
2018-06-16 提问
2 个回答
0

中文支持在最顶部引入试一下

0

是JS脚本文件引入顺序错误,下面展示代码

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/baseJsp.jsp" %>
<!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">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>所有文章</title>

    <!-- JQuery-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- BootStrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!--BootStrap Table-->
    <link href="https://cdn.staticfile.org/bootstrap-table/1.13.5/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/bootstrap-table/1.13.5/bootstrap-table.min.js"/>


    <script type="text/javascript" src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->
</head>
<body>
<%@include file="/jsp/top.jsp" %>
<div class="row clearfix"></div>
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table id="table"></table>
        </div>
    </div>
</div>
<!--在初始化table之前引入中文脚本-->
<script src="https://cdn.staticfile.org/bootstrap-table/1.13.5/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        $("#table").bootstrapTable({
            url: '${ctx}/blogInfoController/listForTable',
            method: 'POST',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            // sortOrder: "asc",                   //排序方式
            queryParams: function (params) {
                var temp = {
                    limit: params.offset,//从数据库第几条记录开始
                    offset: params.limit//找多少条
                };
                return temp;
            },//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            contentType: 'application/x-www-form-urlencoded',
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 550,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            // uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
            // showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,
            data_local: "zh-US",
            columns: [{
                field: 'blogTitle',
                title: '标题',
                align: 'center'
            },{
                field: 'blogTypeName',
                title: '文章类型',
                align: 'center'
            },{
                field: 'userName',
                title: '作者',
                align: 'center'

            },{
                field: 'createTime',
                title: '创建时间',
                align: 'center',
                formatter: function (value, row, index) {
                    return timestampToTime(value);
                }
            },{
                field: 'top',
                title: '是否置顶',
                align: 'center',
                formatter: function (value, row, index) {
                    if (value === 0) {
                        return "不置顶"
                    }
                    if (value === 1) {
                        return "置顶"
                    }
                }
            },{
                field: 'blogId',
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    var html = "<button type='button' class='btn btn-primary btn-sm'>查看</button>&nbsp;&nbsp;";
                    html += "<button type='button' class='btn btn-sm btn-warning'>修改</button>&nbsp;&nbsp;";
                    html += "<button type='button' class='btn btn-sm btn-danger'>删除</button>";
                    return html;
                }
            },]
        })
    });

    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
        var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
        var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
        var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
        return Y+M+D+h+m+s;
    }
</script>
</body>
</html>
  • 查看效果

图片描述

撰写答案

推广链接