bootstrap-table中文支持问题
引入中文支持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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
中文支持在最顶部引入试一下
是JS脚本文件引入顺序错误，下面展示代码