关于bootstrap table 插件的使用总结

最新推荐文章于 2024-08-09 08:18:55 发布

d0d0bird

最新推荐文章于 2024-08-09 08:18:55 发布

阅读量6.1k

点赞数 1

本文链接：https://blog.csdn.net/d0d0bird/article/details/50922057

版权

　　　这个插件捣腾了好久了终于调通了，记录一下

１．先引入相应的文件

<!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>

这样加载的。