值得分享的bootstrap table实例


Posted in Javascript onSeptember 22, 2016

bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了。

值得分享的bootstrap table实例

值得分享的bootstrap table实例

客户端

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Bootstrap-Table</title>
 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="assets/bootstrap-table.css"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
 <div>
 <div>
 <div class="col-*-12">

 <div id="toolbar">
 <div class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加记录</div>
 </div>
 
 <table id="mytab" class="table table-hover"></table>

 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  ×
 </button>
 <h4 class="modal-title" id="myModalLabel">添加记录</h4>
 </div>
 <div class="modal-body">
 <form role="form" action="javascript:void(0)">
  <div class="form-group">
  <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
  <input type="text" class="form-control" id="age" placeholder="请输入年龄">
  </div>
 </form>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 <button type="button" class="btn btn-primary" id="addRecord">提交</button>
 </div>
 </div>
 </div>
 </div>

 </div>
 </div>
 </div>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <script src="assets/bootstrap-table.js"></script>
 <script src="assets/bootstrap-table-zh-CN.js"></script>
 <script type="text/javascript">
 $(function() {
 //根据窗口调整表格高度
 $(window).resize(function() {
 $('#mytab').bootstrapTable('resetView', {
 height: tableHeight()
 })
 })

 $('#mytab').bootstrapTable({
 url: "index.php",//数据源
 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total
 height: tableHeight(),//高度调整
 search: true,//是否搜索
 pagination: true,//是否分页
 pageSize: 20,//单页记录数
 pageList: [5, 10, 20, 50],//分页步进值
 sidePagination: "server",//服务端分页
 contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
 dataType: "json",//期待返回数据类型
 method: "post",//请求方式
 searchAlign: "left",//查询框对齐方式
 queryParamsType: "limit",//查询参数组织方式
 queryParams: function getParams(params) {
 //params obj
 params.other = "otherInfo";
 return params;
 },
 searchOnEnterKey: false,//回车搜索
 showRefresh: true,//刷新按钮
 showColumns: true,//列选择按钮
 buttonsAlign: "left",//按钮对齐方式
 toolbar: "#toolbar",//指定工具栏
 toolbarAlign: "right",//工具栏对齐方式
 columns: [
 {
 title: "全选",
 field: "select",
 checkbox: true,
 width: 20,//宽度
 align: "center",//水平
 valign: "middle"//垂直
 },
 {
 title: "ID",//标题
 field: "id",//键名
 sortable: true,//是否可排序
 order: "desc"//默认排序方式
 },
 {
 field: "name",
 title: "NAME",
 sortable: true,
 titleTooltip: "this is name"
 },
 {
 field: "age",
 title: "AGE",
 sortable: true,
 },
 {
 field: "info",
 title: "INFO[using-formatter]",
 formatter: 'infoFormatter',//对本列数据做格式化
 }
 ],
 onClickRow: function(row, $element) {
 //$element是当前tr的jquery对象
 $element.css("background-color", "green");
 },//单击row事件
 locale: "zh-CN"//中文支持,
 detailView: false, //是否显示详情折叠
 detailFormatter: function(index, row, element) {
 var html = '';
 $.each(row, function(key, val){
 html += "<p>" + key + ":" + val + "</p>"
 });
 return html;
 }
 });

 $("#addRecord").click(function(){
 alert("name:" + $("#name").val() + " age:" +$("#age").val());
 });
 })

 function tableHeight() {
 return $(window).height() - 50;
 }
 /**
 * 列的格式化函数 在数据从服务端返回装载前进行处理
 * @param {[type]} value [description]
 * @param {[type]} row [description]
 * @param {[type]} index [description]
 * @return {[type]} [description]
 */
 function infoFormatter(value, row, index)
 {
 return "id:" + row.id + " name:" + row.name + " age:" + row.age;
 }
 </script>
</body>
</html>

服务端:

<?php
/**
 * 服务端模拟数据
 */

//前端期望数据为json
header("Content-Type:application/json;charset=utf-8");
//post 请求 请求内容类型为 application/x-www-form-urlencoded 如果是 application/json 则需要另行处理 $_POST 数组不会被填充

//为了保持模拟的数据
session_start();

if ($_SESSION['emulate_data']) {
 //已生成
} else {
 $list = [];
 //第一次会模拟个数据
 for($i = 1; $i < 50; $i ++) {
 $list[] = [
 "id" => $i,
 "name" => substr(str_shuffle(implode('', range('a', 'z'))), 0, 5),
 "age" => mt_rand(10, 30)
 ];
 }
 $_SESSION['emulate_data'] = $list;
}

$list_temp = [];
//检索
if (isset($_POST['search']) && !empty($_POST['search'])) {
 foreach ($_SESSION['emulate_data'] as $key => $row) {
 if (strpos($row['name'], $_POST['search']) !== false 
 || strpos($row['age'], $_POST['search']) !== false) {
 $list_temp[] = $_SESSION['emulate_data'][$key];
 }
 }
} else {
 $list_temp = $_SESSION['emulate_data'];
}
//排序
if (isset($_POST['sort'])) {
 $temp = [];
 foreach ($list_temp as $row) {
 $temp[] = $row[$_POST['sort']];
 }
 //php的多维排序
 array_multisort($temp,
 $_POST['sort'] == 'name' ? SORT_STRING : SORT_NUMERIC,
 $_POST['order'] == 'asc' ? SORT_ASC : SORT_DESC,
 $list_temp
 );
}

//分页时需要获取记录总数,键值为 total
$result["total"] = count($list_temp);
//根据传递过来的分页偏移量和分页量截取模拟分页 rows 可以根据前端的 dataField 来设置
$result["rows"] = array_slice($list_temp, $_POST['offset'], $_POST['limit']);

echo json_encode($result);

需要注意的是

1、bootstrap table 可以前端分页也可以后端分页,这里我们使用的是后端分页,后端分页时需返回含有

total:总记录数 这个键值好像是固定的,我看文档没找到可以修改成别的

rows: 记录集合 键值可以修改  dataField 自己定义成自己想要的就好

{
 "total":200, 
 "rows":[
 {"id":1, "name":"sallency", "age": 26},
 {"id":1, "name":"sallency", "age": 26},
 {"id":1, "name":"sallency", "age": 26},
 {"id":1, "name":"sallency", "age": 26},
 {"id":1, "name":"sallency", "age": 26}]
}

如上的json数据(当然我前台设置的期望数据类型是json,php 直接encode一个 ["total"=>200, "rows"=>[[],[],][,][,]]的数组就完事了,方便)

2、且其请求后端是传递的内容格式默认为 application/json 我自己习惯用方便的 x-www-form-urlencoded

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery选择器需要注意的问题
Nov 26 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
使用vue制作滑动标签
Sep 21 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
js+cavans实现图片滑块验证
Sep 29 Javascript
vue3中的组件间通信
Mar 31 Vue.js
第一次动手实现bootstrap table分页效果
Sep 22 #Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 #Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 #Javascript
JavaScript面试题大全(推荐)
Sep 22 #Javascript
JavaScript 是什么意思
Sep 22 #Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 #Javascript
JavaScript与java语言有什么不同
Sep 22 #Javascript
You might like
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
浅析Python函数式编程
2018/10/06 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
应届毕业生的自我鉴定
2013/11/13 职场文书
农村婚礼证婚词
2014/01/10 职场文书
3的组成教学反思
2014/04/30 职场文书
安全生产演讲稿
2014/05/09 职场文书
学校春季防火方案
2014/06/08 职场文书
感恩教育主题班会
2015/08/12 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle
Mysql如何查看是否使用到索引
2022/12/24 MySQL