这个插件捣腾了好久了终于调通了,记录一下
1.先引入相应的文件
<!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>
<!-- Bootstrap -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="assets/js/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="assets/js/bootstrap.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="assets/css/bootstrap-table.css">
<!-- Latest compiled and minified JavaScript -->
<script src="assets/js/bootstrap-table.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="assets/js/bootstrap-table-zh-CN.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好ee,世界!</h1>
<table id="table"></table>
<table data-toggle="table"
data-url="c.php"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Stars</th>
<th data-field="price">Forks</th>
<th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
</tr>
</thead>
</table>
<script>
$('#table').bootstrapTable({
url: 'c.php',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
function actionFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
'<a class="edit ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
</script>
</body>
</html>
以上要注意的是url是传的json格式的数据,例如c.php为
<?php
$rows=array('id'=>'one', 'name'=>'two', 'price'=>'three');
$row=array($rows);
echo encode_json($row);
#解决中文编码问题,先对需要处理的做urlencode处理,然后json_encode,最后做urldecode处理
function encode_json($str) {
return urldecode(json_encode(url_encode($str)));
}
function url_encode($str) {
if(is_array($str)) {
foreach($str as $key=>$value) {
$str[urlencode($key)] = url_encode($value);
}
} else {
$str = urlencode($str);
}
return $str;
}
?>
还有就是在加载表格选项的时候
在html中是
<table data-toggle="table"
data-url="c.php"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Stars</th>
<th data-field="price">Forks</th>
<th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
</tr>
</thead>
</table>
这样加载的。
在用js是
<table id="table"></table>
<pre name="code" class="javascript"> <script>
$('#table').bootstrapTable({
url: 'c.php',
search:'true',
showRefresh:'true',
showToggle:'true',
showColumns:'true',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
</script>
这样加载的。
在js中用的是‘名称’,而在html中用的是‘标签’。